web-dev-qa-db-fra.com

Google REcaptcha ne s'affiche pas

J'ai les éléments suivants dans mon <body>

<div class="g-recaptcha" data-sitekey="some-key (original is right)">

et ceci sur mon <head>

<script src="//www.google.com/recaptcha/api.js"></script>

mais rien ne s'affiche, que ce soit sur Firefox ou Chrome ... Est-ce un problème connu?

javascriptrecaptcha
10
Fane

assurez-vous que <script src="//www.google.com/recaptcha/api.js"></script> est la dernière chose avant la fermeture de la balise head . Ce problème est résolu pour moi.

5
Andrei

Vient de frapper cet obstacle, et dans mon cas, cela était dû à AngularJS. Cela ne se limite pas à Angular, toute bibliothèque qui lie les éléments après le chargement de la page peut empêcher le reCAPTCHA de Google de s'afficher car l'élément n'existe tout simplement pas au moment de l'exécution du code de Google.

Pour résoudre ce problème, commencez par rendre le rendu explicite et fournissez une fonction à exécuter lors du chargement de reCAPTCHA:

<script src='https://www.google.com/recaptcha/api.js?onload=recaptchaOnload&render=explicit' async defer></script>

Ajoutez maintenant un identifiant unique au conteneur, par exemple:.

<div id="recaptcha" class="g-recaptcha" data-sitekey="site key here"></div>

Ensuite, dans la fonction personnalisée, attendez que l'élément existe réellement:

var _captchaTries = 0;
function recaptchaOnload() {
    _captchaTries++;
    if (_captchaTries > 9)
        return;
    if ($('.g-recaptcha').length > 0) {
        grecaptcha.render("recaptcha", {
            sitekey: 'site key here',
            callback: function() {
                console.log('recaptcha callback');
            }
        });
        return;
    }
    window.setTimeout(recaptchaOnload, 1000);
}

Cela va continuer à essayer pendant 10 secondes, jusqu'à ce qu'il trouve l'élément, puis restituer le reCAPTCHA dans celui-ci.

4
Shadow Wizard

Assurez-vous qu'aucun bloqueur de contenu n'est activé dans votre navigateur, par exemple Ad-Block Plus ou uBlock Origin.

Désactivez-les, actualisez la page et soumettez à nouveau le formulaire.

0
crmpicco

Le problème que j’avais, c’est qu’il montrait la plupart du temps, mais que ce n’était parfois pas le cas et que je devais soumettre le formulaire (et déclencher la validation) pour qu’il soit visible. L'ajout de ?render=explicit à la balise de script a corrigé le problème.

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

https://developers.google.com/recaptcha/docs/display#explicit_render

0
woolm110