javascript - reCAPTCHA v3 - Error: No reCAPTCHA clients exist - Stack Overflow

First of all, I am aware that the same problem was already discovered here: Error: No reCAPTCHA clients exist (reCAPTCHA v3) But since the answers there, didn't lead me to a solution, I try my luck here.

---

So I tried using reCAPTCHA, since I get alot of spam mails from the form on my webpage. In my HTML head I have that code:

<script src=".js?render=MY_SITE_KEY"></script>
<script>
grecaptcha.ready(function() {
  grecaptcha.execute("MY_SITE_KEY").then(function(token) {
    console.log(token);
  });
});
</script>

to load the Captcha and which generates a token. When I submit my form, I call the following ajax code:

$.ajax({
  type: 'POST',
  url: $(form).attr('action'),
  data: {
    name: name,
    email: email,
    message: message,
    captcha: grecaptcha.getResponse()
}).done(function(response){ ... })

and finally in PHP I do the following:

<?php

  $secret = "MY_SECRET_KEY";
  $response = $_POST["captcha"];
  $verify=file_get_contents("={$secret}&response={$response}");
  $captcha_success=json_decode($verify);

    if ($captcha_success->success==false) {
      echo "reCaptcha indentified you as a bot. We don't like bots here.";
    }
    else if ($captcha_success->success==true) {

      // MY WHOLE mail() function here

    }

?>

When I submit the form then, I get the error:

Uncaught Error: No reCAPTCHA clients exist.
    at Gw (recaptcha__de.js:511)
    at Object.Q5 [as getResponse] (recaptcha__de.js:519)
    at HTMLFormElement.<anonymous> (main.js:265)
    at HTMLFormElement.dispatch (jquery.min.js:3)
    at HTMLFormElement.q.handle (jquery.min.js:3)

What have I done wrong? I followed Googles instructions, but maybe I missed something.

First of all, I am aware that the same problem was already discovered here: Error: No reCAPTCHA clients exist (reCAPTCHA v3) But since the answers there, didn't lead me to a solution, I try my luck here.

---

So I tried using reCAPTCHA, since I get alot of spam mails from the form on my webpage. In my HTML head I have that code:

<script src="https://www.google./recaptcha/api.js?render=MY_SITE_KEY"></script>
<script>
grecaptcha.ready(function() {
  grecaptcha.execute("MY_SITE_KEY").then(function(token) {
    console.log(token);
  });
});
</script>

to load the Captcha and which generates a token. When I submit my form, I call the following ajax code:

$.ajax({
  type: 'POST',
  url: $(form).attr('action'),
  data: {
    name: name,
    email: email,
    message: message,
    captcha: grecaptcha.getResponse()
}).done(function(response){ ... })

and finally in PHP I do the following:

<?php

  $secret = "MY_SECRET_KEY";
  $response = $_POST["captcha"];
  $verify=file_get_contents("https://www.google./recaptcha/api/siteverify?secret={$secret}&response={$response}");
  $captcha_success=json_decode($verify);

    if ($captcha_success->success==false) {
      echo "reCaptcha indentified you as a bot. We don't like bots here.";
    }
    else if ($captcha_success->success==true) {

      // MY WHOLE mail() function here

    }

?>

When I submit the form then, I get the error:

Uncaught Error: No reCAPTCHA clients exist.
    at Gw (recaptcha__de.js:511)
    at Object.Q5 [as getResponse] (recaptcha__de.js:519)
    at HTMLFormElement.<anonymous> (main.js:265)
    at HTMLFormElement.dispatch (jquery.min.js:3)
    at HTMLFormElement.q.handle (jquery.min.js:3)

What have I done wrong? I followed Googles instructions, but maybe I missed something.

• javascript
• php
• ajax
• recaptcha
• captcha

Share Follow asked Mar 14, 2019 at 12:47 Tobias GlausTobias Glaus 3,65833 gold badges2222 silver badges4141 bronze badges 4

• is your grecaptcha.ready(function() { ...} logging a token to the console? What's grecaptcha.getResponse() returning in your browsers dev console? – r3dst0rm Commented Mar 14, 2019 at 12:59
• @r3dst0rm Yes, a token is logged. The grecaptcha.getResponse() is not returning anything tho :/ – Tobias Glaus Commented Mar 14, 2019 at 13:03
• Can you replace the console.log(token) with: var recaptchaResponse = document.getElementById('recaptchaResponse'); recaptchaResponse.value = token; and add following input tag to your form: <input type="hidden" name="recaptcha_response" id="recaptchaResponse">? In your ajax, you would then just replace the grecaptcha.getResponse() with document.getElementById('recaptchaResponse').value -- And see if it works? – r3dst0rm Commented Mar 14, 2019 at 13:13
• If the mail gets sent, I guess it's safe to assume, the captcha check works now. It's time to check for possible PHP errors inside your mail function – r3dst0rm Commented Mar 14, 2019 at 14:03

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 2

You can re-implement in the following method:

<script src="https://www.google./recaptcha/api.js?render=MY_SITE_KEY"></script>
<script>
var grecaptchaSiteKey = 'MY_SITE_KEY';

var _RECAPTCHA = _RECAPTCHA || {};

_RECAPTCHA.init = function() {
    grecaptcha.ready(function() {
        grecaptcha.execute(grecaptchaSiteKey, {action: 'homepage'}).then(function(token) {
            if (jQuery(form)[0]) {
                if (jQuery('.grecaptchaToken')[0]) {
                    jQuery(form).find('.grecaptchaToken').remove();
                }

                jQuery(form).append('<input type="hidden" class="grecaptchaToken" name="grecaptchaToken" value="' + token + '" />');
            }
        });
    });
}

_RECAPTCHA.init();

</script>

After that you can get the value of the hidden input and put that in the Ajax Payload.

Now, to avoid errors during a second form submission, you can call the _RECAPTCHA.init() method; within the successful callback of the Ajax call.