angular-g-recaptcha
Angular module for google recaptcha
Get Started
[1] Installation
Install with npm
npm install angular-g-recaptcha
Install with bower
bower install angular-g-recaptcha --save
[2] Usage
In html
<!doctype html>
<html ng-app="myApp">
<head>
...
</head>
<body>
...
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<script src="path/to/bower_components/angular-g-recaptcha/angular-g-recaptcha.js"></script>
<script>
var myApp = angular.module('myApp', ['wo.grecaptcha']);
</script>
</body>
</html>
Features
- Load recaptcha script automatically
- Wrap callbacks with $rootScope.$apply
- Inherit event emitter so that handle events easily and well
API
API document link
Provider
$grecaptchaProvider
Allow set recaptcha 'default' config, languageCode, onLoadMethodName in config phase.
var app = angular.moudule('myApp', ['wo.grecaptcha'])
.config(function($grecaptchaProvider) {
$grecaptchaProvider.set({
sitekey: '6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI',
theme: 'Light',
type: 'image',
size: 'NORMAL',
tabindex: 0,
callback: [
function(res) {
console.log(res);
return res;
},
function(res) {
res += 'suffix';
return res;
}
],
'expired-callback': function() {
console.log('expired!!');
},
languageCode: 'ko',
onLoadMethodName: 'onRecaptchaApiLoaded'
})
.setType('image');
});
Directive
grecaptcha
- Insert response into ngModel.
- Insert promise and widget id about gre object into given greInfo object.
- Update ngModel value to undefined when resetting recaptcha box is done.
<div data-ng-controllers="greCtrl">
<div grecaptcha="{sitekey: '6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI', theme: 'dark'}"
data-ng-model="response" gre-info="info">
Loading..
</div>
<div data-ng-bind="respone"> </div>
</div>
app.controllers('greCtrl', function($scope) {
$scope.info = {};
$scope.$on('response', function() {
console.log($scope.response);
});
$scope.$on('info', function() {
$scope.info.promise.then(function(gre) {
console.log($scope.info.widgetId);
});
});
});
Service
$grecaptcha
- Return existing gre instance or create new gre instance according to parameters
app.directive('greDirective', function($scope, $grecaptcha, $timeout, $q, $document) {
var options = {
sitekey: '6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI',
theme: 'DARK',
type: 'audio',
size: 'compact',
tabindex: 10,
callback: [
function(res) {
return $q(function(resolve, reject) {
$timeout(function() {
resolve(res);
}
}, 1000);
},
function(res) {
$scope.response = res;
return res;
}
],
'expired-callback': function() {
$scope.response = undefined;
}
};
var gre = $grecaptcha(options);
var el = $document[0].querySelector('.g-recaptcha');
gre.render(el).then(function() {
var gre2 = $grecaptcha(gre.getWidgetId());
if( gre === gre2 ) console.log(true);
});
})
- Get onLoadMethodName, private grecaptcha object, languageCode.
$grecaptcha.getOnLoadMethodName();
$grecapcha.getGrecaptcha();
$grecaptcha.getLanguageCode();
Type
gre
- Init a private grecaptcha object if not exist.
- Set recaptcha config and validate them. (cannot set onLoadMethodName, languageCode)
- Render a recaptcha box at the provided element with its own config.
- Register event listeners and emit events like 'destroy', 'reset'.
- Get recaptcha config value.
var gre = $grecaptcha();
gre
.set('sitekey', '6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI')
.set('theme', 'LIGHT')
.set('size', 'NoRmAl');
.set('callback', function(res) {
$scope.response = res;
});
gre.get('sitekey');
gre.get('theme');
gre.get('size');
gre.on('reset', function() {
$scope.response = undefined;
});
gre.on('destroy', function() {
console.log('Destroy!!!');
});
gre.init().then(function() {
return gre.render(el).then(function() {
console.log(gre.getWidgetId());
});
});
License
MIT