0

我在一页的两个表单中有两个 reCaptcha V2 控件，一个是可见的，另一个是不可见的。一切都很好，除了不可见的数据回调回调 - submitSendForm() 没有被调用。一旦我删除了可见的，不可见的就开始工作了。

所以这个过程就像一旦用户完成了第一个可见的挑战，那么第二个表单（在同一页面内）将与不可见的表单一起显示，这就是回调失败的时候。

它不必是一个可见的，另一个是不可见的。但是我发现当您想要拥有多个控件时这很容易。

这是代码：

using (Html.BeginForm("Verify", "CertificateValidation", FormMethod.Post, new { id = "verifyForm" }))
{
        <div class="form-group">
                <div class="g-recaptcha" data-sitekey='site-key' data-callback="enableBtn"
                         style="transform: scale(0.66); transform-origin: 0 0;">
                    </div>
            <div class="col-sm-3">
                <button type="submit" id="verify" disabled>Verify</button>
            </div>
        </div>
}

using (Html.BeginForm("Send", "CertificateValidation", FormMethod.Post, new { id = "sendForm" }))
{
        <div id='recaptcha1' class="g-recaptcha"
         data-sitekey='site-key'
         data-callback="submitSendForm"
         data-size="invisible"></div>
        <button type="submit">Send</button>

}   


<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<script type="text/javascript">


    function submitSendForm() {
        console.log('captcha completed.');
        $('#sendForm').submit();
    }

    $('#sendForm').submit(function (event) {
        console.log('form submitted.');

        if (!grecaptcha.getResponse()) {
            console.log('captcha not yet completed.');

            event.preventDefault(); //prevent form submit
            grecaptcha.execute();
        } else {
            console.log('form really submitted.');
        }
    });


    var enableBtn = function (g_recaptcha_response) {
        $('#verify').prop('disabled', false);
    };

    $(document).ready(function () {
        $('#verify').click(function () {
            $captcha = $('#recaptcha');
            response = grecaptcha.getResponse();

            if (response.length === 0) {
                return false;
            } else {
                return true;
            }
        });
    });
</script>

4

2 回答 2

0

这个对我有用，干净又简单。

Javascript

var reCaptcha1;
var reCaptcha2;


function LoadCaptcha() {
    reCaptcha1 = grecaptcha.render('Element_ID1', {
        'sitekey': 'your_site_key'
    });

    reCaptcha2 = grecaptcha.render('Element_ID2', {
        'sitekey': 'your_site_key'
    });
};

function CheckCaptcha1() {
    var response = grecaptcha.getResponse(reCaptcha1);
    if (response.length == 0) {
        return false; //visitor didn't do the check
    };
};

function CheckCaptcha2() {
    var response = grecaptcha.getResponse(reCaptcha2);
    if (response.length == 0) {
        return false; //visitor didn't do the check
    };
};

HTML

<head>
    <script src="https://www.google.com/recaptcha/api.js?onload=LoadCaptcha&render=explicit" async defer></script>
</head>

<body>
    <div id="Element_ID1"></div>
    <div id="Element_ID1"></div>
</body>
于 2018-07-18T13:00:57.087 回答
0

我以某种方式想通了：

var CaptchaCallback = function () {
        grecaptcha.render('RecaptchaField1', { 'sitekey': 'site-key', 'callback': 'enableBtn' });
        window.recaptchaField2Id = grecaptcha.render('RecaptchaField2', { 'sitekey': 'site-key', 'callback': 'submitSendForm', 'size': 'invisible' });
    };

    function submitSendForm() {
        $('#sendForm').submit();
    }

    $('#sendForm').submit(function (event) {
        if (!grecaptcha.getResponse(window.recaptchaField2Id)) {

            event.preventDefault(); 
            grecaptcha.execute(window.recaptchaField2Id);
        } 
    });
using (Html.BeginForm("Verify", "CertificateValidation", FormMethod.Post, new { id = "verifyForm" }))
{
        <div class="form-group">
<div style="transform: scale(0.66); transform-origin: 0 0;" id="RecaptchaField1"></div>
            <div class="col-sm-3">
                <button type="submit" id="verify" disabled>Verify</button>
            </div>
        </div>
}

using (Html.BeginForm("Send", "CertificateValidation", FormMethod.Post, new { id = "sendForm" }))
{
        <div id="RecaptchaField2"></div>
        <button type="submit">Send</button>

}

于 2018-07-11T06:56:38.107 回答