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 erfolgreich auf Ihrer Website installiert haben, sollten Sie die Darstellung ändern. Auf dieser Seite wird erläutert, (1) wie Sie eines der reCAPTCHA-Standarddesigns auswählen, (2) wie Sie die Darstellung von reCAPTCHA vollständig anpassen und (3) wie Sie reCAPTCHA durch eine Änderung der Widget-Sprache internationalisieren.

Standarddesigns

Damit das reCAPTCHA-Widget ein anderes Design anzeigen kann, müssen Sie den folgenden Code auf Ihrer HTML-Hauptseite an einer beliebigen Stelle vor dem <form>-Element einfügen, in dem reCAPTCHA angezeigt wird. Dies funktioniert nicht, wenn es nach dem Hauptskript zum ersten Mal 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 einen der folgenden vier Themennamen ersetzen:

„Rot“ (Standarddesign)	'white' [white]
"blackglass"	'säubern'

Benutzerdefinierte Designs

Mit benutzerdefinierten Motiven können Sie genau steuern, wie das reCAPTCHA-Bild angezeigt wird. (Hier finden Sie eine Demo für benutzerdefinierte Designs.) Wenn Sie benutzerdefinierte Designs verwenden möchten, müssen Sie zuerst die Theme-Property von RecaptchaOptions auf „custom“ setzen. Dadurch wird reCAPTCHA angewiesen, keine eigene Benutzeroberfläche zu erstellen. reCAPTCHA nutzt das Vorhandensein von HTML-Elementen mit den folgenden IDs, um dem Nutzer das CAPTCHA anzuzeigen:

• Ein leeres div-Element mit der ID recaptcha_image. Dort wird das eigentliche Bild platziert. Das div-Element hat eine Größe von 300 x 57 Pixeln.
• Eine Texteingabe mit ID und Name, die beide auf recaptcha_response_field festgelegt sind. Hier kann der Nutzer seine Antwort eingeben.
• Optional: ein div-Element, das das gesamte reCAPTCHA-Widget enthält. Dieses ID-Div sollte in custom_theme_widget platziert und der Stil des div-Elements auf display:none festgelegt werden. Nachdem der reCAPTCHA-Motivcode vollständig geladen wurde, wird das div-Element sichtbar. Durch dieses Element wird verhindert, dass die Seite während des Ladevorgangs flackert.

Um all dies zu implementieren, platzieren Sie den folgenden Code zuerst in Ihrer HTML-Hauptseite an einer beliebigen Stelle vor dem <form>-Element, in dem reCAPTCHA angezeigt wird:

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

Platzieren Sie dann im <form>-Element, wo reCAPTCHA angezeigt werden soll, 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 Standardmethode zum Anzeigen von reCAPTCHA sind, wie in der Einführung dieses Leitfadens erläutert.

Hier sehen Sie, was im obigen Code passiert. Das reCAPTCHA-JavaScript-Objekt bietet Methoden, mit denen Sie den CAPTCHA-Status ändern können. Mit der Methode reload wird eine neue CAPTCHA-Aufgabe angezeigt und mit der Methode switch_type kann zwischen Bild- und Audio-CAPTCHAs gewechselt werden. Um eine vollständige UI für reCAPTCHA zu erstellen, werden verschiedene Informationen angezeigt, wenn sich das CAPTCHA in verschiedenen Zuständen befindet. Wenn sich der Nutzer beispielsweise ein CAPTCHA für ein Bild ansieht, wird ein Link zu einem Audio-CAPTCHA angezeigt. Es stehen vier CSS-Klassen zur Verfügung, mit denen Sie eine zustandsorientierte UI erstellen können:

CSS-Klasse	Sichtbar, wenn...
recaptcha_only_if_image	Ein CAPTCHA für ein 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.

Auch wenn Designs viele Optionen bieten, müssen Sie einige Konsistenzregeln für Benutzeroberflächen einhalten:

• Geben Sie an, dass Sie reCAPTCHA in der Nähe des CAPTCHA-Widgets verwenden.
• Sie müssen eine sichtbare Schaltfläche zum Aufrufen der Aktualisierungsfunktion bereitstellen.
• Sie müssen sehbehinderten Nutzern den Zugriff auf ein Audio-CAPTCHA ermöglichen.
• 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

reCAPTCHA verfügt über eine Reihe von integrierten Übersetzungen. Sie können sie verwenden, indem Sie den Parameter „lang“ von RecaptchaOptions festlegen:

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

Benutzerdefinierte Übersetzungen

Falls für Ihre Sprache keine Übersetzung verfügbar ist, können Sie eine eigene erstellen. Sie müssen alle Strings im reCAPTCHA-JavaScript übersetzen und die Variable „custom_translations“ von RecaptchaOptions festlegen. Strings, die Sie nicht festlegen, werden aus der Standardübersetzung für Ihre Sprache übernommen. Hiermit können Sie nur einen Teil einer Standardübersetzung überschreiben, z.B. wenn die von uns ausgewählte Übersetzung nicht zu Ihrer Region passt. Beispiel:

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

Hier ist ein funktionierendes 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 RecaptchaOptions-Wörterbuch festgelegt werden:

Schlüssel	Mögliche Werte	Standardwert	Bedeutung
Design	'rot' | 'weiß' | 'schwarzes glas' | 'sauber' | 'benutzerdefiniert'	'rot'	Definiert, welches Design für reCAPTCHA verwendet werden soll. Die Designs rot, weiß, schwarz und sauber sind vordefinierte Designs, bei denen reCAPTCHA die Benutzeroberfläche bereitstellt. Im benutzerdefinierten Design hat Ihre Website volle Kontrolle über die Darstellung von reCAPTCHA.
lang	Jeder unterstützte Sprachcode.	'de'	Die Sprache, die in der Benutzeroberfläche für die vordefinierten Themen verwendet wird. Folgende Sprachen werden unterstützt: Sprache Code Englisch en 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 jederzeit benutzerdefinierte Designs verwenden, um reCAPTCHA in Ihrer Sprache bereitzustellen.
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	Wenn Sie ein benutzerdefiniertes Design verwenden, ist dies ein div-Element, das das Widget enthält. Weitere Informationen hierzu finden Sie im Abschnitt zu benutzerdefinierten Designs.
Tabindex	beliebige Ganzzahl	0	Legt einen tabindex für das reCAPTCHA-Textfeld fest. Wenn für andere Elemente im Formular ein Tabindex verwendet wird, sollte dieser festgelegt werden, um die Navigation für den Nutzer zu vereinfachen.

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

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