https://github.com/paunin/angular-g-recaptcha
An AngularJS module to ease usage of new Google reCaptcha inside a form
https://github.com/paunin/angular-g-recaptcha
Last synced: 6 months ago
JSON representation
An AngularJS module to ease usage of new Google reCaptcha inside a form
- Host: GitHub
- URL: https://github.com/paunin/angular-g-recaptcha
- Owner: paunin
- Created: 2014-11-22T21:53:54.000Z (almost 11 years ago)
- Default Branch: master
- Last Pushed: 2017-03-04T09:24:24.000Z (over 8 years ago)
- Last Synced: 2025-04-13T11:09:59.493Z (6 months ago)
- Language: HTML
- Size: 5.86 KB
- Stars: 4
- Watchers: 2
- Forks: 6
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
G reCaptcha AngularJS Directive
=========================================
Use this directive to be able to submit with XHR a form that contains a NEW Google reCaptcha.
**Allow you to use multiple recaptcha widgets on one page.**
Demo
====
See [the demo file](index.html) for an usage example.
Keep in mind that the captcha only works when used from a real domain and with a valid re-captcha key, so this file wont work if you just load it in your browser.
Usage
=====
First, you need to get a valid public key for your domain. See http://www.google.com/recaptcha.
Then, include the reCaptcha [AJAX API](https://developers.google.com/recaptcha/docs/display#AJAX) using this script in your HTML:
```html
```
Also include the g-recaptcha script and make your angular app depend on the `vcRecaptcha` module.
```html
```
```javascript
var app = angular.module('myApp', ['angularGRecaptcha']);
```
After that, you can place a container for the captcha widget in your view, and call the `vc-recaptcha` directive on it like this:
```html
```
Here the `key` attribute is passed to the directive's scope, so you can use either a property in your scope or just a hardcoded string. Be careful to use your public key, not your private one.
Validation on server:
====
`ng-model` should contain model for value used in [verifying the user's response](https://developers.google.com/recaptcha/docs/verify) e.g: `ng-model="model.response"`
NOTA BENE:
====
* Any `g-recaptcha` directive should have `id` attribute
* You have to bootstrap your angular application after recaptcha js loaded. So in example we have `onload` callback for `recaptcha/api.js` with simple code:
```
var initApp = function(){
initGRecaptcha();
angular.element(document).ready(function () {
angular.bootstrap(document, ["testApp"]);
});
}
```
Other Parameters
================
You can optionally pass other parameters to the captcha, as html attributes:
```html
```
In this case we are specifying that the captcha should use the theme named 'clean'.