recaptcha - 使用 reCAPTCHA v3 处理错误

Question

我在我的页面上设置了 reCAPTCHA v3:

<script src="https://www.google.com/recaptcha/api.js?render=MY_KEY"></script>

如果互联网连接变得不可用或不可靠，reCAPTCHA 将在我的页面底部插入此 HTML:

<div>
  <div>
    Could not connect to the reCAPTCHA service. Please check your internet connection and reload to get a reCAPTCHA challenge.
  </div>
</div>

我宁愿在我的 JavaScript 中处理这个错误，这样我就可以以更好的方式将它显示给用户。然而，documentation for v3没有说明如何做到这一点。

关于如何捕捉这个错误有什么想法吗？

Answer 1

您可以在脚本标记本身中放置一个 onerror 处理程序:

<script src="https://www.google.com/recaptcha/api.js?render=MY_KEY" onerror="error_handler()">

但我认为您想要的更符合 reCAPTCHA v2 的内容优惠:

widgetId = grecaptcha.render('example1', {
    'sitekey' : 'your_site_key',
    'theme' : 'light',
    'error-callback' : error_handler()
});

我怀疑这行得通，但还有另一种方法。您只需要监视 DOM 的变化，因为您知道当出现错误时，Google 会向您的页面添加一个 div。你可以用 MutationObserver 做到这一点.

var m = new MutationObserver(function (mutationRecords) {
    this.disconnect();
    error_handler();
});
m.observe(document.body, {childList: true});

{childList: true} 告诉 MutationObserver 检测添加到 DOM 的节点，并将它们作为参数 mutationRecords(包含 MutationRecord 对象的数组)传递给回调函数。从这里开始，接下来要做什么取决于您。

这至少应该足以让您入门!