angular - reCAPTCHA v3 无法正常工作 Angular 6 - 执行错误

Question

我正在使用 Angular 6 实现 Google reCAPTCHA v3。

<script src='https://www.google.com/recaptcha/api.js?render=KEY'></script>

在 index.html 中添加了脚本

在我的 AppComponent 中，

constructor(
    @Inject(DOCUMENT) private document: any
) {
    this.grecaptcha = this.document.grecaptcha;
}

当我点击表单提交时，

this.grecaptcha.execute('KEY', { action: 'action_name' })
  .then(function (token) {
      // Verify the token on the server.
      console.log(token);
});

但是，

ERROR TypeError: Cannot read property 'execute' of undefined

Answer 1

该对象应该在窗口中可用，因此您只需在 ts 文件顶部声明它即可:

declare const grecaptcha: any;

然后您可以在类里面使用它，例如:

grecaptcha.execute('KEY', { action: 'action_name' })
  .then(function (token) {
      // Verify the token on the server.
      console.log(token);
})

您还可以尝试安装 typings @types/grecaptcha，以获得一些类型提示，让您的生活更轻松