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

Question

我无法让 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;
}

从页面中隐藏徽章

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

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

Answer 1

更新：

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

自从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 调用进行验证并需要重新提交到您的表单（用户更正表单)。

希望这可以帮助某人避免将头撞到墙上。