無法聯系recaptcha。 檢查您的連接，然后重試。 初次提交后（reCaptcha v2 不可見）

Question

我無法讓 reCaptcha 在表單提交上正常工作，在這種情況下，我會通過客戶端驗證和 API 調用處理錯誤狀態。 這樣做的原因是因為我需要在用戶更正表單后重新提交表單，同時讓 API 提供表單上有錯誤的數據——每次都需要一個新的響應令牌。

我已經驗證了site-key和secret-key以及我的 reCaptcha 控制台中列出的domain 。

這里的問題是，在初始提交之后，reCaptcha 會間歇性地給我一個警報，說它無法通過我正在執行的回調 function 連接到 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 ，而是一種“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 調用進行驗證並需要重新提交到您的表單（用戶更正表單），這是一個很好的解決方法。

希望這可以幫助某人免於將頭撞到牆上。