it-swarm.com.de

ReCaptcha API v2 Styling

Ich hatte nicht viel Erfolg bei der Suche nach dem neuen Recaptcha von Google (v2). Das letztendliche Ziel besteht darin, es ansprechbar zu machen, aber ich habe Schwierigkeiten, das Styling auch für einfache Dinge wie Breite anzuwenden.

Ihre API-Dokumentation scheint keine Details zur Steuerung des Stylings zu geben, außer dem theme -Parameter. Einfache CSS- und JavaScript-Lösungen haben für mich nicht funktioniert.

Grundsätzlich muss ich CSS auf die neue Version von reCaptcha von Google anwenden können. Die Verwendung von JavaScript ist akzeptabel.

95
jhawes

Überblick:

Es tut uns leid, der Antwortende für schlechte Nachrichten zu sein, aber nach Recherchen und Debugging ist es ziemlich klar, dass es keine Möglichkeit gibt, das Styling der neuen reCAPTCHA-Steuerelemente anzupassen. Die Steuerelemente sind in eine iframe eingeschlossen, die die Verwendung von CSS zum Stilisieren verhindert, und Same-Origin-Richtlinie verhindert, dass JavaScript auf den Inhalt zugreift und sogar eine harte Lösung ausschließt.

Warum keine API anpassen ?:

Im Gegensatz zu reCAPTCHA API Version 1.0 gibt es in API Version 2.0 keine benutzerdefinierten Optionen. Wenn wir überlegen, wie diese neue API funktioniert, ist es kein Wunder, warum.

Auszug aus Bist du ein Roboter? Einführung von "No CAPTCHA reCAPTCHA" :

Obwohl die neue reCAPTCHA-API einfach klingt, steckt hinter dieser bescheidenen Checkbox ein hohes Maß an Raffinesse. CAPTCHAs haben sich seit langem darauf verlassen, dass Roboter verzerrten Text nicht lösen können. Unsere Forschung hat jedoch kürzlich gezeigt, dass die heutige künstliche Intelligenztechnologie selbst die schwierigste Variante von verzerrtem Text mit einer Genauigkeit von 99,8% lösen kann. So ist verzerrter Text allein 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 Bindung des Benutzers mit dem CAPTCHA vor, während und nach dem Zeitpunkt berücksichtigt, um festzustellen, ob es sich bei diesem Benutzer um einen Menschen handelt. Auf diese Weise können wir uns weniger auf das Schreiben von verzerrtem Text verlassen und damit den Benutzern ein besseres Erlebnis bieten. Wir haben darüber in unserem Valentinstag nach diesem Jahr gesprochen.

Wenn Sie das Styling der Steuerelemente direkt beeinflussen konnten, könnten Sie die Benutzerprofilierungslogik, die das neue reCAPTCHA ermöglicht, leicht beeinträchtigen.

Was ist mit einem benutzerdefinierten Thema ?:

Jetzt bietet die neue API eine theme-Option an, mit der Sie ein voreingestelltes Design auswählen können, wie light und dark. Derzeit gibt es jedoch keine Möglichkeit, ein benutzerdefiniertes Design zu erstellen. Wenn wir die 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 im Wrapper-Element in der Variablen iframe verwendet wird, und bestimmt das zu verwendende vordefinierte Design.

element class name

Beim Durchgraben der verminderten Quelle habe ich herausgefunden, dass es tatsächlich 4 gültige Themenwerte gibt, mehr als die in der Dokumentation aufgelisteten 2, aber default und standard sind die gleichen wie light.

object of classes

Hier sehen Sie den Code, der den Klassennamen aus diesem Objekt auswählt.

class choosing code

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

Abschließend:

Derzeit gibt es keine Möglichkeit, die neuen reCAPTCHA-Elemente vollständig zu gestalten. Nur die Wrapper-Elemente um die Variable iframe können stilisiert werden. Dies wurde fast sicher gewollt, um zu verhindern, dass Benutzer die Benutzerprofilierungslogik brechen, die das neue Kontrollkästchen ohne Captcha-Freiheit ermöglicht. Es ist möglich, dass Google eine eingeschränkte benutzerdefinierte Design-API implementieren kann, mit der Sie möglicherweise benutzerdefinierte Farben für vorhandene Elemente auswählen können. Ich würde jedoch nicht davon ausgehen, dass Google ein vollständiges CSS-Styling implementiert.

