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 Erscheinungsbild ändern. Auf dieser Seite erfahren Sie, wie Sie (1) eines der Standardthemen für reCAPTCHA auswählen, (2) das Erscheinungsbild von reCAPTCHA vollständig anpassen und (3) reCAPTCHA durch Ändern der Sprache des Widgets internationalisieren.

Standarddesigns

Wenn Sie das reCAPTCHA-Widget mit einem anderen Design anzeigen lassen möchten, fügen Sie den folgenden Code in Ihrer Haupt-HTML-Seite vor dem <form>-Element ein, in dem reCAPTCHA angezeigt wird. Wenn Sie den Code nach dem Hauptscript einfügen, in dem reCAPTCHA zuerst aufgerufen wird, funktioniert das nicht:

 <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 festlegen, wie das reCAPTCHA-Bild 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. Dadurch wird reCAPTCHA mitgeteilt, dass es keine eigene Benutzeroberfläche erstellen soll. reCAPTCHA prüft, ob HTML-Elemente mit den folgenden IDs vorhanden sind, um dem Nutzer das CAPTCHA anzuzeigen:

• 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 kann der Nutzer seine 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. Dieses Element verhindert, dass die Seite beim Laden 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 den Status des CAPTCHA ändern können. 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 verschiedenen Status befindet. Wenn der Nutzer beispielsweise ein Bild-CAPTCHA sieht, wird der Link „Audio-CAPTCHA anzeigen“ angezeigt. 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 nicht falsch war

Bei der Gestaltung von Designs haben Sie zwar viele Möglichkeiten, aber Sie müssen einige Regeln für die Einheitlichkeit der 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 sehbehinderten Nutzern die Möglichkeit geben, auf ein Audio-CAPTCHA zuzugreifen.
• Sie müssen für alle Bilder, die Sie als Schaltflächen im reCAPTCHA-Widget verwenden, einen Alt-Text angeben.

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 diese verwenden, indem Sie den lang-Parameter der 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 Designs verwendet wird. 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>