0

I am trying to implement reCaptcha for submission of form but I am having trouble implement the google captcha javascript . I am not getting any console message in console.

    <script src="https://www.google.com/recaptcha/api.js?onload=recaptchaCallback&render=SITE_KEY" async defer></script>

    <script type="text/javascript">
      var recaptchaCallback = function () {
        console.log('recaptcha is ready');
        grecaptcha.ready(function() {
            grecaptcha.execute('SITE_KEY', {action: 'some_action'}).then(function(token) {
                console.log(token);
            });
        });
      }
    </script>

I don't see any console message, error, warning literally nothing in console. isn't onload should invoke the callback function. I checked the javascript response in network tab I am getting response with 200 status nothing wrong there . Can anyone tell me what I am doing wrong here . yeah I replaced the SITE_KEY with actual key .

Thanks and any advice will be helpful.

Roshan
  • 71
  • 7
  • 1
    I'm getting `recaptcha is ready` in the console when I run it. Maybe you've changed your log settings in the console – Konrad Jan 30 '23 at 18:54
  • 1
    @konrad ,nothing wrong with console setting If I write console.log right before this ```var recaptchaCallback = function () { '``` I do get console – Roshan Jan 30 '23 at 18:57
  • Have you tried swapping the order of the script? Your callback should be declared first – Konrad Jan 30 '23 at 18:59
  • yes I tried nothing happened but if use the same code in empty file it is returning maybe some code is blocking the execution or something . – Roshan Jan 30 '23 at 19:01
  • _“For classic scripts, if the `async` attribute is present, then the classic script will be **fetched in parallel to parsing and evaluated as soon as it is available**.”_ — from the [documentation](//developer.mozilla.org/en/docs/Web/HTML/Element/script#attributes). Are you sure this is what you want here? How do you guarantee that your callback is defined before `api.js` executes? – Sebastian Simon Jan 30 '23 at 19:02
  • yes @SebastianSimon I want to save generated token to input field . – Roshan Jan 30 '23 at 19:04
  • @SebastianSimon There is also the `defer` attribute here. – Unmitigated Jan 30 '23 at 19:08
  • @Unmitigated That’s what I’ve been wondering about, too, but `defer` might be ignored if `async` is set: [Can you use both the async and defer attributes on a HTML tag?](/q/13821151/4642212). – Sebastian Simon Jan 30 '23 at 19:09
  • @Roshan How does the `async` attribute help, then? – Sebastian Simon Jan 30 '23 at 19:10
  • what I want as soon as script is executed it will save the token to some hidden input field which I will send while submitting the form so that's why I am using async . isn't async used for this . I will try without ```async``` and ```defer``` and see if it changes anything . – Roshan Jan 30 '23 at 19:17
  • @Roshan No, the `async` attribute downloads a ` – Sebastian Simon Jan 30 '23 at 19:20
  • Thanks @SebastianSimon, now that I read the documentation I get what you mean . still nothing after removing async and defer . – Roshan Jan 30 '23 at 19:25

1 Answers1

0

Your error is in Google's script URL: .../api.js?onload=recaptchaCallback&render=SITE_KEY the render param should not have the site key as value, it should be either explicit or onload

source: https://developers.google.com/recaptcha/docs/invisible#javascript_resource_apijs_parameters

Ferares
  • 702
  • 5
  • 13