Design von reCAPTCHA anpassen

Wichtig: Version 1.0 der reCAPTCHA API wird nicht mehr unterstützt. Führen Sie ein Upgrade auf Version 2.0 aus. Weitere Informationen

Nachdem Sie reCAPTCHA auf Ihrer Website installiert haben, können Sie das Aussehen ändern. Diese Seite erklärt: (1) Wie wird eines der reCAPTCHA-Standardthemen ausgewählt? (2) Darstellung von reCAPTCHA vollständig anpassen und (3) reCAPTCHA internationalisieren, indem du die Sprache des Widgets änderst.

Standarddesigns

Damit das reCAPTCHA-Widget ein anderes Design anzeigt, müssen Sie zuerst den folgenden Code in die Haupt- HTML-Seite an einer beliebigen Stelle vor <form> -Element, in dem reCAPTCHA angezeigt wird. Dies funktioniert nicht, wenn nach dem Hauptskript platziert, in dem reCAPTCHA zuerst aufgerufen wird):

 <script type="text/javascript">
 var RecaptchaOptions = {
    theme : 'theme_name'
 };
 </script>

Wenn Sie ein Standarddesign verwenden möchten, müssen Sie 'theme_name' durch eines der folgenden vier Designs ersetzen Namen:

'rot' (Standarddesign)	'white'
"blackglass"	‚Clean‘“

Benutzerdefinierte Designs

Mit benutzerdefinierten Designs können Sie genau steuern, wie das reCAPTCHA-Image angezeigt wird. Hier finden Sie eine Demo für benutzerdefinierte Themen. Um die benutzerdefinierten Designs verwenden, müssen Sie zuerst die Eigenschaft "theme" von RecaptchaOptions auf "custom" setzen. Dieses teilt reCAPTCHA mit, dass keine eigene Benutzeroberfläche erstellt werden soll. Für reCAPTCHA ist das Vorhandensein von HTML-Elemente mit den folgenden IDs, die dem Nutzer das CAPTCHA anzeigen:

• Ein leeres div-Element mit der ID recaptcha_image. An dieser Stelle wird das Bild platziert. Das div-Element hat eine Größe von 300 x 57 Pixel.
• Eine Texteingabe mit ID und Name, die beide festgelegt sind an recaptcha_response_field. Hier können Nutzende Antwort eingeben.
• Optional: ein div-Element, das das gesamte reCAPTCHA enthält Widget. Dieses ID-div-Element sollte custom_theme_widget und der Stil des div-Elements auf display:none festgelegt werden. Nach dem reCAPTCHA-Themencode vollständig geladen wurde, wird das div-Element sichtbar. Mit diesem Element wird verhindert, sodass die Seite während des Ladens flackert.

Um all dies zu implementieren, fügen Sie den folgenden Code auf Ihrer HTML-Hauptseite an einer beliebigen Stelle vor dem <form>-Tag ein. -Element, in dem reCAPTCHA angezeigt wird:

 <script type="text/javascript">
 var RecaptchaOptions = {
    theme : 'custom',
    custom_theme_widget: 'recaptcha_widget'
 };
 

Fügen Sie dann im <form>-Tag -Element an der Stelle, an der reCAPTCHA angezeigt werden soll, platzieren Sie Folgendes:

 <div id="recaptcha_widget" style="display:none">

   <div id="recaptcha_image"></div>
   <div class="recaptcha_only_if_incorrect_sol" style="color:red">Incorrect please try again</div>

   <span class="recaptcha_only_if_image">Enter the words above:</span>
   <span class="recaptcha_only_if_audio">Enter the numbers you hear:</span>

   <input type="text" id="recaptcha_response_field" name="recaptcha_response_field" />

   <div><a href="javascript:Recaptcha.reload()">Get another CAPTCHA</a></div>
   <div class="recaptcha_only_if_image"><a href="javascript:Recaptcha.switch_type('audio')">Get an audio CAPTCHA</a></div>
   <div class="recaptcha_only_if_audio"><a href="javascript:Recaptcha.switch_type('image')">Get an image CAPTCHA</a></div>

   <div><a href="javascript:Recaptcha.showhelp()">Help</a></div>

 </div>

 <script type="text/javascript"
    src="http://www.google.com/recaptcha/api/challenge?k=your_public_key">
 </script>
 <noscript>
   <iframe src="http://www.google.com/recaptcha/api/noscript?k=your_public_key"
        height="300" width="500" frameborder="0"></iframe><br>
   <textarea name="recaptcha_challenge_field" rows="3" cols="40">
   </textarea>
   <input type="hidden" name="recaptcha_response_field"
        value="manual_challenge">
 </noscript>

Beachten Sie, dass die letzten Zeilen lediglich die Standarddarstellung von reCAPTCHA darstellen, die in der Einführung erläutert wurde. dieses Leitfadens.

Im obigen Code passiert Folgendes: Das Recaptcha-JavaScript-Objekt bietet Methoden, mit denen Sie CAPTCHA-Status ändern Die Methode reload zeigt eine neue CAPTCHA-Abfrage an und die Methode switch_type schaltet zwischen Bild- und Audio-CAPTCHAs um. Um eine vollständige Benutzeroberfläche für reCAPTCHA zu erstellen, werden unterschiedliche Informationen angezeigt, wenn sich das CAPTCHA in unterschiedlichen Bundesstaaten befindet. Wenn sich der Nutzer beispielsweise eine Bild-CAPTCHA, ein Link zu „Audio-CAPTCHA abrufen“ angezeigt wird. Es stehen vier CSS-Klassen zur Verfügung, mit denen Sie eine zustandsorientierte UI:

