Ошибка: клиенты reCAPTCHA не существуют (reCAPTCHA v3)

Question

Я интегрировал reCAPTCHA v3 в одну из моих форм.В onload, в правом нижнем углу есть токен и логотип Google CAPTCHAНо когда я отправляю форму, в консоли появляется сообщение об ошибке «Ошибка: клиенты reCAPTCHA не существуют».Также, похоже, данные не извлекаются с помощью "g-recaptcha-response" и $ _POST ["g-recaptcha-response"] остается пустым.

Вот пример кода:

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

Он не выдает "g-recaptcha-response" при отправке формы.

Я мало что знаю о google reCaptcha.Я следовал предоставленной ими документации и надлежащим образом использовал сайт и секретный ключ.

Может кто-нибудь сказать мне, где может быть проблема и каково ее решение?

Answer 1

Когда я столкнулся с этой проблемой с reCAPTCHA v3, это произошло потому, что я не передал ему правильный ключ сайта.

Answer 2

Это также происходит в Recaptcha 2, прежде чем пользователь взаимодействует с ним.Итак, у меня есть кнопка отправки, которая запускает функцию JS, которая проверяет значение recaptcha.Чтобы решить проблему отсутствия клиента, я сделал:

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

Затем объект данных отправляется внутреннему сценарию, который проверяет recaptcha.Серверная часть также проверяет, является ли поле пустым.

Answer 3

Я полагаю, что эта ошибка возникает, когда reCaptcha api.js загружается, но ваш контейнер еще не представлен на странице (по крайней мере, для v2).Эта ошибка возникала в приложении React при переходе на страницу, а не при ее загрузке в качестве первого.Вместо использования render=explicit и использования глобального пространства имен onLoadCallback я смог разрешить его, вручную отобразив элемент капчи.

Вместо создания <div class="g-recaptcha"></div> присвойте контейнеру div только идентификатор (<div id="recaptcha-container"></div>) и отобразите его в своем коде JS (например, в componentDidMount для приложения React):

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

Answer 4

Вы пытались загрузить скрипт перед отправкой запроса?

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