I have trouble integrating reCaptcha in my ajax contact form. It works, only for the first 2 minutes after user completed the challenge. ReCaptcha expires after 2 minutes. The problem is that the widget is intact, nothing like "session expired. complete the challenge again". The user is not able to do anything, but reload the page. Also the expired-callback is not called (obviously since the widget doesn't expire).
I could set a timer for 2 minutes upon completion to reset the widget. That would work, but it is a little hacky and what if Google chooses to change expiration time in the future. Any ideas why it won't expire?
I tried both methods of integrating the widget (automatic and explicit)
Edit: Here is the code, I made a small example html file and proved it doesn't work.
<html>
<head></head>
<body>
<div id="google-recaptcha-widget"></div>
<script>
var expiredCallback = function() {
alert('expired!');
}
var recaptchaLoad = function() {
grecaptcha.render('google-recaptcha-widget', {
'sitekey' : 'mysitekey'
'expired-callback': expiredCallback
});
}
</script>
<script src="https://www.google.com/recaptcha/api.js?onload=recaptchaLoad&render=explicit" async defer></script>
</body></html>
<div id="google-recaptcha-widget" class="g-recaptcha" data-sitekey="mySiteKey" data-callback="myCallbackMethod" data-expired-callback="expiredCallback"></div>
<script>
function myCallbackMethod() {
// save the world
}
function expiredCallback() {
// Uh oh, reCAPTCHA expired, hack the world
}
</script>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With