Question

我正在将Recaptcha v3与Angular一起使用，并遇到执行错误。

click(){
  this.grecaptcha.execute();
  this.grecaptcha.ready('6LfwjpEUAAAAAHTtLNdC42zZZ64LM8nPqXf47vuZ', { action: 'stackblitz' })
  .then(function (token) {
      // Verify the token on the server.
      console.log(token);
  });
}

请检查我的stackblitz链接的控制台

stackblitz

我在堆栈下面使用了问题，但这并没有帮助我

reCAPTCHA v3 not working angular 6 - error executing。

更新：

我收到错误，ERROR 错误：无法读取未定义的属性“执行”。

在我尝试过的HTML中

<script src="https://www.google.com/recaptcha/api.js?render=6LfwjpEUAAAAAHTtLNdC42zZZ64LM8nPqXf47vuZ"></script>

在ts中，提交后我正在打电话

declare const grecaptcha: any;
onsubmit(){
    this.grecaptcha.ready(() => {
     {
        this.grecaptcha.execute('6LfwjpEUAAAAAHTtLNdC42zZZ64LM8nPqXf47vuZ', {action: 'information'}).then(function(token) {
           console.log(token);
        });
     }

}） }

Answer 1

首先请注意，由于链接容易消失，因此您应该发布代码。其次，在检查documentation时，它说明了它的调用方式：

<script>
  grecaptcha.ready(function() {
    grecaptcha.execute('site_key', {action: 'homepage'}).then(function(token) {
       // ...
    });
  });
</script>

因此，您应该首先在grecaptcha.ready之前调用execute，因此，就像在链接的问题中一样，在组件外部声明grecaptcha并在组件中调用函数：

declare const grecaptcha: any;

// ...

grecaptcha.ready(() => {
  grecaptcha.execute('sitekey', { action: 'test' }).then((token) => {
    console.log(token);
  });
});

另外，在查看grecaptcha时，似乎您正在使用某种测试密钥，在v 3中，您需要创建自己的密钥并添加与v 2相反的域，在该域中，您可以尝试google提供的测试密钥。

如果您正在localhost上进行开发，请在注册时将http://127.0.0.1/添加为域以获取密钥。由于这一限制，我无法“修复”您提供的堆栈闪电。

我在一个测试项目中尝试了上面的代码，它对我来说非常有用：）

Angular Recaptcha v3，代码显示错误，无法执行功能

1 个答案: