Website-Suche

javascript - ReCaptcha API v2 Gestaltung

Ich hatte bisher wenig Erfolg dabei, herauszufinden, wie man Googles neues reCAPTCHA (v2) stylt. Das endgültige Ziel ist es, es responsiv zu machen, aber ich habe Schwierigkeiten, selbst für einfache Dinge wie die Breite Styling anzuwenden.

Ihre API-Dokumentation scheint keine Angaben darüber zu machen, wie das Styling sonst gesteuert werden kann, außer über den Theme-Parameter, und einfache CSS- & JavaScript-Lösungen haben bei mir nicht funktioniert.

Im Grunde muss ich in der Lage sein, CSS auf Googles neue Version von reCaptcha anzuwenden. Die Verwendung von JavaScript damit ist akzeptabel.

Antwort #1

Übersicht:

Es tut mir leid, die schlechte Nachricht überbringen zu müssen, aber nach Recherche und Debugging ist es ziemlich klar, dass es keinen Weg gibt, das Styling der neuen reCAPTCHA-Steuerelemente anzupassen. Die Steuerelemente sind in einem iframe eingebettet, was die Verwendung von CSS zur Gestaltung verhindert, und die Same-Origin-Richtlinie verhindert, dass JavaScript auf die Inhalte zugreift, wodurch selbst eine provisorische Lösung ausgeschlossen wird.

Warum keine Anpassungs-API?:

Im Gegensatz zur reCAPTCHA-API Version 1.0 gibt es in der API Version 2.0 keine Anpassungsoptionen. Wenn wir betrachten, wie diese neue API funktioniert, ist das kein Wunder.

Auszug aus Sind Sie ein Roboter? Einführung von „No CAPTCHA reCAPTCHA“:

Auch wenn die neue reCAPTCHA-API einfach klingen mag, steckt hinter diesem bescheidenen Kontrollkästchen ein hoher Grad an Raffinesse. CAPTCHAs haben lange auf der Unfähigkeit von Robotern basiert, verzerrten Text zu erkennen. Unsere Forschung hat jedoch kürzlich gezeigt, dass die heutige künstliche Intelligenz-Technologie sogar die schwierigste Variante von verzerrtem Text mit einer Genauigkeit von 99,8 % lösen kann. Verzerrter Text allein ist daher kein verlässlicher Test mehr.

Um dem entgegenzuwirken, haben wir im letzten Jahr ein Advanced Risk Analysis-Backend für reCAPTCHA entwickelt, das aktiv die gesamte Interaktion eines Nutzers mit dem CAPTCHA berücksichtigt - davor, währenddessen und danach -, um festzustellen, ob dieser Nutzer ein Mensch ist. Dies ermöglicht es uns, weniger auf das Eingeben verzerrter Texte zu setzen und dadurch ein besseres Erlebnis für die Nutzer zu bieten. Darüber haben wir Anfang dieses Jahres in unserem Valentinstagsbeitrag gesprochen.

Wenn Sie in der Lage wären, das Styling der Steuerelemente direkt zu manipulieren, könnten Sie leicht in die Benutzerprofiling-Logik eingreifen, die das neue reCAPTCHA ermöglicht.

Wie wäre es mit einem benutzerdefinierten Thema?

Jetzt bietet die neue API die theme-Option, mit der Sie ein voreingestelltes Theme wie light und dark auswählen können. Es gibt jedoch derzeit keine Möglichkeit, ein benutzerdefiniertes Theme zu erstellen. Wenn wir das iframe untersuchen, werden wir feststellen, dass der theme-Name in der Abfragezeichenfolge des src-Attributs übergeben wird. Diese URL sieht ungefähr wie folgt aus.

https://www.google.com/recaptcha/api2/anchor?...&theme=dark&...

Dieser Parameter bestimmt, welcher CSS-Klassenname auf dem Wrapper-Element im iframe verwendet wird und legt das voreingestellte Thema fest, das verwendet werden soll.

Beim Durchsuchen des minifizierten Quellcodes habe ich festgestellt, dass es tatsächlich 4 gültige Themenwerte gibt, was mehr ist als die in der Dokumentation aufgeführten 2, aber default und standard sind dasselbe wie light.

Wir können hier den Code sehen, der den Klassennamen aus diesem Objekt auswählt.

Es gibt keinen Code für ein benutzerdefiniertes Thema, und wenn ein anderer theme-Wert angegeben wird, wird das standard-Thema verwendet.

Abschließend:

Derzeit gibt es keine Möglichkeit, die neuen reCAPTCHA-Elemente vollständig zu gestalten; nur die Umhüllungselemente um das iframe können gestaltet werden. Dies wurde fast sicher absichtlich gemacht, um zu verhindern, dass Benutzer die Benutzerprofilierungslogik, die das neue captcha-freie Kontrollkästchen ermöglicht, unterbrechen. Es ist möglich, dass Google eine begrenzte API für benutzerdefinierte Themen implementieren könnte, die es Ihnen ermöglicht, benutzerdefinierte Farben für bestehende Elemente auszuwählen, aber ich würde nicht erwarten, dass Google vollständiges CSS-Styling implementiert.

Antwort #2

Wie die Jungs oben erwähnt haben, gibt es im Moment keine Möglichkeit. Aber trotzdem, wenn jemand interessiert ist, kann man durch Hinzufügen von nur zwei Zeilen es zumindest vernünftig aussehen lassen. Wenn es auf irgendeinem Bildschirm kaputt geht, kann man im @media-Query einen anderen Wert zuweisen.

<div id="recaptchaContainer" style="transform:scale(0.8);transform-origin:0 0"></div>

Hoffe, das hilft irgendjemandem :-)

Antwort #3

Ich benutze den folgenden Trick, um es responsiv zu machen und die Ränder zu entfernen. Dieser Trick kann möglicherweise die Recaptcha-Nachricht/Fehlermeldung verbergen.

Dieser Stil ist für RTL-Sprachen, aber Sie können ihn leicht ändern.

.g-recaptcha {
    position: relative;
    width: 100%;
    background: #f9f9f9;
    overflow: hidden;
}

.g-recaptcha > * {
    float: right;
    right: 0;
    margin: -2px -2px -10px;/*remove borders*/ 
}

.g-recaptcha::after{
    display: block;
    content: "";
    position: absolute;
    left:0;
    right:150px;
    top: 0;
    bottom:0;
    background-color: #f9f9f9;
    clear: both;
}

<div class="g-recaptcha" data-sitekey="Your Api Key"></div>
<script src='https://www.google.com/recaptcha/api.js?hl=fa'></script>

Verwandte Artikel