web-dev-qa-db-fra.com

Rendu explicite de ReCaptcha - Fonction de chargement non activée

D'après la documentation, j'ai compris que pour changer la langue du recaptcha, je devais le rendre explicitement. 

Le problème, cependant, est que cela n’apparaît pas vraiment et que la variable onload n’est même pas appelée.
Lorsque j'essaie de le rendre automatiquement, cela fonctionne. 

Voici le code:
En tête HTML: (J'ai aussi essayé de mettre ceci à la fin de la balise body) 

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

Sous la forme 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');
    }
  });
}
javascripthtml5recaptcha
12
Gofilord

Je viens de copier votre code, d'utiliser ma propre clé de site et cela fonctionne.

Le code que j'ai utilisé est:

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

Vérifiez votre code avec soin, car une seule faute de frappe de caractère peut empêcher les choses de fonctionner.

8
Raad

Assurez-vous que votre méthode onload est définie avant le script recaptcha. Sinon, vous aurez une condition de concurrence critique dans laquelle le script recaptcha pourrait tenter d'appeler votre méthode avant sa définition (surtout si le script recaptcha est mis en cache). 

D'après la documentation de onload https://developers.google.com/recaptcha/docs/display

Remarque: votre fonction de rappel onload doit être définie avant le ReCAPTCHA API charge. Pour s'assurer qu'il n'y a pas de conditions de course:

  • commandez d'abord vos scripts avec le rappel, puis reCAPTCHA
  • utiliser les paramètres async et différer dans les balises de script

Par exemple:

<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>
17
Aaron

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
       }
0
Kareem