Recaptcha v2 выдает ошибку, когда он сбрасывается, и его элемент контейнера удаляется из DOM - PullRequest
Новая
       7

Recaptcha v2 выдает ошибку, когда он сбрасывается, и его элемент контейнера удаляется из DOM

0 голосов
/ 03 октября 2018

Когда я явно отображаю Recaptcha v2 и затем сбрасываю его перед удалением из DOM, через ~ 40 секунд я получаю ошибку в консоли браузера.

У меня есть JSFiddle , которыйможет использоваться для воспроизведения проблемы.

Вот соответствующая выдержка из кода: 

const recaptchaHolder = document.getElementById('...');
const recaptchaWidgetId = grecaptcha.render(recaptchaHolder, {/*...*/});
// then later
grecaptcha.reset(recaptchaWidgetId);
recaptchaHolder.parentElement.removeChild(recaptchaHolder);

Я получаю ошибку:

Uncaught (в обещании)Тайм-аут

со следующей трассировкой стека (фактическая трассировка стека может отличаться, так как это происходит в сильно уменьшенном коде): 

setTimeout (async)      
J           @   recaptcha__en.js:100
(anonymous) @   recaptcha__en.js:285
tb          @   recaptcha__en.js:284
mj          @   recaptcha__en.js:456
(anonymous) @   recaptcha__en.js:458

Я пытался использовать параметр 'error-callback' из документация , чтобы поймать эту ошибку, но это не помогло - ошибка все еще не исправлена, и этот обратный вызов не вызывается.

Еще одно наблюдение: если я пропущу вызов grecaptcha.reset доудалив элемент из DOM, тогда ошибки не произойдет. Однако , это может привести к несовместимому пользовательскому интерфейсу: если пользователь вызывает recaptcha (например, с помощью изображений), и элемент просто удаляется из DOM без вызова grecaptcha.reset, то HTML-запрос не являетсявычищен из DOM.

Я ищу способы обработки вышеупомянутой ошибки или обработки удаления recaptcha другим способом (если я делаю это сейчас неправильно)

Ответы [ 2 ]

0 голосов
/ 09 августа 2019

Ошибка возникает из-за того, что капча отправила вызовы в Google и хочет получить ответ, но поскольку мы удаляем элемент, чтобы ответ не шел в соответствии с планом, и выдается ошибка зоны, лучше просто скрытьКапча, как только вы получили ответ функции firebase.auth.signInWithPhoneNumber.Нет необходимости устанавливать таймауты и вызывать метод captcha.clear() в событии уничтожения вашей страницы.

0 голосов
/ 09 ноября 2018

Через много часов я нашел только это решение, см. https://jsfiddle.net/4mLhcksq/

Существует setTimeout и 60 секунд (я думаю, это может быть короче) пауза перед grecaptcha.reset(), а затем еще одна пауза передудаление элемента Recaptcha.На самом деле, у меня была такая же проблема, даже если я не удаляю элемент Recaptcha, а только сбрасываю его. 

const holder = getRecaptchaHolder();
holder.style.display = 'none'; //element disappears for users
setTimeout(function() {
  grecaptcha.reset(recaptchaWidgetId);
  setTimeout(function() { //we have to wait a while before removing element
    holder.parentElement.removeChild(holder);
  }, 1000);
}, 60000);

Я не особенно горжусь этим решением.Будем надеяться, что кто-нибудь предоставит лучший.

...