Явное рендеринг ReCaptcha - функция загрузки без сбоев

Из документации я понял, что для того, чтобы изменить язык recaptcha, я должен сделать это явно.

Проблема, однако, в том, что она действительно не отображается, а onload даже не называется.
Когда я пытаюсь сделать это автоматически, это сработает.

Здесь код:
В голове HTML: (Я также попытался поместить это в конец тега body)

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

В HTML-форме:

<div id="recaptcha"></div>

JavaScript:

var recaptchaCallback = function() {
  console.log('recaptcha is ready'); // not showing
  grecaptcha.render("recaptcha", {
    sitekey: 'My Site Key',
    callback: function() {
      console.log('recaptcha callback');
    }
  });
}

Ответ 1

Я просто скопировал ваш код, использовал свой собственный ключ сайта, и он работает.

Используемый мной код:

<html>
  <body>
    <p>ReCaptcha Test</p>

    <div id="recaptcha"></div>

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

    <script type="text/javascript">
      var recaptchaCallback = function () {
        console.log('recaptcha is ready'); // showing
        grecaptcha.render("recaptcha", {
            sitekey: 'SITE_KEY',
            callback: function () {
                console.log('recaptcha callback');
            }
        });
      }
    </script>

  </body>
</html>

Внимательно проверьте свой код, поскольку только одна символьная опечатка может помешать работе.

Ответ 2

Убедитесь, что ваш метод onload определен до recaptcha script. В противном случае у вас будет условие гонки, в котором recaptcha script может пытаться вызвать ваш метод до его определения (особенно если кэшируется recaptcha script).

Из документации для onload https://developers.google.com/recaptcha/docs/display

Примечание: ваша функция обратного вызова onload должна быть определена до reCAPTCHA API загружается. Для обеспечения отсутствия условий гонки:

сначала закажите свои сценарии с обратным вызовом, а затем reCAPTCHA

используйте параметры async и defer в тегах script

Например:

<div id="recaptcha"></div>


<script type="text/javascript">
  var recaptchaCallback = function () {
    console.log('recaptcha is ready'); // not showing
    grecaptcha.render("recaptcha", {
        sitekey: 'SITE_KEY',
        callback: function () {
            console.log('recaptcha callback');
        }
    });
  }
</script>

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

Ответ 3

HTML

<div id="captcha"></div>
<script src='https://www.google.com/recaptcha/api.js?onload=recaptchaReadycallback&render=explicit' async defer'></script>

Javascript

       //render captcha and set call back function on api.js load finish
       function recaptchaReadycallback(){
        grecaptcha.render('captcha', {
           'callback' : recaptchaCheckedCallback,
           'expired-callback': recaptchaExpiredCallback,
           'sitekey': 'YOUR-SITE-KEY'

         });
       }

       //on expiry do stuff. i.e. show error 
       function recaptchaExpiredCallback(){
          grecaptcha.reset();
          //show 'check the bloody box' error
       };

       //on not a robot confirmation do stuff. i.e. hide error
       function recaptchaCheckedCallback(){
          //hide 'check the bloody box' error
       }