带有 AngularJS 的隐形 Google reCaptcha

问题描述

我正在尝试在我的 AngularJS 网络应用中实现 invisible reCAPTCHA.根据他们的文档，我应该向登录表单的提交按钮添加一个名为数据回调"的属性.但是，我使用 ng-click 将 http 请求的功能附加到按钮.那么我应该在data-callback"属性的值中输入什么?另外，我如何知道 recaptcha 结果是否成功，并通过我的 http 请求将 g-recaptcha-response 发送到服务器?

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

推荐答案

这里有一个 angular 包装器，但如果像我一样，你想使用原始的 JavaScript 库，这是如何做到的:

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 :

数据回调需要一个 java-script 全局函数，因此在 $scope 中使用函数是行不通的.我想出的解决方案是创建一个继承角度函数的全局函数.

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.

所以你应该这样做:

$scope.login = function (token) {
  // your login logic
}
$window.login = $scope.login;

并且不要忘记在您的作用域中注入 $window 作为依赖项.

and dont forget to inject $window as a dependency in your scope.

google invisible reCaptcha 会向您发送一个令牌，以便您可以验证用户服务器端.

The google invisible reCaptcha will send you a token so you can verify the user serverside.

并在您的 html 中:

and in your html :

<button class="g-recaptcha"
  data-sitekey="your_google_key_here"
  data-callback="login"
  data-size>
Login
</button>

希望这会有所帮助.

这篇关于带有 AngularJS 的隐形 Google reCaptcha的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！