El problema es bastante simple: algunas llamadas a refresh() dan como resultado que window.grecaptcha no esté undefined . No siempre como dije, creo que por ralentización de la red. Es bastante "difícil" depurar esto, y también soy bastante nuevo en este concepto, por lo que pido ayuda, tal vez una falla de código.
class RecaptchaController { loadPromise; async refresh() { await this.load(); // window.grecaptcha is (sometimes) undefined in next line this.element.value = window.grecaptcha.execute(this.options.siteKey, { action: 'submit' }); } load() { if (!this.loadPromise) { this.context.logDebugActivity('load'); this.loadPromise = new Promise((resolve, reject) => { const url = new URL(this.options.apiUrl); url.searchParams.append('render', this.options.siteKey); url.searchParams.append('hl', this.options.locale); const script = document.createElement('script'); script.setAttribute('id', this.identifier); script.setAttribute('src', url.toString()); // The relevant part where I'm resolving the promise script.addEventListener('load', resolve); script.addEventListener('error', reject); document.body.appendChild(script); }) } return this.loadPromise; } }El error arrojado es:
recaptcha_controller.js: 27 No detectado (en promesa) TypeError: no se pueden leer las propiedades de undefined (leyendo 'ejecutar')
Básicamente, se llamará a refresh en un controlador de eventos de submit , como este:
form.addEventListener('submit', async (e) => { // This is NOT how the initialization works! // Just and example about how I'm calling refresh() cost recaptchaController = new RecaptchaController(); // This is actually what is happening await recaptchaController.refresh(); // Submit handling via fetch()... });No estoy pegando todo el código para hacerlo simple. Además, hay un marco detrás (pero no es relevante).
Hice una prueba con reCAPTCHA v3 y, al ver las solicitudes en el panel de red de DevTools, parece que el propio reCAPTCHA carga otra secuencia de comandos específica de la configuración regional de forma asincrónica. Para cargar reCAPTCHA dinámicamente de la forma en que lo intenta, debe configurar una devolución de llamada visible globalmente y pasar su nombre al parámetro onload de api.js
load() { if (!this.loadPromise) { this.context.logDebugActivity('load'); this.loadPromise = new Promise((resolve, reject) => { // recaptcha onload will resolve this promise window._recaptchaOnLoad = () => resolve(); const url = new URL(this.options.apiUrl); url.searchParams.append('onload', '_recaptchaOnLoad'); url.searchParams.append('render', this.options.siteKey); url.searchParams.append('hl', this.options.locale); const script = document.createElement('script'); script.setAttribute('id', this.identifier); script.setAttribute('src', url.toString()); // load event no longer needed script.addEventListener('error', reject); document.body.appendChild(script); }).finally(() => { // optionally delete window property delete window._recaptchaOnLoad; }) } return this.loadPromise; }