如何在 grecaptcha.execute() 之后等到用戶完成任務？ reCAPTCHA v2 不可見

Question

我想制作自己的網站，並在其中使用 reCAPTCHA。 但是，我不知道如何在 grecaptcha.execute() 之后等待用戶完成任務。 因為現在直接調用鏈接而不傳遞任務。 對於 rest，我使用標准的 Google Script https://developers.google.com/recaptcha/docs/invisible它是 reCAPTCHA v2 invisible。

我會很高興得到答案。

<script src="https://www.google.com/recaptcha/api.js" async defer></script>
     <script>
       function onSubmit(token) {
         grecaptcha.execute().then(var vslg = document.getElementById("vslg").value;
         window.location.replace("url");
       }
     </script>
  </head>
  <body>
    <a class="button"></a>
    <div class="topBar">
    </div>
    <div class="underTopBar">
            <form action="JavaScript:onSubmit()" class="flex-itemform form" method="POST" id="formV">
                <table>
                    <tr>
                        <td>
                            <div>
                                <input type="text"  id="vslg" required>
                            </div>
                        </td>
                        <td>
                            <div>
                                <div class="g-recaptcha"
                                  data-sitekey="..."
                                  data-callback="onSubmit"
                                  data-size="invisible">
                                </div>
                                <input type="submit" class="buttonDesign" value="Senden">
                            </div>
                        </td>
                    <tr>
                </table>
        </form>
    </div>

Answer 1

以下代碼執行此操作：

<button class="g-recaptcha"...是自動將挑戰綁定到按鈕。 當按鈕被點擊時，它會自動觸發不可見的recaptcha。
一旦 recaptcha 完成，它將添加一個名為g-recaptcha-response的隱藏字段，其中包含令牌，然后運行提交表單的onSubmit回調。

  <head>
     <script src="https://www.google.com/recaptcha/api.js" async defer></script>
     <script>
       function onSubmit() {
         document.getElementById("formV").submit();
       }
     </script>
  </head>
  <body>
    <a class="button"></a>
    <div class="topBar">
    </div>
    <div class="underTopBar">
            <form class="flex-itemform form" method="POST" id="formV">
                <table>
                    <tr>
                        <td>
                            <div>
                                <button 
                                  class="g-recaptcha buttonDesign"
                                  data-sitekey="..."
                                  data-callback="onSubmit"
                                  data-size="invisible">Senden</button>
                            </div>
                        </td>
                    <tr>
                </table>
        </form>
    </div>

重要提示：您仍然需要驗證令牌g-recaptcha-response服務器端。 請參閱驗證用戶的響應。 在不驗證令牌的情況下，將 recaptcha 添加到前端不會阻止任何人提交表單。

Answer 2

我在這個廢話上花了3個多小時。 結果證明這是一個直截了當的問題。 我希望我可以幫助某人回答這個問題。

首先，您必須意識到您需要 2 個 JavaScript 函數。

1-按下提交按鈕后執行的一個。 在此 function 中，始終使用： event.preventDefault()以避免表單提交。 您還不想提交表單。 grecaptcha.execute()來啟動 reCAPTCHA。

您可以使用提交按鈕（onClick 屬性）執行此 function。

2- reCAPTCHA 成功解決后執行的一個。 對於這個 function，您只需要： document.getElementById("form").submit()提交您的表單。

要執行此 function，請在您的 reCAPTCHA div 元素中使用 data-callback 屬性。 正如您在文檔中看到的，數據回調屬性定義為

您的回調名稱 function，在用戶提交成功響應時執行。 g-recaptcha-response 令牌被傳遞給您的回調。

這就是你所需要的。 確保您的表單僅與您創建的第二個 function 一起提交，僅此而已。

如何在 grecaptcha.execute() 之后等到用戶完成任務？ reCAPTCHA v2 不可見

問題描述

2 個解決方案

解決方案1
0 已采納 2020-10-12 20:49:12

解決方案2
0 2022-09-11 00:14:44

如何在 grecaptcha.execute() 之后等到用戶完成任務？ reCAPTCHA v2 不可見

問題描述

2 個解決方案

解決方案1 0 已采納 2020-10-12 20:49:12

解決方案2 0 2022-09-11 00:14:44

解決方案1
0 已采納 2020-10-12 20:49:12

解決方案2
0 2022-09-11 00:14:44