自訂 reCAPTCHA 的外觀和風格

重要事項：系統已不再支援 reCAPTCHA API 1.0 版，請升級至 2.0 版。瞭解詳情

在網站上成功安裝 reCAPTCHA 後，建議您變更網站的外觀。本頁說明：(1) 如何選擇其中一個標準 reCAPTCHA 主題；(2) 如何完整自訂 reCAPTCHA 的外觀；以及 (3) 如何透過變更小工具的語言讓 reCAPTCHA 國際化。

標準主題

如要讓 reCAPTCHA 小工具顯示不同的主題，您必須先在主要 HTML 網頁的主要 HTML 網頁，將以下程式碼新增至 reCAPTCHA 顯示 reCAPTCHA 的 <form> 元素「之前」 (如果在首次叫用 reCAPTCHA 的主要指令碼之後放在位置，這個方法並不適用)：

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

如要使用標準主題，您必須將 'theme_name' 替換為以下四個主題名稱之一：

「紅色」(預設主題)	「white」
黑玻璃	「clean」

自訂主題設定

自訂主題設定可讓您確切控制 reCAPTCHA 映像檔的顯示方式。(按這裡觀看自訂主題設定的示範影片)。如要使用自訂主題設定，請先將 RecaptchaOptions 的主題屬性設為「custom」。這會指示 reCAPTCHA 不應建立自己的使用者介面。reCAPTCHA 需要使用具有下列 ID 的 HTML 元素，向使用者顯示人機驗證 (CAPTCHA)：

• ID 為 recaptcha_image 的空白 div。這個位置會顯示實際圖片。div 將為 300x57 像素。
• 包含 ID 和名稱的文字輸入內容均設為 recaptcha_response_field。使用者可以在這個欄位中輸入答案。
• 您也可以選擇包含整個 reCAPTCHA 小工具的 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 物件提供幾種方法，可讓您變更人機驗證 (Captcha) 的狀態。方法 reload 會顯示新的 CAPTCHA 驗證問題，而 switch_type 方法會在圖片與音訊 CAPTCHA 之間切換。為了為 reCAPTCHA 建立完整的 UI，而 CAPTCHA 處於不同狀態時，系統會顯示不同的資訊。比方說，當使用者查看圖片 CAPTCHA 時，系統會顯示「取得音訊 CAPTCHA」連結。您可以利用四種 CSS 類別建立有狀態 UI：

CSS 類別	顯示時機...
recaptcha_only_if_image	使用者看到的是人機驗證 (Captcha) 圖片
recaptcha_only_if_audio	圖片中的人機驗證 (Captcha) 訊息
recaptcha_only_if_incorrect_sol	先前的解決方案不正確
recaptcha_only_if_no_incorrect_sol	上一個解決方案並未不正確

雖然主題設定可以提供許多選項，但您必須遵循以下使用者介面一致性規則：

• 您必須在人機驗證 (Captcha) 小工具附近表明您正在使用 reCAPTCHA。
• 您必須提供呼叫重新載入函式的可見按鈕。
• 您必須讓視障使用者能夠存取語音 CAPTCHA。
• 凡是要在 reCAPTCHA 小工具中做為按鈕的圖片，都必須提供替代文字。

國際化：變更小工具的語言

有兩種方法可將 reCAPTCHA 小工具國際化：

內建翻譯功能

reCAPTCHA 有多種內建翻譯。您可以設定 RecaptchaOptions 的 lang 參數以使用這些參數：

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

自訂翻譯

如果沒有您的語言版本，您可以自行製作譯文。您必須翻譯 reCAPTCHA JavaScript 中的所有字串，並設定 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 字典中設定：

鍵	可能的值：	預設值	意義
主題	'red' | 'white' | '黑玻璃' | 'clean' | '自訂'	「red」	定義要用於 reCAPTCHA 的主題。紅、白、黑玻璃和潔淨主題是 reCAPTCHA 提供使用者介面的預先定義主題。在自訂主題中，您的網站可以完全控管 reCAPTCHA 外觀。
lang	任何支援的語言代碼。	'en'	預先定義的主題介面使用的語言。支援的語言如下： 語言 程式碼 英文 zh-TW 荷蘭文 nl 法文 fr 德文 de 葡萄牙文 pt 俄文 ru 西班牙文 es 土耳其文 tr 如果系統不支援網站使用的語言，您隨時可以使用自訂主題設定，將 reCAPTCHA 置入您的語言。
custom_translations	翻譯字典	空值	請使用這個欄位指定 reCAPTCHA 字串的自訂翻譯。
custom_theme_widget	含有 DOM 元素 ID 的字串	空值	使用自訂主題設定時，這是包含小工具的 div 元素。如要瞭解如何使用這項設定，請參閱「自訂主題設定」一節。
Tabindex	任何整數	0	設定 reCAPTCHA 文字方塊的分頁索引。如果表單中的其他元素使用 Tab 索引，則應設定這個項目，讓使用者能更輕鬆瀏覽

舉例來說，以下指令碼標記會將 reCAPTCHA 設為白色主題，並含有 Tab 2 索引：

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