无法联系 recaptcha。请检查您的连接并重试。初次提交后（reCaptcha v2 不可见）

Question

我无法让 reCaptcha 在提交表单时正常工作，在这种情况下，我会通过客户端验证和 API 调用来处理错误状态。这样做的原因是因为我需要在用户更正表单后重新提交表单，同时让 API 提供表单上存在错误的数据——每次都需要一个新的响应令牌。

我已经验证了 site-key 和 secret-key 以及我的 reCaptcha 控制台中列出的 domain。

这里的问题是，在初始提交之后，reCaptcha 会间歇性地给我一个警告，说它无法通过我正在执行的回调函数连接到 reCaptcha。

这是我在通过 data-callback

提交表单时执行的代码

let correctCaptcha = function(response) {
    // Fire Post Route
    window.submitUserAPIForm(response);

    // Reset the reCaptcha token due to not allowing duplicate tokens used in the same instance -- to re-submit form
    grecaptcha.reset();
  };

  <form>
    <!-- MY FORM INPUT VALUES HERE -->
    <button class="g-recaptcha" data-sitekey="MY_SITE_KEY" data- callback="correctCaptcha">
     <p>Start My Free Trial Now</p>
    </button>
  </form>

我确实将 MY_SITE_KEY 设置为控制台提供的键，我假设罪魁祸首是在这个特定的调用中，而不是我的 API 调用和客户端的整体-端验证。

此外，请注意我正在使用这个：

.grecaptcha-badge {
  visibility: hidden;
}

从页面隐藏徽章

有时似乎一切正常，但偶尔会出现连接问题，导致用户刷新页面或完全卡住。

任何对此的见解将不胜感激！

Answer 1

更新：

找到了解决此问题的方法，如果有人有任何提示和/或更好的方法，请立即告诉我

而是一种 'DUH' 的解决方案，因为 data-error-callback 存在，但本以为这个间歇性问题已在某处得到解决。

代码如下：

<script>
  // Callback function to fire after reCaptcha response is complete
  function correctCaptcha(response) {
      // Fire desired behavior after receiving the response
      window.submitUserAPIForm(response);
      // Reset the reCaptcha token due to not allowing duplicate tokens used in the same instance
      grecaptcha.reset();
    });
  };

  // If connection poops, re-try
  function onErrorCallback() {
    // Re-initialize reCaptcha
    grecaptcha.reset();
    // Fire reCaptcha
    grecaptcha.execute();

    // Fire desired behavior AFTER reCaptcha is complete 
    window.submitUserAPIForm(grecaptcha.getResponse());
  }
</script>

<script src="https://www.google.com/recaptcha/api.js" async defer></script>

  <form>
    <!-- MY FORM INPUT VALUES HERE -->
    <button class="g-recaptcha" data-sitekey="MY_SITE_KEY" data-callback="correctCaptcha" data-error-callback="onErrorCallback">
      <p>Start My Free Trial Now</p>
    </button>
  </form>

我实际上是在强制 reCaptcha 在失去连接时执行预期的行为。

似乎在尝试重置 reCaptcha 后连接丢失了——这意味着它在重复尝试后不会触发回调，这会导致它失去连接（这是有道理的）。

调试几乎是不可能的，因为事情是如何在引擎盖下运行的，如果您试图通过 API 调用进行验证并要求重新提交表单，这是一个很好的解决方法（用户在表单上更正）。

希望这能帮助人们避免用头撞墙。