Angular recaptcha v3，代碼顯示錯誤，無法執行該功能

Question

我正在使用帶有 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 鏈接的控制台

閃電戰

我使用了下面的堆棧問題，但它沒有幫助我

reCAPTCHA v3 不工作 angular 6 - 執行錯誤。

---

更新：

我收到錯誤，錯誤錯誤：無法讀取未定義的屬性“執行”。

在 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

首先請注意，您應該發布您的代碼，因為鏈接往往會失效。 其次，在檢查文檔時，它指出這是如何調用的：

<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 相反的域，您可以在其中嘗試使用谷歌提供的測試密鑰。

如果您在 localhost 上開發，請在注冊以獲取密鑰時添加http://127.0.0.1/作為域。 由於此限制，我無法“修復”您提供的 stackblitz。

我在一個測試項目中嘗試了上面的代碼，它對我來說效果很好:)