Y a-t-il un événement close recaptcha v2?

Question

Je suis rendu grecaptcha avec le code comme celui-ci

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; 

tout fonctionne bien, mais si l'utilisateur clique sur le contexte modal recaptcha, recaptcha ferme et je ne peux pas le détecter, donc j'attendre infinie réponse

J'ai besoin d'une sorte d'événement ou de rappel pour détecter quand il se ferme

Answer 1

reCAPTCHA v2 a un gestionnaire expired-callback qui pourrait être ce que vous cherchez.

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

Answer 2

Pour contourner ce problème sale, nous pouvons définir le délai et attendre recaptcha iframe pour afficher, puis attendez qu'il cacher

J'ai fait module qui fait toutes les manipulations

Il dépend de jquery et recaptcha mondiale

et je l'utilise comme celui-ci

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

la mauvaise partie, il peut se casser quand quelque chose changer google dans la structure html

code du module

/* 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; 
}