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

如何解决无法联系 recaptcha检查您的连接并重试初次提交后reCaptcha v2 不可见

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

我已经验证了我的 reCaptcha 控制台中列出的 site-key 和 secret-key 以及 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;
}

从页面隐藏徽章

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

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

解决方法

更新：

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

自从 data-error-callback 存在以来，它是一种“DUH”类的解决方案，但预计这个间歇性问题会在某处得到解决。

代码如下：

<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 调用进行验证并需要重新提交到您的表单（用户更正表单），这是一个很好的解决方法).

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