web-dev-qa-db-fra.com

Comment définir la position du badge avec reCAPTCHA v3?

J'aimerais utiliser un badge en ligne avec v3, mais il n'y a pas de documentation sur la position du badge pour v3.

recaptcha
7
Still don't know everything

Vous pouvez créer le badge en ligne dans la V3 en utilisant uniquement le code Javascript qui n’est pas encore documenté.


Définissez votre paramètre render sur explicit et ajoutez un paramètre onload pour le rappel, par exemple onRecaptchaLoadCallback.

<script src="https://www.google.com/recaptcha/api.js?render=explicit&onload=onRecaptchaLoadCallback"></script>

Ensuite, configurez votre rappel comme suit et n'oubliez pas d'entrer l'identifiant/l'élément de destination de votre badge, dans ce cas l'identifiant est inline-badge.

<script>
    function onRecaptchaLoadCallback() {
        var clientId = grecaptcha.render('inline-badge', {
            'sitekey': '6Ldqyn4UAAAAAN37vF4e1vsebmNYIA9UVXZ_RfSp',
            'badge': 'inline',
            'size': 'invisible'
        });

        grecaptcha.ready(function() {
            grecaptcha.execute(clientId, {
                    action: 'action_name'
                })
                .then(function(token) {
                    // Verify the token on the server.
                });
        });
    }
</script>

Exemple

La source

6
Sam Carlton

Je viens de changer le CSS pour la classe grecaptcha-badge comme ceci: 

.grecaptcha-badge { 
    bottom:25px !important; 
}
5
Ommadawn

EDIT1: Voir la réponse à l'aide des paramètres render=explicit. Cette réponse fonctionne toujours, mais c'était avant que cette fonctionnalité soit documentée et pas aussi propre.

C'est ce que j'ai réussi à faire en plaçant une boîte et en détachant le badge reCaptcha v3. Ensuite, quelques ajustements de style sont apportés au conteneur.

#grecaptcha-box {
    width: 260px;
    overflow: hidden;
    position: relative;
    height: 75px;
}
#grecaptcha-box .grecaptcha-badge {
    box-shadow: none !important;
}

Ensuite, vous placez la boîte suivie de votre JavaScript.

<form>
    <!-- Rest of your form here... -->
    <input type="hidden" id="recaptcha-token"  name="recaptcha-token">
    <input type="hidden" id="recaptcha-action" name="recaptcha-action">
</form>

<div id="grecaptcha-box"></div>

<!-- Recaptcha v3 -->
<script src="https://www.google.com/recaptcha/api.js?render=xxxxxxxxxxxxxxxxxxxxxxxxxxxx"></script>
<script id="js-recaptcha-init">
const RECAPTCHA_PUBLIC_KEY = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxx';
grecaptcha.ready(function() {
    // Remove badge from fixed place
    var gb = document.getElementsByClassName("grecaptcha-badge")[0];
    gb.style.position = 'absolute';
    document.getElementById('grecaptcha-box').appendChild(gb.cloneNode(true));

    gb.parentNode.removeChild(gb);

    // Do the normal recaptcha things...
    var grecaptcha_opts = {'action' : 'custom_action'};
    grecaptcha.execute(RECAPTCHA_PUBLIC_KEY, grecaptcha_opts)
        .then(function(token) {
            document.getElementById('recaptcha-token').value = token;
            document.getElementById('recaptcha-action').value = grecaptcha_opts.action;
        });
});
</script>
1
pxi