无法获取 reCAPTCHA 令牌 onSubmit 方法

如何解决无法获取 reCAPTCHA 令牌 onSubmit 方法

我有以下表单并尝试获取令牌以将其传递给后端（用于 reCAPTCHA 验证）。

首先，我将必要的脚本添加到 index.html：

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

然后在我的 login.vue 表单中：

<a-button @click="onSubmit">Login</a-button>

<div class="g-recaptcha"
     data-sitekey="my_site_key"
     data-callback="onSubmit"
     data-size="invisible">
</div>


// ...

onSubmit() {
  var t = null;

  grecaptcha.execute().then(function(token) {
    t = token
  });
}

在 onSubmit 方法中，我无法获取 token 并且其值为 null。我尝试了一些解决方法，但无法正常工作。那么，是否存在与上述实现相关的问题或缺失部分？或者我如何传递必要的参数（我想我只需要将令牌作为 g-recaptcha-response 传递）？

更新：

这是我的 onSubmit 方法。在 this.login() 行，它抛出“Uncaught (in promise) TypeError: Cannot read property 'login' of undefined at...”错误:(

onSubmit() {
  var t = null;
  grecaptcha.execute('my_site_key',{action: 'submit'}).then(function(token) {

    const payload = { email: 'admin@admin.com',password: '********' };
    this.login(payload).then((response) => {
      // ...
    });

  });
}

解决方法

您还必须将密钥和操作传递给 execute 方法。

grecaptcha.execute('reCAPTCHA_site_key',{action: 'submit'}).then(function(token) {}

然后在后端验证令牌。

文档：https://developers.google.com/recaptcha/docs/v3