Have ideas to improve npm?Join in the discussion! »

    angular-g-recaptcha

    3.1.0 • Public • Published

    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({ // 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
        });
    });

    License

    MIT

    Install

    npm i angular-g-recaptcha

    DownloadsWeekly Downloads

    7

    Version

    3.1.0

    License

    MIT

    Last publish

    Collaborators

    • avatar