web-dev-qa-db-de.com

Problem mit der Positionierung des unsichtbaren Recaptcha-Abzeichens

Ich habe vor kurzem mit der neuen Recaptcha-Methode von Google begonnen - der neuen Invisible Recaptcha. Ich erkannte, dass die Implementierung dieser Version etwas anders war, als Sie die Recaptcha-Attribute direkt an Ihren Submit-Button anhängen, der dann die Recaptcha-API von Google aufruft und den Überprüfungsprozess startet. Ich habe alles gut funktioniert, aber das einzige große Problem, das ich habe, betrifft die Positionierung der Position "Protected by Recaptcha". 

Nachdem ich die Recaptcha-Konfiguration zum Senden-Button hinzugefügt habe, sehe ich rechts neben meinem Bildschirm den Badge. Laut anderen Websites soll dieses Abzeichen lediglich ein quadratisches Recaptcha-Logo sein, bis es schwebt und dann zu dem großen Rechteck gleitet, das ich anfangs auf meiner Website sehe. 

Hier sehen Sie ein Bild von dem, was ich auf meiner Website nach der Implementierung des unsichtbaren Recaptcha sehe. 

 recaptcha issue

Hier ist der Code zum Senden der Schaltfläche, der die Recaptcha-Attribute enthält:

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

Hinweis: Die anderen data-badge-Optionen wie inline und bottomleft verursachen dieselben Positionierungsprobleme.

Der Code des Formulars, das die Schaltfläche enthält:

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

Ich habe zwei Probleme mit diesem Recaptcha-Abzeichen:

  1. Das Abzeichen wird außerhalb seiner Begrenzungsrahmen-/Grenztyp-Sache gestört
  2. Es wird auch nicht teilweise außerhalb des Bildschirms positioniert, bis es schwebt, wie es sein sollte. Ich sehe das vollständige Rechteck, bevor ich mit der Maus auf irgendeine Weise damit interagiere. Ich sollte das quadratische Logo sehen, bis ich darüber schwebe und es zum vollständigen Rechteck herausgleitet.

Grundsätzlich muss ich herausfinden, wie ich das richtig positionieren kann, so dass es wie erwartet von dem Bildschirm abrutscht und richtig innerhalb des Randes enthalten ist.

Google Chrome Developer-Tools sagen mir, dass dies die aktuellen Attribute des badge div sind, die beim Laden des Fensters generiert werden:

 enter image description here

Ich freue mich über jede Hilfe, die Sie leisten können! Wenn ich nicht der Meinung bin, dass der Ausweis erforderlich ist, korrigieren Sie mich bitte und ich werde das Entfernen mit CSS erzwingen. Ich befürchte jedoch, dass dies den Captcha-Überprüfungsprozess stören und gegen die Richtlinien von Google verstoßen kann.

7
pattyd

Dies kann hilfreich sein: https://developers.google.com/recaptcha/docs/invisible#config

Sie können data-badge="inline" so einstellen, dass Sie das CSS steuern können.

5
DFSOKO

Nach langem Ausprobieren stellte ich fest, dass sich das Recaptcha-Abzeichen eher zu seinem übergeordneten Element als zu seinem Körper befand und dass es auch seinen line-height von seinem übergeordneten Element erbte.

Da ich das Abzeichen nicht direkt aus dem enthaltenen Element entfernen und in den Körper verschieben konnte, habe ich das Problem mit JQuery und einer geringfügigen CSS-Änderung gelöst.

JQuery: Das Badge wurde zum Hauptteil und nicht zu dem darin enthaltenen Element (dem Formular) hinzugefügt.

Dafür musste ich sicherstellen, dass der Ausweis bereits vollständig in die Site geladen wurde. Google macht das schwierig, aber ich konnte es mit jQuery.initialize per timpler machen.

Nachdem ich die Datei initialize.min.js auf meiner Seite ausgeführt hatte, habe ich einfach diesen Code verwendet:

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: Eine Änderung an line-height wurde hinzugefügt, um das Badge richtig in seinem Container zu positionieren

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

Das war schwer zu klären, aber am Ende kam es nur darauf an, dass er einige zu viele Attribute von seinem Elternteil erbte. Ich hoffe das hilft in Zukunft jemandem weiter!

4
pattyd

Sie können das Captcha in einem div-Element an beliebiger Stelle auf der Seite einfügen

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

Wenn Sie das Formular absenden, sollte das folgende Javascript aufgerufen werden, um die Captcha-Validierung zu starten

grecaptcha.execute();

Die onSubmit-Funktion (in data-callback-Tagattribut angegeben) wird bei erfolgreicher Captcha-Validierung aufgerufen. Dort erhalten Sie das Recaptcha-Token, das als verstecktes Feld in Ihr Formular für die Backend-Validierung eingefügt werden kann.

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