使用 AngularJS 隐藏 Google reCaptcha

Question

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

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

Answer 1

有一个角度包装器，但如果像我一样，你想使用原始的 JavaScript 库，这是怎么做的：

data-callback 需要一个 java-script 全局函数，因此在 $scope 内使用函数将不起作用.. 我想出的解决方案是创建一个继承 angular 函数的全局函数。

所以你应该这样做：

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

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

google 不可见的 reCaptcha 会向您发送一个令牌，以便您可以验证用户服务器端。

在你的 html 中：

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

希望这会有所帮助。