Invisible recaptcha Programmatically invoke the challenge grecaptcha.getResponse() is always blank on page refresh

Question

I am rendering the google recaptcha widget in my jsp page and programmatically invoking the challenge in my java script when I submit the form.

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

Here is my java Script code that invokes the challenge.

    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;
                    }
                });
            }
        }

My grecaptcha.getResponse() is always empty on my first form submission and then for the second time I submit I get a response.

Answer 1

I'm not 100% sure but I think this is because you're calling grecaptcha.getResponse() directly after grecaptcha.execute() in a synchronous fashion which is not the intended way to use the invisible reCaptcha. The grecaptcha.execute() takes time to work (I'm assuming) and is designed to return asynchronously to the data-callback method. Once that's completed then you can use grecaptcha.getResponse() at any time (before calling grecaptcha.reset()) to get the response token. I think that's the idea behind grecaptcha.getResponse(). I'm assuming it works the second time because it's had time to process the invisible reCaptcha. I think grecaptcha.getResponse() is also more for the regular reCaptcha and not the invisible. Because the regular reCaptcha gets "completed" by the user where the invisible reCaptcha is "completed" on form submission which hence needs a callback to let us know it's been completed.