ng-google-recaptcha
AngularJS 1.x module that implements Google's I'm not robot (reCaptcha)
This module lets you to create and manage as many reCaptcha instances, as you want.
Installation
bower
bower install --save ng-google-recaptcha
npm
npm install --save ng-google-recaptcha
Usage
-
Get recaptcha key for your domain here.
-
Include ng-google-recaptcha script.
<script src="ng-google-recaptcha.js"></script>
- Add ngGoogleRecaptcha to your app dependencies
var app = angular.module('myApp', ['ngGoogleRecaptcha']);
- Place a container to render recaptcha
<div class="my-recaptcha" data-sitekey="YOUR SITE KEY"></div>
Note: You may define site key in js code, to make it reusable (for example, if you have more than 1 instances of recaptcha).
- Create and render recaptcha instance
var myCtrl = function (recaptchaFactory) {
var recaptcha = recaptchaFactory.create('.my-recaptcha', {
sitekey: 'yoursitekey'
});
recaptcha.render();
}
angular
.module("app", ['ngGoogleRecaptcha'])
.controller("myCtrl", [
'recaptchaFactory',
myCtrl
]);
- Define callbacks (optionally)
var callbacks = {
/* executes when recaptcha is successfully rendered on page */
created: function (widgetId) {
console.log("I'm created with widgetId: " + widgetId);
},
/* executes when user submits successfull recaptcha response */
success: function (response) {
console.log('Successfully got response from Google:', response);
var params = {
response: response
};
/* makes GET request to given url with some params and executes callback on success */
recaptcha.verify('/your_verification_url', params, function(data){
console.log('Verified and get response: ', data);
});
},
/* executes when recaptcha response expires */
expired: function (widgetId) {
console.log("Recaptcha with widgetId: " + widgetId + " is expired");
recaptcha.reload();
}
}
recaptcha.setConfig(callbacks);
recaptcha.render();
- Customize look (optional)
var lookConfig = {
/* 'light' by default */
theme: 'dark',
/* 'image' by default */
type: 'audio',
/* 'normal' by default */
size: 'compact',
/* 0 by default */
tabindex: 1
};
recaptcha.setConfig(lookConfig);
Note: Better to define config before
render