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 zainstalowaniu reCAPTCHA w witrynie warto zmienić wygląd. Ta strona objaśnia: (1) jak wybrać jeden ze standardowych motywów reCAPTCHA; (2) jak w pełni dostosować wygląd reCAPTCHA; oraz (3) jak ujednolicić reCAPTCHA przez zmianę języka widżetu.

Motywy standardowe

Aby widżet reCAPTCHA wyświetlał inny motyw, najpierw musisz dodać poniższy kod do sekcji głównej stronę HTML w dowolnym miejscu przed tagiem <form>. w którym pojawia się reCAPTCHA (nie będzie działać, jeśli umieszczone za głównym skryptem, który powoduje pierwsze wywołanie reCAPTCHA):

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

Aby użyć motywu standardowego, musisz zastąpić motyw 'theme_name' jednym z tych 4 motywów nazwy:

„czerwony” (motyw domyślny)	'biały'
„czarne szkło”	„czysta”

Motyw niestandardowy

Dostosowywanie motywów pozwala dokładnie kontrolować sposób wyświetlania obrazu reCAPTCHA. Tutaj znajdziesz wersję demonstracyjną niestandardowych motywów. Aby korzystać z , musisz najpierw ustawić właściwość motywu RecaptchaOptions na „custom”. Ten informuje reCAPTCHA, że nie powinien tworzyć własnego interfejsu użytkownika. reCAPTCHA będzie zależeć od obecności Elementy HTML o następujących identyfikatorach służące do wyświetlania obrazka CAPTCHA użytkownikowi:

• Pusty element div o identyfikatorze recaptcha_image. W tym miejscu obraz zostanie umieszczony na stronie. Element div będzie miał wymiary 300 x 57 pikseli.
• Ustawiono tekst z identyfikatorem i nazwą do recaptcha_response_field. W tym miejscu użytkownik może wpisz odpowiedź.
• Opcjonalnie element div zawierający całą reCAPTCHA widżet. Ten identyfikator div należy umieścić w element custom_theme_widget i styl elementu div powinny ustaw na display:none. Po kodzie motywu reCAPTCHA został w pełni wczytany, element div stanie się widoczny. Dzięki temu strona nie będzie migotać podczas wczytywania.

Aby zastosować to wszystko, najpierw umieść poniższy kod na głównej stronie HTML w dowolnym miejscu przed tagiem <form> Element, w którym pojawia się reCAPTCHA:

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

Następnie w <form> element, w którym ma się wyświetlać 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>

Pamiętaj, że ostatnie kilka linii to po prostu standardowy sposób wyświetlania reCAPTCHA, omówiony we wstępie do tego przewodnika.

Oto, co się dzieje w powyższym kodzie. Obiekt JavaScript Recaptcha udostępnia metody, które umożliwiają zmienić stan obrazu CAPTCHA. Metoda załaduj ponownie wyświetli nowy test CAPTCHA, a metoda Parametr switch_type przełącza się między obrazowymi i dźwiękowymi zadaniami CAPTCHA. Aby utworzyć pełne UI reCAPTCHA, wyświetlamy różne informacje, gdy CAPTCHA znajduje się w różnych stanach. Jeśli np. użytkownik wyświetla CAPTCHA z obrazem, wyświetla się link „Uzyskaj CAPTCHA audio”. Możesz utworzyć 4 klasy CSS stanowy interfejs użytkownika:

Klasa CSS	Widoczne, gdy...
recaptcha_only_if_image	wyświetlany jest obraz CAPTCHA
recaptcha_only_if_audio	wyświetlany jest dźwiękowy obraz 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

Chociaż wybór motywów daje wiele opcji, musisz przestrzegać kilku reguł spójności interfejsu użytkownika:

• Musisz potwierdzić, że używasz reCAPTCHA w pobliżu widżetu CAPTCHA.
• Musisz udostępnić widoczny przycisk, który wywołuje funkcję ponownego ładowania.
• Musisz umożliwić użytkownikom z wadą wzroku dostęp do dźwiękowego testu CAPTCHA.
• Musisz podać tekst alternatywny 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 przetłumaczyć na 2 sposoby:

Wbudowane tłumaczenia

reCAPTCHA ma kilka wbudowanych tłumaczeń. Możesz ich używać, ustawiając parametr lang w prośbie 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 na język kod JavaScript reCAPTCHA i ustaw parametr „custom_translations” klasy RecaptchaOptions. Wszystkie ciągi, których nie ustawisz, zostaną pobrane z domyślnego tłumaczenia tekstu język. W ten sposób można zastąpić tylko część tłumaczenia domyślnego (np. jeśli wybrane tłumaczenie nie 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>

Odniesienie do RecaptchaOptions

W słowniku RecaptchaOptions można ustawić te pola:

Klucz	Możliwe wartości	Wartość domyślna	Znaczenie:
motyw	'red' | 'white' | 'blackglass' | 'clean' | 'custom'	„czerwony”	Określa, który motyw ma być używany w przypadku reCAPTCHA. Motywy czerwone, białe, czarne i czyste to wstępnie zdefiniowane motywy, w przypadku których reCAPTCHA zapewnia interfejs użytkownika. W motywie niestandardowym ma pełną kontrolę nad wyglądem reCAPTCHA.
język	dowolny obsługiwany kod języka;	'pl'	Który język będzie używany w interfejsie dla wstępnie zdefiniowanego języka tematy. Obsługiwane języki: Język Kod angielski en 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, zawsze możesz użyć niestandardowych motywów, aby zastosować reCAPTCHA w swojej witrynie język.
custom_translations	Słownik tłumaczeń	brak	Użyj tego parametru, aby określić niestandardowe tłumaczenia ciągów znaków reCAPTCHA.
custom_theme_widget	Ciąg tekstowy z identyfikatorem elementu DOM	brak	W przypadku używania niestandardowych motywów jest to element div, który zawiera widżet. Aby dowiedzieć się, jak korzystać z tej funkcji, przeczytaj sekcję dotyczącą niestandardowych motywów.
tabindex	dowolna liczba całkowita	0	Ustawia tabindex dla pola tekstowego reCAPTCHA. Jeśli inne elementy formularza używają tagu tabindex, powinien być ustawiony tak, aby ułatwić użytkownikowi nawigację

Na przykład ten tag skryptu sprawia, że reCAPTCHA ma biały motyw i Tabindex 2:

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