Package Exports

ng-google-recaptcha

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (ng-google-recaptcha) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

License

MIT License