在Google recaptcha关闭挑战窗口时检测

Question

我正在使用Google隐形recaptcha.有没有办法检测挑战窗口什么时候关闭？通过挑战窗口,我指的是您必须选择一些图像进行验证的窗口.

一旦按下按钮,我现在在按钮上放置一个微调器,该按钮呈现recaptcha挑战.无法通过另一个挑战窗口提示用户.

我以编程方式调用render函数:

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的两个特性,因此如果代码不起作用,请先查看:

• 窗口iframesrc:包含"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')
}