webentwicklung-frage-antwort-db.com.de

Wie setzen Sie die Badge-Position mit reCAPTCHA v3?

Ich möchte ein Inline-Badge mit Version 3 verwenden, es gibt jedoch keine Dokumentation zur Position des Badges für Version 3.

Sie können das Abzeichen in V3 mit nur Inline machen, es ist nur noch nicht dokumentiert.


Stellen Sie Ihren render-Parameter auf explicit und fügen Sie einen onload-Parameter für den Rückruf hinzu, beispielsweise onRecaptchaLoadCallback.

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

Dann richten Sie Ihren Rückruf so ein und vergessen Sie nicht, die ID/das Element anzugeben, an dem sich Ihr Badge befinden soll. In diesem Fall lautet die ID 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>

Beispiel

Quelle

6
Sam Carlton

Ich ändere einfach das CSS für die Klasse "grecaptcha-badge" wie folgt: 

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

Nach der Ausführung können Sie das Abzeichen mit Javascript verschieben. Es wird Recaptcha Timeout Fehler in Firefox und chrome Browser behoben.

grecaptcha.ready(function() {  
        grecaptcha.execute('sitekey', {actienter code hereon: 'loginpage'}).then(function(token) {
               /* Move Google Badge to your Div ID */
               jQuery('.grecaptcha-badge').appendTo("#g-badge-newlocation");
        });
    });
1
Mahesh V

EDIT1: Antwort mit den render=explicit-Parametern. Diese Antwort funktioniert immer noch, aber bevor diese Funktion dokumentiert wurde, ist sie nicht so sauber.


Ich habe es geschafft, genau das zu tun, indem ich eine relative Box platzierte und den reCaptcha v3-Badge abnahm. Anschließend werden einige Stilanpassungen am Container vorgenommen.

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

Dann platzieren Sie die Box gefolgt von Ihrem 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

Stellen Sie es einfach im div-Bereich ein

<div vc-recaptcha
badge="bottomleft"
>
</div>
1

Sie können dies in Ihr sass oder css aufnehmen, um es links auszurichten und die Schwebefunktion aktiv zu halten.

.grecaptcha-badge {
  width: 70px !important;
  overflow: hidden !important;
  transition: all 0.3s ease !important;
  left: 4px !important;
}

.grecaptcha-badge:hover {
  width: 256px !important;
}
0
Sumith