Google Recaptcha不显示在div中

时间:2018-11-10 00:16:01

标签: css recaptcha recaptcha-v3

我使用 nuxtjs 作为前端,将Google recaptcha versi 3放到我的网站中,但是它总是让我在右下角使用谷歌验证码,我使用recaptcha versi 3

这是我的屏幕截图  screen shot

我将代码配置为文档,但仍然无法正常工作,这是我的脚本,称为“ recaptcha google”,放在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>

我在Google上找到了this,但仍然对我不起作用,我在哪里想念

1 个答案:

答案 0 :(得分:0)

正如我所看到的,您正在使用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);
            });

}

在这里,您有服务器需要的令牌。至于为什么在底部有一个Recaptcha,是因为recaptcha v3是不可见的,但是这并不意味着它是Recaptcha v2不可见的验证码,因为这是不同的。 Recaptcha v3返回分数,而不仅仅是说出是非。