totally invisible reCaptcha
I'm making a page that will send a form by Javascript (JQuery), not the usual way . The purpose of the feat is not to have to reload the page. I am not being 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 that 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 line data-callback="onSubmit" calls such a function if the user "passes the test". What not it helps a lot in my case, not to mention that although it is inivisible, the reCaptcha symbol still appears.
As I understand it, when loading reCaptcha it already generates the code, but I need to access it in a JavaSCript to send it to the server.
If anyone knows any way to solve please help me. I would even like to not include that DIV in the HTML.
1 answers
I found out. I'll leave the answer in case it's anyone else's question.
To 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 function onloadCallback(); to be called as soon as the code is loaded. Then it makes the token request as soon as the page is loaded with grecaptcha.execute();. Then just get the code in the moment you want with grecaptcha.getResponse();.
PS: if reCaptcha hasn't 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.