自定义 reCAPTCHA 的外观和风格

重要提示：reCAPTCHA API 1.0 版已不再受支持，请升级到 2.0 版。了解详情

在您的网站上成功安装 reCAPTCHA 后，您可能需要更改其外观。本页介绍了：(1) 如何选择其中一个标准 reCAPTCHA 主题；(2) 如何完全自定义 reCAPTCHA 的外观；(3) 如何通过更改 widget 的语言来使 reCAPTCHA 国际化。

标准主题

如需让 reCAPTCHA widget 显示不同的主题，您首先需要在 HTML 主页面中显示 reCAPTCHA 的 <form> 元素之前的任意位置添加以下代码（如果放置在首次调用 reCAPTCHA 的主脚本之后，则将不起作用）：

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

如需使用标准主题，您需要将 'theme_name' 替换为以下四个主题名称之一：

“red”（默认主题）	'白色' [white]
“blackglass”	'清洁' [clean]

自定义主题

通过自定义主题，您可以控制 reCAPTCHA 图片的确切显示方式。（如需查看自定义主题的演示，请点击此处）。如需使用自定义主题，您必须先将 RecaptchaOptions 的主题属性设置为“custom”。这会告知 reCAPTCHA 不应创建自己的界面。reCAPTCHA 将依赖具有以下 ID 的 HTML 元素来向用户显示人机识别系统：

• ID 为 recaptcha_image 的空 div。这是实际放置图片的位置。该 div 的尺寸为 300x57 像素。
• 具有 ID 和名称的文本输入项均设置为 recaptcha_response_field。用户可以在此处输入答案。
• （可选）包含整个 reCAPTCHA widget 的 div。此 ID div 应放入 custom_theme_widget 中，且 div 的样式应设置为 display:none。reCAPTCHA 主题代码完全加载后，即会使 div 显示。该元素可避免页面在加载时闪烁。

要实现所有这一切，请先将以下代码放在主 HTML 页面中显示 reCAPTCHA 的 <form> 元素之前的任意位置：

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

然后，在您希望显示 reCAPTCHA 的 <form> 元素中，添加以下代码：

 <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 对象提供的方法，您可以更改人机识别系统状态。reload 方法会显示新的人机识别系统质询，switch_type 方法会在图片和音频人机识别系统之间切换。为了为 reCAPTCHA 创建完整的界面，我们会在人机识别系统处于不同状态时显示不同的信息。例如，当用户查看图片人机识别系统时，系统会显示“获取音频人机识别系统”链接。您可以使用四个 CSS 类创建有状态界面：

CSS 类	在以下情况下显示...
recaptcha_only_if_image	图片中显示的是人机识别系统图片
recaptcha_only_if_audio	当前显示的是音频人机识别系统
recaptcha_only_if_incorrect_sol	之前的解决方案不正确
recaptcha_only_if_no_incorrect_sol	前面的解决方案并无错误

虽然主题设置确实提供了很多选项，但您需要遵循一些界面一致性规则：

• 您必须在人机识别系统 widget 旁声明您正在使用 reCAPTCHA。
• 您必须提供一个用于调用重新加载函数的可见按钮。
• 您必须为视障用户提供音频人机识别系统。
• 在 reCAPTCHA widget 中用作按钮的所有图片都必须提供替代文本。

国际化：更改小程序的语言

国际化 reCAPTCHA widget 有两种方法：

内置翻译

reCAPTCHA 包含多种内置翻译。您可以通过设置 RecaptchaOptions 的 lang 参数来使用这些内容：

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

自定义翻译

如果没有适合您所用语言的翻译版本，您可以自行构建。您需要翻译 recaptchaOptions 中的所有字符串，并设置 RecaptchaOptions 的“custom_translations”变量。如果您未设置任何字符串，都将从您所用语言的默认译文中获取。您可以使用此参数仅替换默认翻译的一部分（例如，如果我们选择的翻译不适合您的地区）。例如：

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

RecaptchaOptions 参考文档

您可以在 RecaptchaOptions 字典中设置以下字段：

键	可能的值	默认值	含义
主题	'红色' | '白色' | '黑色玻璃' | '清洁' | '自定义'	“红色”	定义要用于 reCAPTCHA 的主题。红色、白色、黑色和干净的主题背景是 reCAPTCHA 提供界面的预定义主题。在自定义主题中，您的网站可以完全控制 reCAPTCHA 的外观。
语言	任何支持的语言代码。	“zh-CN”	预定义的主题在界面中使用哪种语言。支持以下语言： 语言 编码 英语 en 荷兰语 nl 法语 fr 德语 de 葡萄牙语 pt 俄语 ru 西班牙语 es 土耳其语 tr 如果您的网站语言不受支持，您可以随时使用自定义主题将 reCAPTCHA 设置为您的语言。
custom_translations	翻译字典	null	使用此方法可指定 reCAPTCHA 字符串的自定义翻译。
custom_theme_widget	包含 DOM 元素 ID 的字符串	null	使用自定义主题时，这是一个包含微件的 div 元素。如需了解如何使用，请参阅“自定义主题”部分。
标签页索引	任意整数	0	为 reCAPTCHA 文本框设置 tabindex。如果表单中的其他元素使用 tabindex，则应设置该值，以便用户更轻松地进行导航

例如，以下脚本标记使 reCAPTCHA 具有白色主题，并且 tabindex 为 2：

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