javascript - 检测何时关闭 Google recaptcha 的挑战窗口

Question

我正在使用谷歌隐形验证码。有没有办法检测挑战窗口何时关闭？我所说的挑战窗口是指您必须选择一些图像进行验证的窗口。

我目前在按钮上放置了一个微调器，一旦按钮被点击，就会呈现 recaptcha 挑战。无法提示用户使用另一个挑战窗口。

我以编程方式调用渲染函数:

grecaptcha.render(htmlElement, { callback: this.verified, expiredCallback: this.resetRecaptcha, sitekey: this.siteKey, theme: "light", size: "invisible" });

我有 2 个回调函数连接了已验证和 resetRecaptcha 函数，如下所示:

function resetRecaptcha() {
        grecaptcha.reset();
    }

function verified(recaptchaResponse)
{
/*
which calls the server to validate
*/
}

我原以为 grecaptcha.render 有另一个回调，当挑战屏幕关闭时调用，而用户没有通过选择图像来验证自己。

Answer 1

如您所述，API 不支持此 功能。

但是，您可以自己添加此功能。您可以谨慎使用以下代码，Google 可能会更改其 reCaptcha，从而破坏此自定义代码。该解决方案依赖于 reCaptcha 的两个特性，因此如果代码不起作用，请先查看:

• 窗口 iframe src:包含“google.com/recaptcha/api2/bframe”
• CSS opacity 属性:关闭窗口时更改为 0

// to begin: we listen to the click on our submit button
// where the invisible reCaptcha has been attachtted to
// when clicked the first time, we setup the close listener
recaptchaButton.addEventListener('click', function(){
    if(!window.recaptchaCloseListener) initListener()

})

function initListener() {

    // set a global to tell that we are listening
    window.recaptchaCloseListener = true

    // find the open reCaptcha window
    HTMLCollection.prototype.find = Array.prototype.find
    var recaptchaWindow = document
        .getElementsByTagName('iframe')
        .find(x=>x.src.includes('google.com/recaptcha/api2/bframe'))
        .parentNode.parentNode

    // and now we are listening on CSS changes on it
    // when the opacity has been changed to 0 we know that
    // the window has been closed
    new MutationObserver(x => recaptchaWindow.style.opacity == 0 && onClose())
        .observe(recaptchaWindow, { attributes: true, attributeFilter: ['style'] })

}

// now do something with this information
function onClose() {
    console.log('recaptcha window has been closed')
}