Google Recaptcha不显示在div中 [英] Google recaptcha doesn't show in div

问题描述

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

I use nuxtjs as front end going to put Google recaptcha versi 3 in my site but it always give me google captcha in right bottom, i use recaptcha versi 3

这是我的屏幕截图

this is my screen shoot

我将代码配置为文档，但仍然无法正常工作，这是我的脚本，称为"recaptcha google"(放在Google头部分)

i configure code as documention but still doesn't work, this is my script calling recaptcha google put in head section

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上发现了这，但仍然对我不起作用，我想念

i google and found this but still doesn't work for me, where do i miss

推荐答案

我看到您正在使用Nuxt，我将在Vue中提供一个示例，您需要做的第一件事是在HTML代码的开头添加以下行:

As I see you are using Nuxt, I will provide an example in Vue, the first thing you need to do is add following line in head of HTML code:

    <script src='https://www.google.com/recaptcha/api.js?render=My recaptcha v3 site key'></script>

然后为该按钮添加一个单击功能:

Then add an on click function for that button:

  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返回分数，而不仅仅是说出是非.

And here you have your token which will be need in server. As for why there is a recaptcha at the bottom it is there because recaptcha v3 is invisible, however it does not mean it is recaptcha v2 invisible captcha, as that is a different one. Recaptcha v3 returns score rather than just telling true/false.

这篇关于Google Recaptcha不显示在div中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！