CSS-Klasse	Sichtbar, wenn...
recaptcha_only_if_image	Ein CAPTCHA mit einem Bild wird angezeigt
recaptcha_only_if_audio	Ein Audio-CAPTCHA wird angezeigt
recaptcha_only_if_incorrect_sol	Die vorherige Lösung war falsch
recaptcha_only_if_no_incorrect_sol	Die vorherige Lösung war nicht falsch

Die Themengestaltung bietet Ihnen zwar viele Optionen, Sie müssen jedoch einige Konsistenzregeln für die Benutzeroberfläche beachten:

• Sie müssen angeben, dass Sie reCAPTCHA in der Nähe des CAPTCHA-Widgets verwenden.
• Sie müssen eine sichtbare Schaltfläche zum Aufrufen der Neuladefunktion bereitstellen.
• Sie müssen Nutzern einer Sehbehinderung die Möglichkeit bieten, auf ein Audio-CAPTCHA zuzugreifen.
• Sie müssen Alt-Text für alle Bilder angeben, die Sie im reCAPTCHA-Widget als Schaltflächen verwenden.

Internationalisierung: Sprache des Widgets ändern

Es gibt zwei Möglichkeiten, das reCAPTCHA-Widget zu internationalisieren:

Integrierte Übersetzungen

Für reCAPTCHA gibt es eine Reihe von integrierten Übersetzungen. Sie können sie verwenden, indem Sie den lang-Parameter des RecaptchaOptions:

<script type="text/javascript">
var RecaptchaOptions = {
   lang : 'fr',
};
</script>

Benutzerdefinierte Übersetzungen

Wenn es keine Übersetzung für Ihre Sprache gibt, können Sie eine eigene Übersetzung erstellen. Sie müssen alle Zeichenfolgen in reCAPTCHA-JavaScript und lege „custom_translations“ fest. von RecaptchaOptions. Alle Zeichenfolgen, die Sie nicht festlegen, werden aus der Standardübersetzung für Ihr Sprache. Sie können diese Option verwenden, um nur einen Teil einer Standardübersetzung zu überschreiben (z.B. wenn die von uns ausgewählte Übersetzung nicht zu Ihrer Region passen). Beispiel:

<script type= "text/javascript">
var RecaptchaOptions = {
   custom_translations : { instructions_visual : "This is my text:" }
};
</script>

Hier ist ein Beispiel für eine benutzerdefinierte italienische Übersetzung. Fügen Sie diesen Code vor dem Aufruf von reCAPTCHA ein:

<script type="text/javascript">
        var RecaptchaOptions = {
                custom_translations : {
                        instructions_visual : "Scrivi le due parole:",
                        instructions_audio : "Trascrivi ci\u00f2 che senti:",
                        play_again : "Riascolta la traccia audio",
                        cant_hear_this : "Scarica la traccia in formato MP3",
                        visual_challenge : "Modalit\u00e0 visiva",
                        audio_challenge : "Modalit\u00e0 auditiva",
                        refresh_btn : "Chiedi due nuove parole",
                        help_btn : "Aiuto",
                        incorrect_try_again : "Scorretto. Riprova.",
                },
                lang : 'it', // Unavailable while writing this code (just for audio challenge)
                theme : 'red' // Make sure there is no trailing ',' at the end of the RecaptchaOptions dictionary
        };
</script>

Referenz zu reCAPTCHAOptions

Die folgenden Felder können im Wörterbuch von RecaptchaOptions festgelegt werden:

Schlüssel	Mögliche Werte	Standardwert	Bedeutung
Design	'rot' | 'white' | "blackglass" | ‚Clean‘“ | 'Benutzerdefiniert'	'Rot'	Definiert, welches Thema für reCAPTCHA verwendet werden soll. Die Designs in Rot, Weiß, Schwarz und Klar sind vordefinierte Themen, bei denen reCAPTCHA die Benutzeroberfläche bereitstellt. Wählen Sie im benutzerdefinierten Design Ihre Website hat die volle Kontrolle über die Darstellung von reCAPTCHA.
Sprache	Beliebiger unterstützter Sprachcode.	„de“	Die Sprache, die in der Benutzeroberfläche für die vordefinierten Themen. Folgende Sprachen werden unterstützt: Sprache Code Englisch de Niederländisch nl Französisch fr Deutsch de Portugiesisch pt Russisch ru Spanisch es Türkisch tr Wenn die Sprache Ihrer Website nicht unterstützt wird, können Sie benutzerdefinierte Designs verwenden, um reCAPTCHA in Ihre Website einzufügen. Sprache.
custom_translations	Ein Wörterbuch mit Übersetzungen	null	Hiermit können Sie benutzerdefinierte Übersetzungen von reCAPTCHA-Strings angeben.
custom_theme_widget	String mit der ID eines DOM-Elements	null	Bei benutzerdefinierten Designs ist dies ein div-Element, das das Widget enthält. Informationen zur Verwendung finden Sie im Abschnitt zu benutzerdefinierten Themen.
Tabindex	Beliebige Ganzzahl	0	Legt ein Tabindex für das reCAPTCHA-Textfeld. Wenn andere Elemente im Formular ein „tabindex“ (Tabindex) sollte festgelegt werden, damit die Navigation für den Nutzer einfacher ist.

Dieses Skript-Tag sorgt beispielsweise dafür, dass reCAPTCHA ein weißes Design und Tabindex 2 hat:

<script>
var RecaptchaOptions = {
   theme : 'white',
   tabindex : 2
};
</script>