web-dev-qa-db-fra.com

Problème de positionnement du badge invisible Recaptcha

J'ai récemment commencé à utiliser la nouvelle méthode de Google Recaptcha - leur nouvelle Invisible Recaptcha. J'ai réalisé que la mise en œuvre de cette version était un peu différente, car vous associez les attributs recaptcha directement à votre bouton d'envoi, qui appelle ensuite l'API recaptcha de Google et commence le processus de vérification. Tout cela fonctionne bien, mais le problème majeur que je rencontre concerne le positionnement du badge "Protected by recaptcha". 

Après avoir ajouté la configuration recaptcha à mon bouton d'envoi, je commence à voir le badge à droite de mon écran. Selon d'autres sites, ce badge est censé n'être qu'un logo carré recaptcha jusqu'à son survol, puis il est supposé glisser pour devenir le grand rectangle que je vois initialement sur mon site. 

Voici une image de ce que je vois sur mon site après la mise en œuvre de l'invisible Recaptcha. 

 recaptcha issue

Voici le code du bouton d'envoi contenant les attributs recaptcha:

<button class="btn btn-primary btn-block g-recaptcha" data-sitekey="key"
data-callback="submitsecure" data-badge="bottomright" type="submit">Get Started</button>

Remarque: Les autres options data-badge telles que inline et bottomleft provoquent les mêmes problèmes de positionnement.

Le code de la fiche contenant le bouton:

    <form action="processjoin.php" method="post" id="signupform" style="padding-top:10px;padding-bottom:10px;max-width:50%;">
        <h2 class="sr-only">Login Form</h2>
        <div></div>
        <div class="illustration"><i class="icon ion-ios-Pulse-strong"></i>
            <div class="row">
                <div class="col-md-6">
                    <div class="form-group">
                        <input type="text" name="name" placeholder="Your Name" class="form-control" id="name" />
                    </div>
                    <div class="form-group">
                        <input type="text" name="username" placeholder="Username" class="form-control" id="username" />
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        <input type="email" name="email" placeholder="Email" class="form-control" id="email" />
                    </div>
                    <div class="form-group">
                        <input type="password" name="password" placeholder="Password" class="form-control" id="password" />
                    </div>
                </div>
            </div>
            <div class="form-group">
                <button class="btn btn-primary btn-block g-recaptcha" data-sitekey="6LfdMhkUAAAAAHl-LXZm_gPP1g-UX0aWt8sMR4uW" data-callback="submitsecure" data-badge="bottomright" type="submit">Get Started</button>
            </div>
            <a href="#" class="forgot">
                <div></div>Already have an account? Sign in.</a>
        </div>
    </form>

Je rencontre deux problèmes avec ce badge recaptcha:

  1. Le badge est piqué à l'extérieur de son cadre
  2. Il n’est pas non plus partiellement positionné hors écran tant qu’il n’est pas planifié. Je vois le rectangle complet avant d’interagir de quelque façon que ce soit avec ma souris. Je devrais voir le logo carré jusqu'à ce que je la survole, et il glisse pour devenir le rectangle complet.

En gros, je dois comprendre comment positionner cela correctement pour qu'il glisse hors de l'écran comme il est censé le faire et qu'il soit correctement contenu à l'intérieur de sa bordure.

Les outils de développement Google Chrome me disent que ce sont les attributs actuels du badge div, générés lors du chargement de la fenêtre:

 enter image description here

J'apprécie vraiment toute aide que vous pouvez fournir! Si je me trompe en pensant que le badge est requis, corrigez-le-moi et je le forcerai à le supprimer avec CSS. Toutefois, je crains que cela ne perturbe le processus de vérification de Captcha et ne respecte pas les règles de Google.

recaptchavisual-glitchinvisible-recaptcha
7
pattyd

Cela pourrait aider: https://developers.google.com/recaptcha/docs/invisible#config

Vous pouvez définir data-badge="inline" pour vous permettre de contrôler le CSS.

5
DFSOKO

Après de nombreux essais et erreurs, j'ai compris que le badge recaptcha se positionnait sur son élément conteneur plutôt que sur le corps et qu'il héritait également de son line-height de son élément conteneur.

Comme je ne pouvais pas directement retirer le badge de son élément conteneur et le déplacer vers le corps, j'ai résolu le problème avec JQuery et un léger changement CSS.

JQuery: Apposé le badge sur le corps plutôt que sur son élément contenant (le formulaire)

Pour ce faire, je devais m'assurer que le badge avait déjà été entièrement chargé sur le site. Google rend cela difficile, mais j’ai pu le faire en utilisant jQuery.initialize by timpler .

Une fois que j'avais initialize.min.js sur ma page, j'ai simplement utilisé ce code:

jQuery(document).ready(function() {
    $('.grecaptcha-badge').appendTo("body"); //fix recaptcha positioning to body  
});
$.initialize(".grecaptcha-badge", function() {
    $(this).appendTo("body"); //fix recaptcha positioning to body, even if it loads after the page  
});

CSS: Ajout d'une modification au line-height pour positionner correctement le badge avec son conteneur.

.grecaptcha-badge {
  line-height:50px !important;
}

C’était difficile à comprendre, mais au final, il s’agissait simplement du badge qui héritait de trop nombreux attributs de son parent. J'espère que cela aidera quelqu'un à l'avenir!

4
pattyd

Vous pouvez ajouter captcha dans un élément div à n’importe quel endroit de la page.

<div class="g-recaptcha"
      data-sitekey="your_site_key"
      data-callback="onSubmit"
      data-size="invisible">
</div>

Lorsque vous envoyez le formulaire, le javascript suivant doit être appelé pour lancer la validation captcha.

grecaptcha.execute();

La fonction onSubmit (spécifiée dans l'attribut de balise data-callback) sera appelée si la validation captcha est réussie. Là, vous obtenez le jeton recaptcha qui peut être injecté en tant que champ caché dans votre formulaire pour la validation du backend.

function onSubmit(recaptchaToken) {
    // inject token as hidden form field and submit form
}
0
Dmitry