是否有任何recaptcha v2關閉事件？

Question

我渲染grecaptcha下面類似的代碼

let callback; 
const p = new Promise((resolve) => callback = (result) => resolve(result)); 

grecaptcha.render(el, { 
    sitekey: window.settings.recaptchaKey, 
    size: "invisible", 
    type: "image", 
    callback: result => callback(result), 
    badge: "inline" 
}); 

const key = await p; 

所有工作正常，但如果驗證碼模式的背景下用戶點擊，reCAPTCHA的關閉，我無法檢測到它，所以我等待了無限響應

我需要某種事件或回調來檢測它何時關閉

Answer 1

reCAPTCHA v2有一個expired-callback處理程序，可能是您正在尋找的處理程序。

https://developers.google.com/recaptcha/docs/display

Answer 2

作爲一個骯髒的解決辦法，我們可以設置超時並等待驗證碼iframe來顯示，然後等待它隱藏

我發模塊，使所有操作

這取決於jQuery和全球的reCAPTCHA

，我使用它像這樣

try { 
    key = await captcha(elementToBind, 'yoursitekey'); 
} 
catch (error) { 
    console.log(error); // when recaptcha canceled it will print captcha canceled 
} 

壞的部分，它可能會破壞當谷歌改變的東西在HTML結構模塊

/* global grecaptcha */ 
import $ from "jquery"; 

let callback =() => {}; 
let hideCallback =() => {}; 

export default function captcha (el, sitekey) { 
    const $el = $(el); 
    el = $el[0]; 
    let captchaId = $el.attr("captcha-id"); 
    let wrapper; 
    if (captchaId == null) { 
     captchaId = grecaptcha.render(el, { 
      sitekey, 
      size: "invisible", 
      type: "image", 
      callback: result => callback(result), 
      badge: "inline", 
     }); 
     $(el).attr("captcha-id", captchaId); 
    } 
    else { 
     grecaptcha.reset(captchaId); 
    } 
    const waitForWrapper = setInterval(() => { 
     // first we search for recaptcha iframe 
     const iframe = $("iframe").filter((idx, iframe) => iframe.src.includes("recaptcha/api2/bframe")); 
     iframe.toArray().some(iframe => { 
      const w = $(iframe).closest("body > *"); 
      // find the corresponding iframe for current captcha 
      if (w[0] && !w[0].hasAttribute("captcha-id") || w.attr("captcha-id") == captchaId) { 
       w.attr("captcha-id", captchaId); 
       wrapper = w; // save iframe wrapper element 
       clearInterval(waitForWrapper); 
       return true; 
      } 
     }); 
    }, 100); 
    const result = new Promise((resolve, reject) => { 
     callback = (result) => { 
      clearInterval(waitForHide); 
      resolve(result); 
     }; 
     hideCallback = (result) => { 
      clearInterval(waitForHide); 
      reject(result); 
     }; 
    }); 
    grecaptcha.execute(captchaId); 
    let shown = false; 
    const waitForHide = setInterval(() => { 
     if (wrapper) { // if we find iframe wrapper 
      if (!shown) { 
       // waiting for captcha to show 
       if (wrapper.css("visibility") !== "hidden") { 
        shown = true; 
        console.log("shown"); 
       } 
      } 
      else { 
       // now waiting for it to hide 
       if (wrapper.css("visibility") === "hidden") { 
        console.log("hidden"); 
        hideCallback(new Error("captcha canceled")); 
       } 
      } 
     } 
    }, 100); 
    return result; 
}