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：无法读取未定义的属性“ execute”

Answer 1

该对象应该在window中可用，因此您所需要做的就是在ts文件顶部声明它：

declare const grecaptcha: any;

然后您可以在班级中使用它，例如：

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

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

Answer 2

首先，请确保您在index.html（不是V2）中添加了V3 reCaptcha的正确脚本和siteKey ...正确的脚本和siteKey将帮助您加载外部Google库并它在window.grecaptcha中可用。我建议您在component.ts中按打字稿代码添加脚本的另一种方法。只需在onInit()或AfterViewInit()中调用此函数即可。

addScriptSrc() { let script: any = document.getElementById('script'); if (!script) { script = document.createElement('script'); } const body = document.body; script.innerHTML = ''; script.src = 'https://www.google.com/recaptcha/api.js?render=<your_sitekey>'; script.async = false; script.defer = true; body.appendChild(script); }
第二，在您的component.ts中添加脚本和站点密钥之后，只需通过以下方式声明window对象： declare const window: any;
最后，当您提交表单时：

window.grecaptcha.ready(function() { window.grecaptcha.execute(<sitekey>, {action: 'signup'}).then((token) => { //Do anything with captcha token }); });

ready()函数确保在execute获取令牌之前，已成功从google api加载了外部库。

reCAPTCHA v3无法正常工作的角度6-执行错误

2 个答案: