angular-g-recaptcha
v3.1.0
Published
Angular module for google recaptcha
Downloads
34
Maintainers
woooooReadme
angular-g-recaptcha
Angular module for google recaptcha
Get Started
[1] Installation
Install with npm
npm install angular-g-recaptchaInstall 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
Provider
$grecaptchaProvider
Allow set recaptcha 'default' config, languageCode, onLoadMethodName in config phase.
var app = angular.moudule('myApp', ['wo.grecaptcha'])
.config(function($grecaptchaProvider) {
$grecaptchaProvider.set({ // default recaptcha config
sitekey: '6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI', // google official test site key
theme: 'Light', // 'light', 'dark' (not case sensitive)
type: 'image', // 'image', 'audio' (not case sensitive)
size: 'NORMAL', // 'normal', 'compact' (not case sensitive)
tabindex: 0, // number
callback: [ // function or array of functions,
// function returning promise is supported
function(res) {
console.log(res); // response provided by recaptcha box
return res;
},
function(res) {
res += 'suffix';
return res; // 'suffix' will be appended
}
],
'expired-callback': function() { // function or array of functions
// function returning promise is supported
console.log('expired!!');
},
languageCode: 'ko', // languageCodes available in $greLanguageCodes
onLoadMethodName: 'onRecaptchaApiLoaded' // name of method executed when
// recaptcha script be loaded
})
.setType('image'); // can chain set method because it returns self
// can also set property with appending its capitalizing name
// e.g. 'setType', 'setSize', 'setTabindex', etc
});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.
<!-- index.html -->
<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>// ctrl.js
app.controllers('greCtrl', function($scope) {
$scope.info = {}; // an object where gre promise and widget id will be contained
$scope.$on('response', function() {
console.log($scope.response); // resposne of recaptcha box
});
$scope.$on('info', function() {
$scope.info.promise.then(function(gre) {
console.log($scope.info.widgetId); // widget id of gre instance
});
});
});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 = { // own config, not default recaptcha config!!
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); // create new gre instance with options
var el = $document[0].querySelector('.g-recaptcha');
gre.render(el).then(function() {
var gre2 = $grecaptcha(gre.getWidgetId()); // return the gre instance
if( gre === gre2 ) console.log(true); // true
});
})- Get onLoadMethodName, private grecaptcha object, languageCode.
//after init is finished
$grecaptcha.getOnLoadMethodName(); // 'onLoadMethodName'
$grecapcha.getGrecaptcha(); // Object {render: function{...}, reset: function{...}, getResponse: function{...}}
$grecaptcha.getLanguageCode(); // 'ko'
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 // These options are its own config.
.set('sitekey', '6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI')
.set('theme', 'LIGHT')
.set('size', 'NoRmAl');
.set('callback', function(res) {
$scope.response = res;
});
gre.get('sitekey'); // '6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI'
gre.get('theme'); // 'light'
gre.get('size'); // 'normal'
gre.on('reset', function() { // register a listener to 'reset' event
$scope.response = undefined;
});
gre.on('destroy', function() {
console.log('Destroy!!!');
});
gre.init().then(function() { // init grecaptcha object
return gre.render(el).then(function() { //render recaptcha box
console.log(gre.getWidgetId()); // widget id of recaptcha box
});
});