Error: No reCAPTCHA clients exist (reCAPTCHA v3)

问题

I've integrated reCAPTCHA v3 in one of my forms. In onload, there's a token produced and google captcha logo in the bottom right corner. But when I submit the form, in console there is an error shown, "Error: No reCAPTCHA clients exist". Also, it seems, no data is fetched by "g-recaptcha-response" and $_POST["g-recaptcha-response"] remains empty.

Here is the sample code:

<script type="text/javascript">
    var ReCaptchaCallbackV3 = function() {
        grecaptcha.ready(function() {
            grecaptcha.execute("site_key").then(function(token) {
                console.log("v3 Token: " + token);
            });
        });
    };
</script>

<script src="https://www.google.com/recaptcha/api.js?onload=ReCaptchaCallbackV3&render=site_key"></script>

It doesn't produce any "g-recaptcha-response" when the form is submitted.

I don't know much about google reCaptcha. I've followed the documentation provided by them and used a site and a secret key in the proper way.

Can anybody please tell me where might be the problem and what is the possible solution?

回答1:

Have you tried loading the script before trying to send the request?

<script src="https://www.google.com/recaptcha/api.js?onload=ReCaptchaCallbackV3&render=site_key"></script>
<script type="text/javascript">
    var ReCaptchaCallbackV3 = function() {
        grecaptcha.ready(function() {
            grecaptcha.execute("site_key").then(function(token) {
                console.log("v3 Token: " + token);
            });
        });
    };
</script>

回答2:

I believe this error occurs when the reCaptcha api.js loads, but your container is not present on the page yet (at least for v2). I had this error occur in a React app when I navigated to the page rather than loading it as the first on. Instead of using render=explicit and using a global namespace onLoadCallback, I was able to resolve it by rendering the captcha element manually.

Instead of creating a <div class="g-recaptcha"></div>, give the container div an id only (<div id="recaptcha-container"></div>) and render it in your JS code (e.g. in componentDidMount for a React app):

grecaptcha.ready(function() {
  grecaptcha.render("recaptcha-container", {
    "sitekey": "your-site-key"
  });
});

回答3:

This also happens in Recaptcha 2 before user interacts with it. So, I have a submit button that triggers a JS function that checks the value of recaptcha. To solve the no client exists problem, I did:

try {
   data["reCaptcha"] = grecaptcha.getResponse();
} catch (err) {
   data["reCaptcha"] = "";
}

The data object then gets sent to a back-end script that validates the recaptcha. The back-end also checks for the field being empty.

回答4:

When I came across this problem with reCAPTCHA v3, it was because I didn't pass it the correct site key.

来源：https://stackoverflow.com/questions/53875281/error-no-recaptcha-clients-exist-recaptcha-v3

标签

recaptcha

recaptcha-v3