3

I have a very simple code about explicit invisible recaptcha v2 rendering and executing.

So first off this is the code https://jsfiddle.net/715njfpL/ or:

<html>
  <head>
  <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"> 
  <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
  <script>
  var onloadCallback = function() {
    grecaptcha.render('xrecaptcha', {
      'sitekey': '6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI',
      'size': 'invisible'
    });
  };
  </script>
  </head>
  <body>
    <div id="xrecaptcha"></div>
    <button>Submit</button>
    <script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" defer>
    </script>
  </body>
</html>
<script>
$(function(){
  $('button').click(function(){
    grecaptcha.reset();
    grecaptcha.execute()
    .then(function(){return fetch('https://jsfiddle.net');});
  });
});
</script>

Once the button with text Submit is clicked, the order of events should be (a) reset recaptcha; (b) execute recaptcha; and (c) fetch something. I tried to get this work by using the thenable ability of 'grecaptcha.execute()', but it's a complete mess.

If you open Chrome inspect console at https://jsfiddle.net/715njfpL/ and click the button you will see that the order is (a) fetch (b) reset and (c) execute. Obviously the order is not what I was expecting. I was thinking that the function with fetch inside then is going to be called after grecaptcha.execute() has finished the POST request and response. What am I doing wrong here?

There is another problem, I saw while debugging and that is that grecaptcha.reset() is not just resetting the form field but it seems like a XHR POST request is being made. So I would need a thenable or some kind of promise here too in order to achieve the desired order of events I described above. I would appreciate any help here too.

ezegoing
  • 526
  • 1
  • 4
  • 18
  • the order is ok reset, execute, fetch when clicking the button https://jsfiddle.net/ht8fjae1/ – EugenSunic Sep 08 '19 at 06:10
  • @EugeneSunic Well your `console.log`s do not mimic the order of the real post requests correctly. Please click on the fiddle i posted in the question and check the POST request log under chrome->inspect->console. – ezegoing Sep 08 '19 at 06:17
  • @ezegoing Did you manage to find the answer already? I'm having the same trouble right now :) – JJWesterkamp Jan 21 '20 at 13:51
  • 1
    Not per se, but if you wrap execute and return a custom Promise, which you resolve/reject inside the callback/error-callback you get the desired effect. – ezegoing Jan 21 '20 at 14:34
  • Thanks! I'll give it a shot. – JJWesterkamp Jan 21 '20 at 14:48

0 Answers0