Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.2k views
in Technique[技术] by (71.8m points)

javascript - 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

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

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.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...