问题描述
我有以下表单并尝试获取令牌以将其传递给后端（用于 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) {}
然后在后端验证令牌。