reCaptcha TOTALLY invisible

0

I'm making a page that will submit a form by Javascript (JQuery), not in the ordinary way. The purpose of the feat is not to reload the page. I'm not able to implement Invisible reCaptcha on this system.

After reading the documentation I found that this code is placed in the form and I believe it includes the code when submitting a form form.

<div class="g-recaptcha"
     data-sitekey="your_site_key"
     data-callback="onSubmit"
     data-size="invisible">
</div>

The data-callback="onSubmit" line calls such a function if the user "passes the test". This does not help much in my case, not to mention that despite being inivisible, the symbol of reCaptcha still appears.

As I understand it, loading reCaptcha already generates the code, but I need to access it in a JavaSCript to send it to the server.

If anyone knows some way to solve please help me. I would like to not even include that div in HTML.

    
asked by anonymous 01.05.2018 / 00:05

1 answer

0

I found out. I'll leave the answer if anyone else is in doubt.

A div

<div class="g-recaptcha"
     data-sitekey="your_site_key"
     data-callback="onSubmit"
     data-size="invisible">
</div>

var have to continue in HTML.

Before calling the reCaptcha API I put a JavaScript with the code:

function onloadCallback() { // Callback
    $(function () { // Site carregado
        grecaptcha.execute(); // Executa o recaptcha
    });
}

And next to the API link I passed a GET:

?onload=onloadCallback

The onload=onloadCallback causes the onloadCallback(); function to be called as soon as the code is loaded. Then it requests the token as soon as the page is loaded with grecaptcha.execute(); . Then just get the code at any time with grecaptcha.getResponse(); .

PS: If reCaptcha has not loaded yet, and a grecaptcha.getResponse(); is done, it will return null. For this I recommend putting a if(grecaptcha.getResponse() !== "") to ensure that a null token will not be sent.

    
01.05.2018 / 19:35