Dostosowywanie wyglądu i sposobu działania reCAPTCHA

Ważne: interfejs API reCAPTCHA w wersji 1.0 nie jest już obsługiwany. Uaktualnij go do wersji 2.0. Więcej informacji

Po pomyślnym zainstalowaniu reCAPTCHA w witrynie możesz zmienić jej wygląd. Na tej stronie wyjaśniamy: (1) jak wybrać jeden ze standardowych motywów reCAPTCHA; (2) jak w pełni dostosować wygląd reCAPTCHA oraz (3) jak internacjonalizować reCAPTCHA przez zmianę języka widżetu.

Motywy standardowe

Aby widżet reCAPTCHA wyświetlał inny motyw, musisz najpierw dodać ten kod do głównej strony HTML w dowolnym miejscu przed elementem <form>, w którym pojawia się reCAPTCHA (nie będzie działać, jeśli zostanie umieszczony po głównym skrypcie, w którym usługa reCAPTCHA jest po raz pierwszy wywoływana):

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

Aby użyć motywu standardowego, musisz zastąpić 'theme_name' jedną z tych 4 nazw motywu:

„czerwony” (motyw domyślny)	„white”
„czarne szkło”	„czyste”

Motywy niestandardowe

Niestandardowe motywy pozwalają dokładnie kontrolować sposób wyświetlania obrazu reCAPTCHA. (tutaj znajdziesz demonstrację niestandardowego motywu). Aby użyć niestandardowych motywów, najpierw ustaw właściwość motywu elementu RecaptchaOptions na „custom” (niestandardowy). Informuje to usługę reCAPTCHA, że nie powinna tworzyć własnego interfejsu użytkownika. Do wyświetlania użytkownikowi obrazu CAPTCHA do wyświetlania użytkownikowi obraz CAPTCHA wymagane są elementy HTML z tymi identyfikatorami:

• Pusty element div o identyfikatorze recaptcha_image. Tutaj zostanie umieszczony obraz. Element div będzie miał wymiary 300 x 57 pikseli.
• Pole tekstowe z identyfikatorem i nazwą ustawione na recaptcha_response_field. W tym miejscu użytkownik może wpisać odpowiedź.
• Opcjonalnie element div zawierający cały widżet reCAPTCHA. Ten identyfikator div należy umieścić w elemencie custom_theme_widget, a styl elementu div powinien być ustawiony na display:none. Po pełnym wczytaniu kodu tematycznego reCAPTCHA element div stanie się widoczny. Ten element zapobiega migotaniu strony podczas ładowania.

Aby to zrobić, umieść poniższy kod w głównej stronie HTML w dowolnym miejscu przed elementem <form>, gdzie pojawia się reCAPTCHA:

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

Następnie w elemencie <form>, w którym ma się pojawiać reCAPTCHA, umieść:

 <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>

Kilka ostatnich wierszy to po prostu standardowy sposób wyświetlania reCAPTCHA opisanego we wprowadzeniu do tego przewodnika.

Oto co dzieje się w kodzie powyżej. Obiekt JavaScript reCAPTCHA udostępnia metody, które umożliwiają zmianę stanu testu CAPTCHA. Metoda reload wyświetla nowe zadanie CAPTCHA, a metoda switch_type przełącza się między testem CAPTCHA w formie obrazu i dźwięku. Aby utworzyć pełny interfejs reCAPTCHA, wyświetlamy inne informacje w zależności od stanu obrazu CAPTCHA. Na przykład gdy użytkownik wyświetla obraz CAPTCHA, wyświetla się link „Uzyskaj dźwiękowy obraz CAPTCHA”. Do utworzenia stanowego interfejsu użytkownika możesz wykorzystać 4 klasy CSS:

Klasa CSS	Widoczna, gdy...
recaptcha_only_if_image	wyświetlany jest obraz CAPTCHA
recaptcha_only_if_audio	jest wyświetlany dźwiękowy CAPTCHA
recaptcha_only_if_incorrect_sol	poprzednie rozwiązanie było nieprawidłowe
recaptcha_only_if_no_incorrect_sol	poprzednie rozwiązanie nie było nieprawidłowe

Mimo że wybór tematów zapewnia wiele opcji, musisz przestrzegać pewnych reguł spójności interfejsu:

• Musisz określić, że używasz reCAPTCHA w pobliżu widżetu CAPTCHA.
• Musisz udostępnić widoczny przycisk wywołujący funkcję ponownego załadowania.
• Musisz umożliwić osobom z wadą wzroku dostęp do audiowizualnych testów CAPTCHA.
• Musisz podać tekst alternatywny dla wszystkich obrazów, których używasz jako przycisków w widżecie reCAPTCHA.

Internacjonalizacja: zmiana języka widżetu

Widżet reCAPTCHA można umiędzynarodowić na 2 sposoby:

Wbudowane tłumaczenia

reCAPTCHA ma wiele wbudowanych tłumaczeń. Aby z nich skorzystać, ustaw parametr lang interfejsu RecaptchaOptions:

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

Tłumaczenia niestandardowe

Jeśli nie ma tłumaczenia na Twój język, możesz utworzyć własne. Musisz przetłumaczyć wszystkie ciągi znaków w języku JavaScript reCAPTCHA i ustawić zmienną „custom_translations” dla RecaptchaOptions. Wszystkie ciągi znaków, których nie ustawisz, zostaną pobrane z domyślnego tłumaczenia w Twoim języku. Pozwala on zastąpić tylko część domyślnego tłumaczenia (np. jeśli wybrane przez nas tłumaczenie nie pasuje do Twojego regionu). Na przykład:

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

Oto działający przykład niestandardowego tłumaczenia na język włoski (umieść ten kod przed wywołaniem reCAPTCHA):

<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>

Dokumentacja RecaptchaOptions

W słowniku RecaptchaOptions można ustawić następujące pola:

Klucz	Możliwe wartości	Wartość domyślna	Znaczenie:
motyw	„czerwony” | „biały” | „czarny szkło” | „czyste” | „niestandardowy”	„czerwony”	Określa motyw, który ma być używany w reCAPTCHA. Motywy czerwone, białe, czarne ze szkła i czyste motywy to wstępnie zdefiniowane motywy, w których interfejs reCAPTCHA udostępnia interfejs użytkownika. W motywie niestandardowym Twoja witryna ma pełną kontrolę nad wyglądem reCAPTCHA.
lang	Dowolny obsługiwany kod języka.	'pl'	Język interfejsu używany w przypadku wstępnie zdefiniowanych motywów. Obsługiwane są te języki: Język Kod angielski angielski niderlandzki nl francuski fr niemiecki de portugalski pt rosyjski ru hiszpański es turecki tr Jeśli język Twojej witryny nie jest obsługiwany, możesz użyć własnych motywów, aby umieścić reCAPTCHA w swoim języku.
custom_translations	Słownik tłumaczeń	brak	Służy do określania niestandardowych tłumaczeń ciągów reCAPTCHA.
custom_theme_widget	Ciąg znaków z identyfikatorem elementu DOM.	brak	W przypadku niestandardowych tematów jest to element div zawierający widżet. Informacje o tym, jak go używać, znajdziesz w sekcji dotyczącej niestandardowych motywów.
indeks tabulacji	dowolna liczba całkowita	0	Ustawia indeks tabulacji dla pola tekstowego reCAPTCHA. Jeśli inne elementy formularza używają indeksu tabulacji, należy ustawić go w taki sposób, aby ułatwić użytkownikowi nawigację.

Na przykład ten tag skryptu sprawia, że reCAPTCHA ma biały motyw i wskaźnik tabindex 2:

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