Google recaptcha doesn't show in div

问题:

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

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.
    })
  })    
}

this is my html

<div class="g-recaptcha" data-sitekey="6Le3oXkUAAAAACZn9Dbhriy9WFQQTEIqzlmm7bqc12" data-bind="recaptcha-submit" data-badge="inline"  :style="{ display: `block` }"></div>

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

回答1:

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);
            });

}

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.