javascript - Bootstrap Ajax Modal 与 Google reCaptcha - 调用验证码挑战无法两次工作

Question

我正在尝试在内容异步加载的 Bootstrap 模式中实现 CTA 表单。 因此，每当我打开模态时，其内容都会动态生成并插入到模态中。

为了渲染验证码，我使用 Bootstrap 模式的 open 事件。基本上，我仅在加载并显示模式内容时应用验证码:

        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]);
            }
        });

到目前为止，不用担心，验证码图标会呈现在页面的底 Angular ，表明验证码已很好地应用在表单上。然后，我想仅当表单在客户端有效时才触发验证码挑战。所以基本上，在按钮的单击事件上，我首先检查表单是否完全有效，然后再调用 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 中发现了以下错误:

未捕获类型错误:无法读取 null 的属性“值”

确实，在下面的代码中:

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.

然后这会阻止发送我的表单，而不会触发验证码挑战。

让我准确地说，我尝试在模式结束时重置验证码，这很好应用，但这并不能改变问题。

我已尽力尽可能清晰，总结此类问题并不容易，任何帮助将不胜感激。

最诚挚的问候，

Answer 1

我遇到了和你类似的问题，我已经找到解决方案了。关闭模式后尝试从全局窗口中删除验证码配置，如下所示:

window['___grecaptcha_cfg'] = undefined;

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