首页 文章

隐形reCAPTCHA以多种形式发送空的g-recaptcha-response

提问于
浏览 次
2

我正在尝试使用Google Invisible reCAPTCHA，但是当我在同一页面中有多个表单时，它会发送 g-recaptcha-response POST参数 . 这是我的代码：

Google JS

<script src="//google.com/recaptcha/api.js?hl=pt-BR&onload=captchaCallback&render=explicit" async defer></script>

Form 1

<form action="/site/Contact/send" id="form1">
    <input type="text" name="nome" required>

    <div class="g-recaptcha"
        data-sitekey="xxxxxxxxxxxxxxxxxxxxxxxx"
        data-callback="form1Callback"
        data-size="invisible">
    </div>

    <button type="submit">Send</button>

</form>

Form 2

<form action="/site/Contact/send" id="form2">
    <input type="text" name="nome" required>

    <div class="g-recaptcha"
        data-sitekey="xxxxxxxxxxxxxxxxxxxxxxxx"
        data-callback="form2Callback"
        data-size="invisible">
    </div>

    <button type="submit">Send</button>
</form>

My JS （基于this answer]

$(document).ready(function() {

    window.captchaCallback = function(){
        $('.g-recaptcha').each(function(index, el) {
            var attributes = {
                'sitekey'  : $(el).data('sitekey'),
                'size'     : $(el).data('size'),
                'callback' : $(el).data('callback')
            };

            grecaptcha.render(el, attributes);
        });
    };

    window.form1Callback = function(){
         $('#form1').submit();
    };

    window.form2Callback = function(){
         $('#form2').submit();
    };
});

当我提交其中一个表格时， g-recaptcha-response 参数将被发送为空，如下所示 .

enter image description here

有人可以帮我把它投入使用吗？

javascript jquery forms recaptcha invisible-recaptcha

2 回答

  • 0

    如果要在div元素中呈现不可见的重新接收，则需要手动调用grecaptcha.execute（）来运行recaptcha . 此外，如果有多个带recaptcha的表单，则需要调用grecaptcha.execute（）方法，并在调用grecaptcha.render（）方法时为每个recaptcha生成一个小部件ID .

    $(document).ready(function() {
    window.captchaCallback = function(){
        $('.g-recaptcha').each(function(index, el) {
            var attributes = {
                'sitekey'  : $(el).data('sitekey'),
                'size'     : $(el).data('size'),
                'callback' : $(el).data('callback')
            };

            $(el).data('recaptcha-widget-id', grecaptcha.render(el, attributes));
        });
    };

    window.form1Callback = function(){
        $('#form1').data("recaptcha-verified", true).submit();
    };

    window.form2Callback = function(){
        $('#form2').data("recaptcha-verified", true).submit();
    };

    $('#form1,#form2').on("submit", function(e){
        var $form = $(this);
        if ($form.data("recaptcha-verified")) return;

        e.preventDefault();
        grecaptcha.execute($form.find(".g-recaptcha").data("recaptcha-widget-id"));
    });
});
    回复于
  • 1

    根据文档和你的代码，我猜你正试图从Google reCaptcha使用 Programmatically invoke the challenge. . 所以在你的JS代码中你错过了一个语句：

    grecaptcha.execute();

    UPDATE 也许我误解了你的问题，所以检查一下：

    render explicit onload可选 . 是否显式呈现窗口小部件 . 默认为onload，这将在它找到的第一个g-recaptcha标记中呈现小部件 .

    据我所知，它刚刚发现第一个标记的标签，这会导致你的问题？

    回复于

相关问题