Invisible Google reCaptcha with AngularJS

Question

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?

https://developers.google.com/recaptcha/docs/invisible

Answer 1

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.