Невидимая reCAPTCHA - отсутствуют обязательные параметры: sitekey

Я загружаю Invisible reCAPTCHA динамически для каждой формы с кнопкой, которая имеет класс g-recaptcha,

Проблема в том, что капча загружается неправильно, и я не уверен, почему. Я проследил за документацией на сайте капчи, и я не уверен, как и почему я получил эту ошибку:

Uncaught Error: Missing required parameters: sitekey

Кто-то знает, где проблема?

Вот код, который я использую:

<script src='https://www.google.com/recaptcha/api.js?onload=onloadCallback&hl={{  app.request.locale|default(defaultLang) }}' async defer></script>

JS

var onloadCallback = function () {
    $("button.g-recaptcha").each(function () {
        var el = $(this);
        //SITE_KEY is actually hard coded string.
        //It is string that google provided. I just remove it for security reasons...
        grecaptcha.render($(el).attr("id"), {
            "sitekey": SITE_KEY,  
            "size": "invisible",
            "badge": "inline",
            "callback": function (token) {
                $(el).parent().find(".g-recaptcha-response").val(token);
                $(el).closest("form").submit();
            }
        }, true);
    });

    $("button.g-recaptcha").click(function(event) {
        event.preventDefault();
        grecaptcha.execute();
    });
};

ПРИМЕР HTML:

<button 
    type="submit" 
    id="submitReviewButton"
    class="btn btn-lg btn-submit btn--green g-recaptcha"
 >
    {{ "review.submit_your_review"|trans }}
</button>
Источник

2 ответа

Решение

Вы упускаете важную часть здесь. Виджет API должен отображаться явно. Просто добавь render=explicit чтобы повторить api скрипт.

<script src='https://www.google.com/recaptcha/api.js?
onload=onloadCallback
&render=explicit
&hl={{app.request.locale|default(defaultLang) }}' async defer>
</script>

Прочитайте документацию Google ( reCAPTCHA V2 | reCAPTCHA - явно отображать виджет reCAPTCHA).

Источник

Если вы здесь только для работы примера кода Recaptcha Invisible v2:
1. Поместите id="recaptcha" на кнопку формы
2. Добавьте JavaScript

var recaptchaCallback = function() {
        $("button#recaptcha").each(function () {
            var el = $(this);
            grecaptcha.render($(el).attr("id"), {
                "sitekey": 'YOUR_GOOGLE_RECAPTCHA_KEY',
                "size": "invisible",
                "badge": "bottomleft",
                "callback": function (token) {
                    $(el).closest("form").submit();
                }
            });
        });
    };
</script>
<script src="https://www.google.com/recaptcha/api.js?onload=recaptchaCallback&render=explicit" async defer></script>
Источник

Если вы получаете "Отсутствует обязательный параметр: sitekey" при использовании Wordpress с CForm Builder и Google Captcha RECaptcha, вам нужно поместить ключ сайта Recaptcha в "Global Options" в левой навигационной панели для плагина CForm Builder. Вам также нужна та же информация в плагине Google Captcha. Это может показаться очевидным, но я пропустил CForm "Глобальные параметры" в течение длительного времени.

Источник
Другие вопросы по тегам