使用Google reCaptcha引导Ajax模式 - 调用验证码挑战不能工作两次

问题描述 投票:0回答:1

我正在尝试在Bootstrap模式中实现CTA表单,其中内容是异步加载的。因此,无论何时打开模态,其内容都是动态生成并插入模态中。

为了渲染验证码,我使用了Bootstrap模式的open事件。基本上,我只在模态的内容被lodaed和显示时应用验证码:

        self.$modal.on('shown.bs.modal', function () {
            $('.bootstrap.modal-backdrop.fade.in').css("z-index", 1059);
            var form = $("#cta-modal-holder form.callToAction");
            var captchaCheckNeeded = form.attr('data-captcha');


            //Check if we need to apply captcha on the form
            if (captchaCheckNeeded.toLowerCase() == 'true') {
                //This apply the render() method on the form using an invisible <div>
                IMD.Website.Cms.GoogleCaptcha(form[0]);
            }
        });

在此之前,不用担心,验证码图标会显示在页面的右下角,表明验证码已在表单上得到很好的应用。然后,我想仅在表单在客户端有效时才触发验证码挑战。所以基本上,在按钮的click事件上,我首先检查表单是否完全有效,然后调用grecaptcha.execute()方法:

            $.when($form.isFormValidAsync()).then(function (isValid) {
                //First we perform the classic form client validation, only if this IsValid, then we perform the captcha validation
                if (isValid) {
                    //If captchaCheckNeeded == true, then we execute the Captcha
                    //Here, two behaviours possible from client side :
                    // - 1. User is not suspected as a BOT, captcha check is executed and return the token transparently from the user and form is sent automatically
                    // - 2. User is suspected as a BOT, then the captcha modal is showed to the visitor that has to fill the captcha challenge.
                    //      Only when the challenge is validated, then the form is sent because of the Captcha callback function.
                    if (captchaCheckNeeded.toLowerCase() == 'true') {
                        var holder = $form[0].querySelector('.recaptcha-holder');
                        grecaptcha.execute(holder[0]);
                        $submitBtn.prop('disabled', false);
                    }else{
                        $form.trigger('submit', { buttonSubmit: true });
                    }
                } else {

这在第一个模态开口时非常有效。问题是当我关闭模式然后重新打开它时,captcha.render()完成工作,但是当在客户端验证后尝试发送表单时,grecaptcha.execute()不再对用户提出质疑。

我确信验证码方法很好地应用并使用正确的ID,因为它第一次完美地工作。在Google API方面详细了解,当我第二次渲染验证码后尝试使用getResponse()时,我在recaptcha API中发出以下错误:

未捕获的TypeError:无法读取null的属性“value”

确实,在以下代码中:

var Do = function(a) {
    var b = window.___grecaptcha_cfg.clients[a || 0];
    if (!b)
        throw Error("Invalid ReCAPTCHA client id: " + a);
    return vg(qo(b.id)).value
}

//Here, vg(qo(b.id)) represents the field g-recaptcha-response at the first 
call of the getResponse() method.
//At the second call, this value is null, even if I clearly see the field in 
my form after calling the render() method.

然后这阻止了我的表格的发送,从不触发验证码挑战。

让我确切地说,我尝试在模态结束时重置验证码,这很好应用,但这不会改变问题。

我尽量保持清晰,不容易总结这类问题,任何帮助都将不胜感激。

最好的祝福,

javascript jquery twitter-bootstrap api recaptcha
1个回答
1
投票

我有类似的问题,我找到了解决方案。关闭模式后尝试从全局窗口中删除captcha配置,如下所示:

window['___grecaptcha_cfg'] = undefined;

在我们的案例中,解决了问题。

© www.soinside.com 2019 - 2024. All rights reserved.