136

Wie oben erwähnt, gibt es keinen Geldautomaten. Aber wenn es jemanden interessiert, dann können Sie es durch das Hinzufügen von nur zwei Zeilen zumindest vernünftig aussehen lassen, wenn es auf einem Bildschirm kaputt geht. Sie können in @media query einen anderen Wert zuweisen.

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

Hoffe das hilft jemandem :-).

43
bubb

Leider können wir nicht reCaptcha v2 formatieren, aber es ist möglich, es besser aussehen zu lassen, hier ist der Code:

Klicken Sie hier, um eine Vorschau anzuzeigen

.g-recaptcha-outer{
    text-align: center;
    border-radius: 2px;
    background: #f9f9f9;
    border-style: solid;
    border-color: #37474f;
    border-width: 1px;
    border-bottom-width: 2px;
}
.g-recaptcha-inner{
    width: 154px;
    height: 82px;
    overflow: hidden;
    margin: 0 auto;
}
.g-recaptcha{
    position:relative;
    left: -2px;
    top: -1px;
}

<div class="g-recaptcha-outer">
    <div class="g-recaptcha-inner">
        <div class="g-recaptcha" data-size="compact" data-sitekey="YOUR KEY"></div>
    </div>
</div>
9
Tom Chan

Fügen Sie dem google recaptcha -Element eine Eigenschaft für die Datengröße hinzu und machen Sie diese im Fall von Mobile gleich "compact".

Verweise: google recaptcha docs

8
Sumit Maingi

Sie können Recaptcha neu erstellen, in einen Container einwickeln und nur das Kontrollkästchen sichtbar lassen. Mein Hauptproblem war, dass ich nicht die volle Breite annehmen konnte und nun auf die Breite des Containers erweitert wird. Das einzige Problem ist der Ablauf, in dem Sie einen Streifen sehen können, aber sobald es passiert, setze ich ihn zurück.

Diese Demo sehen http://codepen.io/alejandrolechuga/pen/YpmOJX

 enter image description here

function recaptchaReady () {
  grecaptcha.render('myrecaptcha', {
  'sitekey': '6Lc7JBAUAAAAANrF3CJaIjt7T9IEFSmd85Qpc4gj',
  'expired-callback': function () {
    grecaptcha.reset();
    console.log('recatpcha');
  }
});
}
.recaptcha-wrapper {
    height: 70px;
  overflow: hidden;
  background-color: #F9F9F9;
  border-radius: 3px;
  box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.08);
  -webkit-box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.08);
  -moz-box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.08);
  height: 70px;
  position: relative;
  margin-top: 17px;
  border: 1px solid #d3d3d3;
  color: #000;
}

