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

Angular recaptcha v3, code is showing error, not able to execute the function

我正在使用带有 Angular 的 recaptcha v3 并面临执行错误。

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

请检查我的 stackblitz 控制台 link

我使用了下面的堆栈问题，但它没有帮助我

reCAPTCHA v3 not working angular 6 - error executing.

更新：

我遇到错误，ERROR 错误：无法读取未定义的属性 'execute'。

在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);
        });
     }

}) }

首先请注意，您应该 post 您的代码，因为链接往往会消失。其次，在检查 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。

如果您在本地主机上进行开发，请在注册时添加 http://127.0.0.1/ 作为域以获取您的密钥。由于此限制，我无法 "fix" 您提供的 stackblitz。

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