CODEWITHSUNDEEP
javascriptrecaptcha
Askar
Askar

Reputation: 574

grecaptcha.execute() calls data-callback before user challenge

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.com/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.

Upvotes: 3

Views: 35027

Answers (2)

kot9rko
kot9rko

Reputation: 71

You 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.

Upvotes: 3

blaz
blaz

Reputation: 4068

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();
}

Upvotes: 2

Related Questions