Skip to content
google recaptcha service for angularjs
Branch: master
Clone or download
Latest commit 6ba60ea Feb 19, 2015
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example
test Added tests and readme for factory method setPublicKey Feb 18, 2015
.bowerrc init Jan 17, 2014
.gitignore
.jshintrc
.travis.yml added travis support Jan 18, 2014
Gulpfile.js updated packages Apr 15, 2014
LICENSE
README.md Added tests and readme for factory method setPublicKey Feb 18, 2015
angular-re-captcha.js Added factory method setPublicKey Feb 18, 2015
bower.json
package.json

README.md

angular-re-captcha Bower version Build Status

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

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.