I'm trying to implement the invisible reCAPTCHA in my AngularJS web app. According to their doc, I'm supposed to add an attribute called "data-callback" to the submit button for the login form. However, I am attaching the function for the http request to the button using ng-click. Then what should I put in "data-callback" attribute's value? Also, how can I know if the recaptcha result is successful or not, and get g-recaptcha-response to send to the server with my http request?
Asked
Active
Viewed 5,503 times
1 Answers
12
There is an angular wrapper for this, but if like me, you want to use the original JavaScript library this is how to do it :
The data-callback expect a java-script global function, so using a function inside a $scope will not work.. the solution i came up with is to create a global function that inherit the angular function.
so you should do :
$scope.login = function (token) {
// your login logic
}
$window.login = $scope.login;
and dont forget to inject $window as a dependency in your scope.
The google invisible reCaptcha will send you a token so you can verify the user serverside.
and in your html :
<button class="g-recaptcha"
data-sitekey="your_google_key_here"
data-callback="login"
data-size>
Login
</button>
hope this helps.
Chtioui Malek
- 11,197
- 1
- 72
- 69
-
2For testing you should probably bind to $window rather than window itself. – mikeswright49 Mar 23 '17 at 17:01
-
you're absolutely right, using the global window object directly causes testability problems, thanks for pointing that out. – Chtioui Malek Mar 23 '17 at 17:18
-
2It didn't work at first, but it was because I didn't inject $window as a dependency. Thanks! – Jaeeun Lee Mar 25 '17 at 20:03
-
this looks promising. I am a bit confused. In this example ng-click is not being called. Should it be like this? . or – Starfs Aug 31 '17 at 17:37