I want to invoke programmatically the invisible reCaptcha challenge. According to reCaptcha document, I have written the following code:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>reCaptcha test</title>
<script>
function onReCaptchaSubmit(token) {
alert("reCaptcha challenge response:\n" + token);
}
</script>
<script src=".js" async defer></script>
<style>
.grecaptcha-badge {
display: none;
}
</style>
</head>
<body>
<a href="javascript:void(0);" onclick="grecaptcha.execute();">Challenge</a>
<div class="g-recaptcha"
data-sitekey="*******"
data-callback="onReCaptchaSubmit"
data-size="invisible">
</div>
</body>
</html>
and grecaptcha.execute(); is called from an HTML link to display reCaptcha challenge popup. In most cases, It works well. but sometimes, after calling grecaptcha.execute(); , It calls back onReCaptchaSubmit(), without displaying reCapcha popup and user challenge.
How can I fix it?
Thanks in advance.
I want to invoke programmatically the invisible reCaptcha challenge. According to reCaptcha document, I have written the following code:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>reCaptcha test</title>
<script>
function onReCaptchaSubmit(token) {
alert("reCaptcha challenge response:\n" + token);
}
</script>
<script src="https://www.google./recaptcha/api.js" async defer></script>
<style>
.grecaptcha-badge {
display: none;
}
</style>
</head>
<body>
<a href="javascript:void(0);" onclick="grecaptcha.execute();">Challenge</a>
<div class="g-recaptcha"
data-sitekey="*******"
data-callback="onReCaptchaSubmit"
data-size="invisible">
</div>
</body>
</html>
and grecaptcha.execute(); is called from an HTML link to display reCaptcha challenge popup. In most cases, It works well. but sometimes, after calling grecaptcha.execute(); , It calls back onReCaptchaSubmit(), without displaying reCapcha popup and user challenge.
How can I fix it?
Thanks in advance.
- 1 You may not want to use your real sitekey. – colecmc Commented Aug 7, 2017 at 15:32
- @colecmc, Thanks, I removed it. – Askar Commented Aug 7, 2017 at 15:44
2 Answers
Reset to default 3You expect invisible reCaptcha to show user challenge every time you call grecaptcha.execute(), but it does not work that way. In my experience, it shows challenge only when it has doubts about you. If Google is sure that you are human, it skips displaying of user challenge and proceeds to callback.
Since recaptcha has an expiration time, you have to wait until your recaptcha session expires or call grecaptcha.reset() inside onRecaptchaSubmit to ensure user challenge appear everytime user clicks the link:
function onRecaptchaSubmit(token) {
/* any behavior you want */
//...
window.grecaptcha.reset();
}