1

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 screen shot

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

Freddy Sidauruk
  • 300
  • 6
  • 17

1 Answers1

0

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.

Suleman
  • 644
  • 3
  • 12
  • 23
  • ups sorry i just realize that my provider block me to upload screen shoot, my need is show google recaptcha in div not by clicking eventalmost forgot how do i call in my html ? – Freddy Sidauruk Nov 11 '18 at 09:22
  • 1
    @If you are talking about showing a tick box as recaptcha then that is recaptcha v2, the one you have added is v3 – Suleman Nov 11 '18 at 16:49