-
Notifications
You must be signed in to change notification settings - Fork 772
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Using reCAPTCHA v3 in the frontend #281
Comments
I haven't used the V3 API yet, but this flow works on the V2 invisible version. <div class="g-recaptcha" data-sitekey="XXXXXX" data-size="invisible" data-callback="formSubmit"></div> var frm = document.forms.item(0);
frm.addEventListener('submit', function (e) {
e.preventDefault();
grecaptcha.execute();
});
function formSubmit(response) {
frm.submit();
} So your code should probably be something like this $('.contact-form-box').on('submit', function (e) {
var frm = this;
e.preventDefault();
// Check if email is empty
if ($('#email').val() === '') {
window.alert(contact_emptyEmail);
return;
}
// Check if email is not valid
if (!validate_isEmail($('#email').val())) {
window.alert(contact_invalidEmail);
return;
}
// etc…
grecaptcha.execute(reCAPTCHA_site_key, { action: 'contactForm' }).then(function (token) {
$('[name="g-recaptcha-response"]').val(token);
frm.submit();
}, function (reason) {
console.log(reason);
});
}); |
Hmm, when you do Does the library remove any event listeners on the form? If that was the case, does it do it when the |
https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit
|
Wow, thanks! You never stop learning! |
I've been trying to figure this out, and while this looks promising, doesn't the (token) always get returned no matter what? I think you have to take that token and submit it to the google verify API server side in order to get the actual valid or unvalid response. Otherwise this method would submit the form no matter what. Can anyone confirm this? |
That’s correct, in my case the PHP server verifies the token with Google to
get the score etc…
--
David Gasperoni
|
Sorry to hijack, but we've implemented the recaptchaV3 action on form submit and are noticing a lengthy delay (> 1000 milliseconds) after users click the submit button.
Is this expected? Otherwise, the only other thing I can see is refreshing the token every 120 seconds on the client system to work around the "lag on submit" we're seeing. Would these sorts of token refreshes have negative impacts? Thanks for your consideration. |
Hello, while this is not specific to the PHP client library, but I hope to get some answers about the use of the new reCAPTCHA v3.
Basically I have a contact form in PrestaShop, and I want to be able to add reCAPTCHA v3 so that there is no extra interaction for users while making sure I don't get spammed from bots. From the docs page, the idea being brought forward is to add the script tag with the link to
api.js
with the render GET parameter?render=reCAPTCHA_site_key
. Doing so you will not need to rungrecaptcha.render()
manually, which is an important point (more on this later).Now, I have to add
grecaptcha.execute()
in the callback ofgrecaptcha.ready()
. Here I can define an action, and finally in thethen()
promise fulfillment I get atoken
. I take this token and update thevalue
attribute of a hidden input tag in the form, namedg-recaptcha-response
. This way it gets sent to the server alongside with the regular form fields and I can make the server verification inContactController::postProcess()
method.Since I want users to fill the form with several fields and a message, they might take even minutes to submit the form. I'm also using jQuery to run on the form submission, doing some validation checks and in case calling
event.preventDefault()
and showing an alert if some required fields are empty or invalid.In my tests I found out that tokens expire rather quickly. Since we don't manually run
grecaptcha.render()
as mentioned above, we cannot specify anexpired-callback
to run when the token expires. At this point I resorted to add asetInterval
with a 60000 delay (1 minute) to run againgrecaptcha.execute()
.Is this the right way to use the frontend library? Is it correct to run multiple checks once per minute? Will this affect users' score?
Initially I thought of running
grecaptcha.execute()
on form submission, in the same callback function that does data validation, but sincegrecaptcha.execute()
is asynchronous, I cannot stop the form submission (event.preventDefault()
) and the resume in the promise fulfillment.The text was updated successfully, but these errors were encountered: