9

我正在为每个带有 class 按钮的表单动态加载 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>
4

3 回答 3

13

你在这里错过了一个重要的部分。api 小部件必须显式呈现。只需添加render=explicit到 recaptcha 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 小部件）。

于 2018-03-08T19:24:46.810 回答
0

如果在将 Wordpress 与 CForm Builder 和 Google Captcha RECaptcha 一起使用时出现“缺少所需参数：sitekey”，则必须将 Recaptcha Site Key 放在 CForm Builder 插件左侧导航中的“全局选项”下。您还需要 Google Captcha 插件中的相同信息。这可能看起来很明显，但我很长一段时间都错过了CForm“全局选项”。

于 2018-10-19T15:46:12.750 回答
0

如果您在这里只是为了工作 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>
于 2019-05-06T08:10:31.283 回答