.recaptcha-info {
  background-size: 32px;
  height: 32px;
  margin: 0 13px 0 13px;
  position: absolute;
  right: 8px;
  top: 9px;
  width: 32px;
  background-image: url(https://www.gstatic.com/recaptcha/api2/logo_48.png);
  background-repeat: no-repeat;
}
.rc-anchor-logo-text {
  color: #9b9b9b;
  cursor: default;
  font-family: Roboto,helvetica,arial,sans-serif;
  font-size: 10px;
  font-weight: 400;
  line-height: 10px;
  margin-top: 5px;
  text-align: center;
  position: absolute;
  right: 10px;
  top: 37px;
}
.rc-anchor-checkbox-label {
  font-family: Roboto,helvetica,arial,sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 17px;
  left: 50px;
  top: 26px;
  position: absolute;
  color: black;
}
.rc-anchor .rc-anchor-normal .rc-anchor-light {
  border: none;
}
.rc-anchor-pt {
  color: #9b9b9b;
  font-family: Roboto,helvetica,arial,sans-serif;
  font-size: 8px;
  font-weight: 400;
  right: 10px;
  top: 53px;
  position: absolute;
  a:link {
    color: #9b9b9b;
    text-decoration: none;
  }
}

g-recaptcha {
  // transform:scale(0.95);
  // -webkit-transform:scale(0.95);
  // transform-Origin:0 0;
  // -webkit-transform-Origin:0 0;

}

.g-recaptcha {
  width: 41px;

  /* border: 1px solid red; */
  height: 38px;
  overflow: hidden;
  float: left;
  margin-top: 16px;
  margin-left: 6px;
  
    > div {
    width: 46px;
    height: 30px;
    background-color:  #F9F9F9;
    overflow: hidden;
    border: 1px solid red;
    transform: translate3d(-8px, -19px, 0px);
  }
  div {
    border: 0;
  }
}
<script src='https://www.google.com/recaptcha/api.js?onload=recaptchaReady&&render=explicit'></script>

<div class="recaptcha-wrapper">
  <div id="myrecaptcha" class="g-recaptcha"></div>
          <div class="rc-anchor-checkbox-label">I'm not a Robot.</div>
        <div class="recaptcha-info"></div>
        <div class="rc-anchor-logo-text">reCAPTCHA</div>
        <div class="rc-anchor-pt">
          <a href="https://www.google.com/intl/en/policies/privacy/" target="_blank">Privacy</a>
          <span aria-hidden="true" role="presentation"> - </span>
          <a href="https://www.google.com/intl/en/policies/terms/" target="_blank">Terms</a>
        </div>
</div>

4
alejandro

Was Sie tun können, ist das ReCaptcha Control hinter einem div zu verbergen. Dann machen Sie Ihr Styling auf diesem Div. Und legen Sie die CSS-Datei "pointer-events: none" fest, sodass Sie durch das div klicken können ( Klicken Sie durch ein DIV auf darunterliegende Elemente ).

Das Kontrollkästchen sollte sich an einem Ort befinden, an dem der Benutzer klickt.

4
Magu

Ich benutze den Trick, um ihn ansprechend zu machen und Grenzen zu entfernen. Diese Tricks verbergen möglicherweise die Recaptcha-Nachricht/den Fehler.

Dieser Stil ist für RTL Lang, aber Sie können es einfach ä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>

 recaptcha no captcha reponsive style trick

3
Ahmad Dehnavi

Mit der Integration des unsichtbaren reCAPTCHA können Sie Folgendes tun:

Um den Invisible reCAPTCHA zu aktivieren, anstatt die Parameter in ein div zu setzen, können Sie sie direkt einer html-Schaltfläche hinzufügen.

ein. data-callback = "". Dies funktioniert genauso wie das Ankreuzfeld des Kontrollkästchens, ist aber für das Unsichtbare erforderlich.

b. Daten-Badge: Hiermit können Sie das reCAPTCHA-Badge neu positionieren (d. h. Logo und "geschützt durch reCAPTCHA" Text). Gültige Optionen als 'bottomright' (Standardeinstellung), "Bottomleft" oder "inline", wodurch die Plakette direkt über der Schaltfläche platziert wird. Wenn du Wenn Sie das Badge inline erstellen möchten, können Sie das CSS des Badges direkt steuern.

2

Fügen Sie einfach eine hack-ish-Lösung hinzu, um sie ansprechbar zu machen.

Wickeln Sie das Recaptcha in ein extra div ein:

<div class="recaptcha-wrap">                   
    <div id="g-recaptcha"></div>
</div>

Stile hinzufügen Dies setzt das dunkle Thema voraus.

// Recaptcha
.recaptcha-wrap {
    position: relative;
    height: 76px;
    padding:1px 0 0 1px;
    background:#222;
    > div {
        position: absolute;
        bottom: 2px;
        right:2px;
        font-size:10px;
        color:#ccc;
    }
}

// Hides top border
.recaptcha-wrap:after {
    content:'';
    display: block;
    background-color: #222;
    height: 2px;
    width: 100%;
    top: -1px;
    left: 0px;
    position: absolute;
}

// Hides left border
.recaptcha-wrap:before {
    content:'';
    display: block;
    background-color: #222;
    height: 100%;
    width: 2px;
    top: 0;
    left: -1px;
    position: absolute;
    z-index: 1;
}

// Makes it responsive & hides cut-off elements
#g-recaptcha {
    overflow: hidden;
    height: 76px;
    border-right: 60px solid #222222;
    border-top: 1px solid #222222;
    border-bottom: 1px solid #222;
    position: relative;
    box-sizing: border-box;
    max-width: 294px;
}

