javascript - 不可见的重新捕获以编程方式调用质询grecaptcha.getResponse()在页面刷新时始终为空白

我在jsp页面中渲染google recaptcha小部件，并在提交表单时以编程方式调用Java脚本中的挑战。

<script type="text/javascript" id="recaptcha-response">
     var siteKey = $('#recaptchasitekey').first().text();
         var onloadCallback = function() {
            grecaptcha.render('recaptcha_element', {
              'sitekey' : siteKey,
              'callback' : correctCaptcha,
              'data-bind' : "qoActionTemplate"
            },true);
          };
         var correctCaptcha = function(response) {
            return response;
         };

    </script>
      <div class="g-recaptcha" id="recaptcha_element" data-size="invisible" ></div>
       <script src="http://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>
   <script type="text/template" id="recaptchaUrl">

这是调用挑战的Java脚本代码。

    executeRecaptcha : function() {
            grecaptcha.execute();
            captcha.token = grecaptcha.getResponse();
            if (captcha.token == null || captcha.token == '') {
                grecaptcha.reset();
                grecaptcha.execute();
            }
            return captcha.token;
        },

    validateRecaptcha : function(response,checkToken) {
            captcha.executeRecaptcha();
            if (captcha.token) {
                var captchaUrl = $('#recaptchaUrl').first().text();
                captcha.userSIDVerify = $('#captcha_token').val();
                $.ajax({
                    type : 'POST',
                    url : captchaUrl,
                    data : {
                        response : captcha.token
                    },
                    success : captcha.checkToken,
                    error : function() {
                        alert("failed")
                        return;
                    }
                });
            }
        }

我的grecaptcha.getResponse()在我第一次提交表单时始终为空，然后在我第二次提交表单时收到响应。

最佳答案

我不确定100％，但是我认为这是因为您是在grecaptcha.getResponse()之后以同步方式直接调用grecaptcha.execute()，这不是使用不可见reCaptcha的预期方式。 grecaptcha.execute()需要花费一些时间(我假设)，并且被设计为异步返回data-callback方法。完成后，您可以随时使用grecaptcha.getResponse()(在调用grecaptcha.reset()之前)获取响应 token 。我认为这就是grecaptcha.getResponse()背后的想法。我假设它第二次起作用，因为它有时间处理不可见的reCaptcha。我认为grecaptcha.getResponse()也更适合常规reCaptcha，而不是不可见的。因为常规reCaptcha由用户“完成”，而表单提交中看不见的reCaptcha已“完成”，因此需要回调以告知我们它已完成。