Jaeeun Lee Jaeeun Lee - 1 year ago 180
Javascript Question

Invisible Google reCaptcha with AngularJS

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 Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download