Dies ergibt folgendes:

 Recaptcha

Es wird jetzt horizontal skaliert und hat keinen Rand. Das Recaptcha-Logo würde rechts abgeschnitten, so dass ich es mit einem rechten Rand verstecke. Außerdem werden die Links zum Datenschutz und zu den Bedingungen verborgen, sodass Sie diese möglicherweise wieder hinzufügen möchten.

Ich habe versucht, eine Höhe für das Umhüllungselement festzulegen und dann das Recaptcha vertikal zu zentrieren, um die Höhe zu verringern. Leider ist jede Kombination von Überlauf: verborgen und eine geringere Höhe scheint den Iframe zu töten.

2
kthornbloom

Falls jemand mit dem Recaptcha von Kontaktformular 7 (WordPress) zu kämpfen hat, ist hier eine Lösung für mich 

.wpcf7-recaptcha{
clear: both;
float: left;
}
.wpcf7-recaptcha{
margin-right: 6px;
width: 206px;
height: 65px;
overflow: hidden;
border-right: 1px solid #D3D3D3;
}
.wpcf7-recaptcha iframe{
padding-bottom: 15px;
border-bottom: 1px solid #D3D3D3;
background: #F9F9F9;
border-left: 1px solid #d3d3d3;
}

 enter image description here

2
Ouahib Abdallah

in der V2.0 ist das nicht möglich. Der iframe blockiert alles Styling. Es ist schwierig, ein benutzerdefiniertes Design anstelle des dunklen oder hellen Themas hinzuzufügen.

2
Yacine

Großartig! Jetzt gibt es Styling für reCaptcha .. Ich benutze nur Inline-Styling wie: 

<div class="g-recaptcha" data-sitekey="XXXXXXXXXXXXXXX" style="transform: scale(1.08); margin-left: 14px;"></div> 

was auch immer Sie möchten, in Inline-Styling anpassen ...

Hoffe es wird dir helfen !!

2
Anileweb

Spät zur Party, aber vielleicht hilft meine Lösung jemandem. 

Ich habe keine Lösung gefunden, die auf einer responsiven Website funktioniert, wenn sich der Darstellungsbereich ändert oder das Layout flüssig ist.

Ich habe also ein jQuery-Skript für Django-cms erstellt, das sich dynamisch an ein sich änderndes Ansichtsfenster anpasst. Ich werde diese Antwort aktualisieren, sobald ich eine moderne Variante brauche, die modularer ist und keine jQuery-Abhängigkeit hat.


html

<div class="g-recaptcha" data-sitekey="{site_key}" data-size={size}> 
</div> 


css

.g-recaptcha { display: none; }

.g-recaptcha.g-recaptcha-initted { 
    display: block; 
    overflow: hidden; 
}

.g-recaptcha.g-recaptcha-initted > * {
    transform-Origin: top left;
}


js

window.djangoReCaptcha = {
    list: [],
    setup: function() {
        $('.g-recaptcha').each(function() {
            var $container = $(this);
            var config = $container.data();

            djangoReCaptcha.init($container, config);
        });

        $(window).on('resize orientationchange', function() {
            $(djangoReCaptcha.list).each(function(idx, el) {
                djangoReCaptcha.resize.apply(null, el);
            });
        });
    },
    resize: function($container, captchaSize) {
        scaleFactor = ($container.width() / captchaSize.w);
        $container.find('> *').css({
            transform: 'scale(' + scaleFactor + ')',
            height: (captchaSize.h * scaleFactor) + 'px'
        });
    },
    init: function($container, config) {
        grecaptcha.render($container.get(0), config);

        var captchaSize, scaleFactor;
        var $iframe = $container.find('iframe').eq(0);

        $iframe.on('load', function() {
            $container.addClass('g-recaptcha-initted');
            captchaSize = captchaSize || { w: $iframe.width() - 2, h: $iframe.height() };
            djangoReCaptcha.resize($container, captchaSize);
            djangoReCaptcha.list.Push([$container, captchaSize]);
        });
    },
    lateInit: function(config) {
        var $container = $('.g-recaptcha.g-recaptcha-late').eq(0).removeClass('.g-recaptcha-late');
        djangoReCaptcha.init($container, config);
    }
};

