我使用 nuxtjs 作为前端,将 Google recaptcha versi 3 放在我的网站中,但它总是在右下角给我谷歌验证码,我使用 recaptcha versi 3
我将代码配置为文档,但仍然无法正常工作,这是我调用 recaptcha google 放在头部的脚本
function onloadCallback() {
grecaptcha.ready(function() {
grecaptcha.execute('6Le3oXkUAAAAACZn9Dbhriy9WFQQTEIqzlmm7bqc12', {action: 'action_name'})
.then(function(token) {
// Verify the token on the server.
})
})
}
这是我的html
<div class="g-recaptcha" data-sitekey="6Le3oXkUAAAAACZn9Dbhriy9WFQQTEIqzlmm7bqc12" data-bind="recaptcha-submit" data-badge="inline" :style="{ display: `block` }"></div>
我谷歌并找到this但仍然对我不起作用,我想念哪里
最佳答案
我看到你正在使用 Nuxt,我将在 Vue 中提供一个示例,你需要做的第一件事是在 HTML 代码的头部添加以下行:
<script src='https://www.google.com/recaptcha/api.js?render=My recaptcha v3 site key'></script>
然后为该按钮添加点击功能:
executreRecaptchav3: function () {
grecaptcha.execute('My recaptcha v3 site key', { action: 'action_name' })
.then((token) => {
//Store this token somewhere so you can send it to your server
console.log(token);
});
}
这里有服务器需要的 token 。至于为什么底部有一个recaptcha,是因为recaptcha v3是不可见的,但并不意味着它是recaptcha v2不可见验证码,因为那是不同的。 Recaptcha v3 返回分数,而不仅仅是告诉真/假。
关于css - Google recaptcha 不显示在 div 中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53234886/