angular-re-captcha

Integrate reCAPTCHA into angularjs with form validation support.

Install

Install via bower:

bower install angular-re-captcha --save

Include the file into your application:

<script type="text/javascript" src="bower_components/angular-re-captcha/angular-re-captcha.js"></script>

Usage Example

Your can have a look at the example. Basically you have to add reCAPTCHA to your dependencies, configure your key.

angular.module('myApp', ['reCAPTCHA'])
       .config(function (reCAPTCHAProvider) {
            // required: please use your own key :)
            reCAPTCHAProvider.setPublicKey('---KEY---');
            
            // optional: gets passed into the Recaptcha.create call
            reCAPTCHAProvider.setOptions({
                theme: 'clean'
            });
        })
        .controller('AppCtrl', function ($scope, reCAPTCHA) {
 
            // or you can also set key here
            reCAPTCHA.setPublicKey('---KEY---');
 
       });

and use the directive within a form. Make sure to set a ng-model

<form name="registerForm" role="form" novalidate>
    <div re-captcha ng-model="user.captcha"></div>
    <button type="submit" ng-disabled="registerForm.$invalid">Submit</button>
</form>

API

reCAPTCHAProvider

reCAPTCHAProvider.setPublicKey()

Type: function
Default: null

Sets the PublicKey

reCAPTCHAProvider.setOptions()

Type: function
Default: null

Sets the options, that get passed into the Recaptcha.create call. Here are a list of the available options

reCAPTCHA

reCAPTCHA.setPublicKey()

Type: function Default: null

Sets the PublicKey

Custom Themes

Custom themes configure recaptcha to use existing elements instead of injecting elements for you. Refer to https://developers.google.com/recaptcha/docs/customization for additional documentation and example widgets.

// Configure the template to use a custom widget.
reCAPTCHAProvider.setOptions({
    theme: 'custom',
    custom_theme_widget: 'recaptcha_widget' // The id of your widget element.
});    

<div re-captcha ng-model="user.captcha" id="recaptcha_widget" style="display:none">
    <div id="recaptcha_image"></div>
    <img id="recaptcha_logo" alt="" src="https://www.google.com/recaptcha/api/img/clean/logo.png">
    <input type="text" id="recaptcha_response_field" name="recaptcha_response_field" />
</div>

Contribute

Pull requests are welcome. Please make sure that you include tests in your PR.

License

MIT License