window.djangoReCaptchaSetup = window.djangoReCaptcha.setup;
1
nirazul

Wenn noch jemand interessiert ist, gibt es eine einfache Javascript-Bibliothek (keine jQuery-Abhängigkeit) mit dem Namen custom recaptcha. Sie können die Schaltfläche mit css anpassen und einige js-Ereignisse implementieren (ready/checked). Die Idee ist, das Standard-Recaptcha "unsichtbar" zu machen und eine Schaltfläche darüber zu platzieren. Ändern Sie einfach die ID des Recaptcha und das ist es.

<head>
    <script src="https://azentreprise.org/download/custom-recaptcha.min.js"></script>
    <style type="text/css">
        #captcha {
            float: left;
            margin: 2%;

            background-color: rgba(72, 61, 139, 0.5); /* darkslateblue with 50% opacity */
            border-radius: 2px;

            font-size: 1em;
            color: #C0FFEE;
        }

        #captcha.success {
            background-color: rgba(50, 205, 50, 0.5); /* limegreen with 50% opacity */
            color: limegreen;
        }
    </style>
</head>
<body>
    <div id="captcha" data-sitekey="your_site_key" data-label="Click here" data-label-spacing="15"></div>
</body>

Weitere Informationen finden Sie unter https://azentreprise.org/read.php?id=1 .

0
TheDreamer979

Ich füge nur diese Art von Lösung/Quick Fix hinzu, damit sie im Falle eines defekten Links nicht verloren geht. 

Link zu dieser Lösung "Möchten Sie einen Link hinzufügen So ändern Sie die Größe des Google noCAPTCHA reCAPTCHA | The Geek Goddess" wurde von Vikram Singh Saini zur Verfügung gestellt und beschreibt lediglich, dass Sie das Inline-CSS verwenden können, um das Framing des Iframes zu erzwingen .

// Scale the frame using inline CSS
 <div class="g-recaptcha" data-theme="light" 
 data-sitekey="XXXXXXXXXXXXX" 

 style="transform:scale(0.77);
 -webkit-transform:scale(0.77);
 transform-Origin:0 0;
  -webkit-transform-Origin:0 0;

 ">
</div> 

// Scale the images using a stylesheet
<style>
#rc-imageselect, .g-recaptcha {
  transform:scale(0.77);
  -webkit-transform:scale(0.77);
  transform-Origin:0 0;
  -webkit-transform-Origin:0 0;
}
</style>
0
leopold

Sie können CSS für Google reCAPTCHA v2 styling auf Ihrer Website verwenden:

- Hintergrund und Farbe des Google reCAPTCHA v2-Widgets ändern:

.rc-anchor-light { 
background: #fff!important; 
color: #fff!important; }

oder

.rc-anchor-normal{
background: #000 !important; 
color: #000 !important; }

- Ändern Sie die Größe des Google reCAPTCHA v2-Widgets mithilfe des folgenden Snippets:

.rc-anchor-light { 
transform:scale(0.9); 
-webkit-transform:scale(0.9); }

- Responsive für Ihr Google reCAPTCHA v2:

@media only screen and (min-width: 768px) {
.rc-anchor-light { 
transform:scale(0.85); 
-webkit-transform:scale(0.85); } 
}

Alle Elemente, Eigenschaft von CSS darüber, dient nur als Referenz. Sie können sie selbst ändern (nur mithilfe des CSS-Klassenselektors).

Weitere Informationen finden Sie im OIW-Blog - So bearbeiten Sie CSS von Google reCAPTCHA (Umgestalten, Position ändern, Größe von reCAPTCHA ändern) 

Dort finden Sie auch das Styling von Google reCAPTCHA v3.

0
OIW