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.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
This repository was archived by the owner on Aug 17, 2021. It is now read-only.
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.
Copy file name to clipboardExpand all lines: README.md
+36-9Lines changed: 36 additions & 9 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -48,7 +48,7 @@ See [the demo file](demo/usage.html) for a quick usage example.
48
48
```
49
49
As you can see, we are specifying a `onload` callback, which will notify the
50
50
angular service once the api is ready for usage.
51
-
51
+
52
52
- Also include the vc-recaptcha script and make your angular app depend on the `vcRecaptcha` module.
53
53
54
54
```html
@@ -74,20 +74,45 @@ Form Validation
74
74
---------------
75
75
**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.
76
76
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
78
78
that will evaluate to `false`. Any other value, or omitting the attribute will opt in to this feature.
79
79
80
80
Response Validation
81
81
-------------------
82
82
83
83
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.
84
84
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
+
<formname="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.
86
109
87
110
```js
88
-
var response =vcRecaptchaService.getResponse(); // returns the string response
111
+
var response =vcRecaptchaService.getResponse(widgetId); // returns the string response
89
112
```
90
113
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
+
91
116
Other Parameters
92
117
----------------
93
118
@@ -96,6 +121,7 @@ You can optionally pass a __theme__ the captcha should use, as an html attribute
96
121
```html
97
122
<div
98
123
vc-recaptcha
124
+
ng-model="gRecaptchaResponse"
99
125
theme="---- light or dark ----"
100
126
size="---- compact or normal ----"
101
127
type="'---- audio or image ----'"
@@ -118,6 +144,7 @@ There are three listeners you can use with the directive, `on-create`, `on-succe
118
144
<div
119
145
vc-recaptcha
120
146
key="'---- YOUR PUBLIC KEY GOES HERE ----'"
147
+
ng-model="gRecaptchaResponse"
121
148
on-create="setWidgetId(widgetId)"
122
149
on-success="setResponse(response)"
123
150
on-expire="cbExpiration()"
@@ -137,9 +164,9 @@ app.controller('myController', ['$scope', 'vcRecaptchaService', function ($scope
137
164
$scope.setResponse=function (response) {
138
165
// send the `response` to your server for verification.
139
166
};
140
-
167
+
141
168
$scope.cbExpiration=function() {
142
-
// reset the 'response' object that is on scope
169
+
// reset the 'response' object that is on scope
143
170
};
144
171
}]);
145
172
```
@@ -157,7 +184,7 @@ If you want to use a secure token pass it along with the site key as an html att
157
184
></div>
158
185
```
159
186
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!
161
188
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).
162
189
163
190
@@ -180,6 +207,6 @@ Recent Changelog
180
207
- 2.0.0 - Rewritten service to support new reCaptcha
181
208
- 1.0.2 - added extra `Recaptcha` object methods to the service, i.e. `switch_type`, `showhelp`, etc.
182
209
- 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.
184
211
- 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