如何等到用户完成 grecaptcha.execute() 之后的任务? reCAPTCHA v2 不可见

How to wait until the user finished the tasks after grecaptcha.execute()? reCAPTCHA v2 invisible

我想制作自己的网站 使用验证码。但是,我不知道如何在 grecaptcha.execute() 之后等待用户完成任务。因为现在直接调用 link 而不传递任务。 对于其余部分,我使用标准 Google 脚本 https://developers.google.com/recaptcha/docs/invisible 是reCAPTCHA v2不可见

我很乐意得到答案。

<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>  

以下代码执行此操作:

  1. <button class="g-recaptcha"...Automatically bind the challenge to a button。单击按钮时会自动触发不可见的recaptcha。
  2. 一旦 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服务器端。参见 Verifying the user's response。在不验证令牌的情况下,将验证码添加到前端并不会阻止任何人提交表单。