Настройка внешнего вида reCAPTCHA

Важно ! Версия 1.0 API reCAPTCHA больше не поддерживается, обновите ее до версии 2.0. Узнать больше

После того как вы успешно установили reCAPTCHA на свой сайт, вы можете изменить его внешний вид. На этой странице объясняется: (1) как выбрать одну из стандартных тем reCAPTCHA ; (2) как полностью настроить внешний вид reCAPTCHA ; и (3) как интернационализировать reCAPTCHA, изменив язык виджета .

Стандартные темы

Чтобы виджет reCAPTCHA отображал другую тему, сначала необходимо добавить следующий код на главную HTML-страницу в любом месте перед элементом <form>, где появляется reCAPTCHA (это не будет работать, если разместить его после основного сценария, в котором сначала вызывается reCAPTCHA) :

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

Чтобы использовать стандартную тему, вам необходимо заменить 'theme_name' на одно из следующих четырех названий тем:

«красный» (тема по умолчанию)	'белый'
'черное стекло'	'чистый'

Пользовательские темы

Пользовательские темы позволяют вам точно контролировать внешний вид изображения reCAPTCHA. ( Вот демонстрация пользовательской темы.) Чтобы использовать пользовательскую тему, сначала необходимо установить для свойства темы RecaptchaOptions значение «custom». Это сообщает reCAPTCHA, что ей не следует создавать собственный пользовательский интерфейс. reCAPTCHA будет полагаться на наличие элементов HTML со следующими идентификаторами для отображения CAPTCHA пользователю:

• Пустой div с идентификатором recaptcha_image . Здесь будет размещено фактическое изображение. Размер div будет 300x57 пикселей.
• Текстовый ввод с идентификатором и именем, для которых установлено значение recaptcha_response_field . Здесь пользователь может ввести свой ответ.
• При необходимости, элемент div, содержащий весь виджет reCAPTCHA. Этот идентификатор div должен быть помещен в custom_theme_widget , а стиль div должен быть установлен на display:none . После полной загрузки кода темы reCAPTCHA элемент div станет видимым. Этот элемент предотвращает мерцание страницы во время загрузки.

Чтобы реализовать все это, сначала поместите следующий код на вашей главной HTML-странице в любом месте перед элементом <form>, где появляется reCAPTCHA:

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

Затем внутри элемента <form>, где вы хотите разместить reCAPTCHA, поместите:

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

Обратите внимание, что последние несколько строк — это просто стандартный способ отображения reCAPTCHA, описанный во введении к этому руководству.

Вот что происходит в приведенном выше коде. Объект Recaptcha JavaScript предоставляет методы, позволяющие изменять состояние CAPTCHA. При перезагрузке метода отображается новый запрос CAPTCHA, а метод switch_type переключается между графической и звуковой CAPTCHA. Чтобы создать полноценный пользовательский интерфейс для reCAPTCHA, мы показываем разную информацию, когда CAPTCHA находится в разных состояниях. Например, когда пользователь просматривает графическую CAPTCHA, отображается ссылка «Получить аудиоCAPTCHA». Для создания пользовательского интерфейса с сохранением состояния доступны четыре класса CSS:

CSS-класс	Видно, когда...
recaptcha_only_if_image	отображается изображение CAPTCHA
recaptcha_only_if_audio	отображается аудиокапча
recaptcha_only_if_incorrect_sol	предыдущее решение было неправильным
recaptcha_only_if_no_incorrect_sol	предыдущее решение не было неправильным

Несмотря на то, что тематика дает вам много возможностей, вам необходимо следовать некоторым правилам согласованности пользовательского интерфейса:

• Рядом с виджетом CAPTCHA вы должны указать, что используете reCAPTCHA.
• Вы должны предоставить видимую кнопку, которая вызывает функцию перезагрузки.
• Вы должны предоставить пользователям с нарушениями зрения возможность доступа к аудио CAPTCHA.
• Вы должны предоставить замещающий текст для любых изображений, которые вы используете в качестве кнопок в виджете reCAPTCHA.

Интернационализация: изменение языка виджета

Есть два способа интернационализации виджета reCAPTCHA:

Встроенные переводы

reCAPTCHA имеет ряд встроенных переводов. Вы можете использовать их, установив параметр lang RecaptchaOptions :

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

Индивидуальные переводы

Если перевода на ваш язык нет, вы можете создать свой собственный. Вам необходимо перевести все строки в javascript reCAPTCHA и установить переменную «custom_translations» в RecaptchaOptions. Любые строки, которые вы не зададите, будут взяты из перевода по умолчанию для вашего языка. Вы можете использовать это, чтобы переопределить только часть перевода по умолчанию (например, если выбранный нами перевод не соответствует вашему региону). Например:

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

Вот рабочий пример пользовательского перевода на итальянский язык (поместите этот код перед вызовом 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>

Справочник по опциям Recaptcha

В словаре RecaptchaOptions можно задать следующие поля:

Ключ	Возможные значения	Значение по умолчанию	Значение
тема	'красный' | 'белый' | 'черное стекло' | 'чистый' | 'обычай'	'красный'	Определяет, какую тему использовать для reCAPTCHA. Темы «Красное», «Белое», «Черное стекло» и «Чистое» — это предварительно определенные темы, в которых reCAPTCHA обеспечивает пользовательский интерфейс. В пользовательской теме ваш сайт имеет полный контроль над внешним видом reCAPTCHA.
язык	Любой поддерживаемый код языка.	'эн'	Какой язык используется в интерфейсе для предопределенных тем. Поддерживаются следующие языки: Язык Код Английский ru Голландский Нидерланды Французский фр. Немецкий де португальский пт Русский RU испанский эс турецкий тр Если язык вашего сайта не поддерживается, вы всегда можете использовать собственную тему, чтобы разместить reCAPTCHA на своем языке.
custom_translations	Словарь переводов	нулевой	Используйте это, чтобы указать собственные переводы строк reCAPTCHA.
custom_theme_widget	Строка с идентификатором DOM-элемента.	нулевой	При использовании пользовательской темы это элемент div, содержащий виджет. См. раздел пользовательских тем, чтобы узнать, как это использовать.
табиндекс	любое целое число	0	Устанавливает индекс табуляции для текстового поля reCAPTCHA. Если другие элементы формы используют tabindex, его следует установить, чтобы пользователю было проще навигация.

Например, этот тег сценария делает reCAPTCHA белой темой и tabindex 2:

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