In my web page, I validate a form based on Invisible Recaptcha, by calling the calling the function grecaptcha.execute()
. Usually this happens invisible to the user; all they see is the form submit that is triggered after grecaptcha
is done verifying.
Sometimes, the not-so-Invisible Recaptcha behaviour is triggered (e.g. if the user behaves suspiciously) and a regular captcha is shown to the user that they must solve. When this happens, I want to detect it programmatically.
Is it possible to programmatically discover if a captcha was shown to the user after the call to grecaptcha.execute()
?
So far, I've experimented with watching the DOM using MutationEvents
and MutationObservers
. Unfortunately everything interesting is happening inside an iframe
and it seems to be impossible to tell if the full captcha was shown or not.
I don't want to measure how long it takes for grecaptcha
to call the callback I give it, because that would be unreliable (e.g. slow mobile connections would skew the results).
Markup:
<form id="form" method="post" action="/form">
Name: (required) <input id="name" name="name">
<div id="g-recaptcha-div"
class="g-recaptcha"
data-sitekey="keeeey"
data-callback="onRecaptchaDone"
data-size="invisible"></div>
<button id="thebutton">Submit</button>
</form>
Code:
function onSubmit(event) {
event.preventDefault();
grecaptcha.reset();
grecaptcha.execute();
}
function onRecaptchaDone(token) {
form.submit();
}
window.onload = function() {
form.onsubmit = onSubmit;
}