自定义 reCAPTCHA 的外观和风格

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

在您的网站上成功安装 reCAPTCHA 后，您可能需要更改其外观。当前页面 解释了：(1) 如何选择一个标准 reCAPTCHA 主题；(2) 如何全面自定义 reCAPTCHA 的外观；以及 (3) 如何通过更改 widget 的语言实现 reCAPTCHA 国际化。

标准主题背景

如需让 reCAPTCHA 微件显示其他主题，您首先需要在主 HTML 页面中，在显示 reCAPTCHA 的 <form> 元素的前面任意位置添加以下代码（如果将其放在首次调用 reCAPTCHA 的主脚本后面，则无法正常运行）：

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

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

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

自定义主题

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

• 一个 ID 为 recaptcha_image 的空 div。实际图片将放置在此处。该 div 的尺寸为 300x57 像素。
• 已设置 ID 和名称的文本输入 发送至 recaptcha_response_field。用户可以在这里 输入答案。
• （可选）包含整个 reCAPTCHA 的 div 微件。此 ID div 应该放置在 custom_theme_widget 以及 div 的样式 设为 display:none。在 reCAPTCHA 主题代码后面 已完全加载，即可使 div 可见。该元素可避免 导致页面在加载时闪烁

要实现上述所有操作，请先将以下代码放置在主 HTML 页面中 <form> 前面的任意位置 元素：

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

然后，在 <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 方法会显示新的 CAPTCHA 验证，switch_type 方法则用于在图片 CAPTCHA 和音频 CAPTCHA 之间切换。为了创建完整的 reCAPTCHA 界面， 在人机识别系统处于不同状态时显示不同的信息。例如，当用户查看 图片人机识别系统，一个指向“获取音频人机识别系统”的链接。您可以使用四个 CSS 类来创建 有状态界面：

CSS 类	显示时机...
recaptcha_only_if_image	正在显示图片人机识别系统图片
recaptcha_only_if_audio	显示音频人机识别系统
recaptcha_only_if_incorrect_sol	之前的解决方案不正确
recaptcha_only_if_no_incorrect_sol	之前的解决方案不正确

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

• 您必须在人机识别系统微件附近声明您正在使用 reCAPTCHA。
• 您必须提供一个用于调用重新加载函数的可见按钮。
• 您必须提供一种方式，让视力受损的用户能够访问音频人机识别系统。
• 您必须为在 reCAPTCHA 微件中用作按钮的所有图片提供替代文本。

国际化：更改微件的语言

您可以通过以下两种方式对 reCAPTCHA widget 进行国际化：

内置翻译

reCAPTCHA 提供了多种内置翻译。您可以通过设置 RecaptchaOptions：

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

自定义翻译

如果没有适用于您的语言的翻译，您可以自行构建。您需要将所有字符串 reCAPTCHA JavaScript，并将“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 字典中设置以下字段：

键	可能的值	默认值	含义
主题	“红色”|'白色' [white]|“blackglass”|“clean”|“自定义”	“红色”	定义要为 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 元素。 如需了解如何使用，请参阅“自定义主题”部分。
tabindex	任意整数	0	为 reCAPTCHA 文本框设置 tabindex。如果表单中的其他元素使用 tabindex，应设置此字段，以便用户更轻松地浏览

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

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