Skip to content
This repository was archived by the owner on Aug 17, 2021. It is now read-only.

Commit 1b7faba

Browse files
author
Evan Sharp
committed
Update docs to include ng-model
Updated the README to include information about ng-model as using it over manually/programmically trying to get the reCaptcha response is easier and will lead to less issues.
1 parent 5327446 commit 1b7faba

File tree

1 file changed

+36
-9
lines changed

1 file changed

+36
-9
lines changed

README.md

Lines changed: 36 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ See [the demo file](demo/usage.html) for a quick usage example.
4848
```
4949
As you can see, we are specifying a `onload` callback, which will notify the
5050
angular service once the api is ready for usage.
51-
51+
5252
- Also include the vc-recaptcha script and make your angular app depend on the `vcRecaptcha` module.
5353

5454
```html
@@ -74,20 +74,45 @@ Form Validation
7474
---------------
7575
**By default**, if placed in a [form](https://docs.angularjs.org/api/ng/directive/form) using [formControl](https://docs.angularjs.org/api/ng/type/form.FormController) the captcha will need to be checked for the form to be valid.
7676
If the captcha is not checked (if the user has not checked the box or the check has expired) the form will be marked as invalid. The validation key is `recaptcha`.
77-
You can **opt out** of this feature by setting the `required` attribute to `false` or a scoped variable
77+
You can **opt out** of this feature by setting the `required` attribute to `false` or a scoped variable
7878
that will evaluate to `false`. Any other value, or omitting the attribute will opt in to this feature.
7979

8080
Response Validation
8181
-------------------
8282

8383
To validate this object from your server, you need to use the API described in the [verify section](https://developers.google.com/recaptcha/docs/verify). Validation is outside of the scope of this tool, since is mandatory to do that at the server side.
8484

85-
To get the _response_ that you need to send to your server, use the method `getResponse()` from the `vcRecaptchaService` angular service. This method receives an optional argument _widgetId_, useful for getting the response of a specific reCaptcha widget (in case you render more than one widget). If no widget ID is provided, the response for the first created widget will be returned.
85+
You can simple supply a value for `ng-model` which will be dynamically populated and cleared as the _response_ becomes available and expires, respectfully. When you want the value of the response, you can grab it from the scoped variable that was passed to `ng-model`. It works just like adding `ng-model` to any other input in your form.
86+
87+
```html
88+
...
89+
<form name="myForm" ng-submit="mySubmit(myFields)">
90+
...
91+
<div
92+
vc-recaptcha
93+
ng-model="myFields.myRecaptchaResponse"
94+
></div>
95+
...
96+
</form>
97+
...
98+
```
99+
100+
```js
101+
...
102+
$scope.mySubmit = function(myFields){
103+
console.log(myFields.myRecaptchaResponse);
104+
}
105+
...
106+
```
107+
108+
Or you can programmatically get the _response_ that you need to send to your server, use the method `getResponse()` from the `vcRecaptchaService` angular service. This method receives an optional argument _widgetId_, useful for getting the response of a specific reCaptcha widget (in case you render more than one widget). If no widget ID is provided, the response for the first created widget will be returned.
86109

87110
```js
88-
var response = vcRecaptchaService.getResponse(); // returns the string response
111+
var response = vcRecaptchaService.getResponse(widgetId); // returns the string response
89112
```
90113

114+
Using `ng-model` is recommended for normal use as the value is tied directly to the reCaptcha instance through the directive and there is no need to manage or pass a _widgetId_.
115+
91116
Other Parameters
92117
----------------
93118

@@ -96,6 +121,7 @@ You can optionally pass a __theme__ the captcha should use, as an html attribute
96121
```html
97122
<div
98123
vc-recaptcha
124+
ng-model="gRecaptchaResponse"
99125
theme="---- light or dark ----"
100126
size="---- compact or normal ----"
101127
type="'---- audio or image ----'"
@@ -118,6 +144,7 @@ There are three listeners you can use with the directive, `on-create`, `on-succe
118144
<div
119145
vc-recaptcha
120146
key="'---- YOUR PUBLIC KEY GOES HERE ----'"
147+
ng-model="gRecaptchaResponse"
121148
on-create="setWidgetId(widgetId)"
122149
on-success="setResponse(response)"
123150
on-expire="cbExpiration()"
@@ -137,9 +164,9 @@ app.controller('myController', ['$scope', 'vcRecaptchaService', function ($scope
137164
$scope.setResponse = function (response) {
138165
// send the `response` to your server for verification.
139166
};
140-
167+
141168
$scope.cbExpiration = function() {
142-
// reset the 'response' object that is on scope
169+
// reset the 'response' object that is on scope
143170
};
144171
}]);
145172
```
@@ -157,7 +184,7 @@ If you want to use a secure token pass it along with the site key as an html att
157184
></div>
158185
```
159186

160-
Please note that you have to enrypt your token yourself with your private key upfront!
187+
Please note that you have to encrypt your token yourself with your private key upfront!
161188
To learn more about secure tokens and how to generate & encrypt them please refer to the [reCAPTCHA Docs](https://developers.google.com/recaptcha/docs/secure_token).
162189

163190

@@ -180,6 +207,6 @@ Recent Changelog
180207
- 2.0.0 - Rewritten service to support new reCaptcha
181208
- 1.0.2 - added extra `Recaptcha` object methods to the service, i.e. `switch_type`, `showhelp`, etc.
182209
- 1.0.0 - the `key` attribute is now a scope property of the directive
183-
- Added the ```destroy()``` method to the service. Thanks to @endorama.
210+
- Added the `destroy()` method to the service. Thanks to @endorama.
184211
- We added a different integration method (see demo/2.html) which is safer because it doesn't relies on a timeout on the reload event of the recaptcha. Thanks to [@sboisse](https://github.com/sboisse) for reporting the issue and suggesting the solution.
185-
- The release is now built using [GruntJS](http://gruntjs.com/) so if you were using the source files (the ```src``` directory) in your projects you should now use the files in the release directory.
212+
- The release is now built using [GruntJS](http://gruntjs.com/) so if you were using the source files (the `src` directory) in your projects you should now use the files in the release directory.

0 commit comments

Comments
 (0)