Trang này được dịch bởi Cloud Translation API.

Tuỳ chỉnh giao diện của reCAPTCHA

Lưu ý quan trọng: Phiên bản 1.0 của API reCAPTCHA không còn được hỗ trợ, vui lòng nâng cấp lên phiên bản 2.0. Tìm hiểu thêm

Sau khi cài đặt thành công reCAPTCHA trên trang web của mình, bạn có thể muốn thay đổi giao diện của nó. Trang này giải thích: (1) cách chọn một trong các giao diện chuẩn của reCAPTCHA; (2) cách tuỳ chỉnh hoàn toàn giao diện của reCAPTCHA; và (3) cách quốc tế hoá reCAPTCHA bằng cách thay đổi ngôn ngữ của Tiện ích.

Giao diện chuẩn

Để tiện ích reCAPTCHA hiển thị một giao diện khác, trước tiên, bạn cần thêm mã sau vào trang HTML chính ở bất kỳ vị trí nào trước phần tử <form> nơi reCAPTCHA xuất hiện (điều này sẽ không hoạt động nếu được đặt sau tập lệnh chính nơi reCAPTCHA được gọi lần đầu):

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

Để sử dụng giao diện chuẩn, bạn cần thay thế 'theme_name' bằng một trong 4 tên giao diện sau:

"đỏ" (giao diện mặc định)	"trắng"

'đen Glass'	"sạch"

Giao diện tuỳ chỉnh

Tuỳ chỉnh giao diện cho phép bạn kiểm soát chính xác cách hình ảnh reCAPTCHA xuất hiện. (Đây là bản minh hoạ về giao diện tuỳ chỉnh.) Để sử dụng giao diện tuỳ chỉnh, trước tiên, bạn phải đặt thuộc tính giao diện của RecaptchaOptions thành "custom". Điều này cho biết rằng reCAPTCHA không nên tạo một giao diện người dùng riêng. reCAPTCHA sẽ dựa vào sự hiện diện của các phần tử HTML có các mã nhận dạng sau để hiển thị CAPTCHA cho người dùng:

Một div trống có mã recaptcha_image. Đây là nơi hình ảnh thực tế sẽ được đặt. Div sẽ là 300x57 pixel.
Một mục nhập văn bản có mã nhận dạng và tên đều được đặt thành recaptcha_response_field. Đây là nơi người dùng có thể nhập câu trả lời.
Một div chứa toàn bộ tiện ích reCAPTCHA (không bắt buộc). Bạn phải đặt div mã này vào custom_theme_widget và đặt kiểu của div thành display:none. Sau khi mã giao diện reCAPTCHA tải đầy đủ, div sẽ hiển thị. Phần tử này giúp tránh làm cho trang nhấp nháy khi tải.

Để triển khai tất cả những điều này, trước tiên, hãy đặt mã sau vào trang HTML chính của bạn ở bất kỳ vị trí nào trước phần tử <form> nơi reCAPTCHA xuất hiện:

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

Sau đó, trong phần tử <form> mà bạn muốn reCAPTCHA xuất hiện, hãy đặt:

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

Lưu ý rằng vài dòng cuối cùng chỉ đơn giản là cách tiêu chuẩn để hiển thị reCAPTCHA được giải thích trong phần giới thiệu của hướng dẫn này.

Dưới đây là những gì xảy ra trong mã ở trên. Đối tượng JavaScript Recaptcha cung cấp các phương thức cho phép bạn thay đổi trạng thái của CAPTCHA. Phương thức tải lại sẽ hiển thị một thử thách xác thực CAPTCHA mới và phương thức switch_type chuyển đổi giữa các CAPTCHA dạng hình ảnh và âm thanh. Để tạo giao diện người dùng đầy đủ cho reCAPTCHA, chúng tôi sẽ hiển thị các thông tin khác nhau khi CAPTCHA ở các trạng thái khác nhau. Ví dụ: khi người dùng đang xem CAPTCHA hình ảnh, đường liên kết đến "Nhận CAPTCHA âm thanh" sẽ hiển thị. Có 4 lớp CSS để bạn tạo giao diện người dùng có trạng thái:

Lớp CSS	Hiển thị khi...
`recaptcha_only_if_image`	hình ảnh CAPTCHA đang hiển thị
`recaptcha_only_if_audio`	hình ảnh CAPTCHA âm thanh đang được hiển thị
`recaptcha_only_if_incorrect_sol`	giải pháp trước đó không chính xác
`recaptcha_only_if_no_incorrect_sol`	giải pháp trước đó không sai

Mặc dù giao diện cung cấp cho bạn nhiều tuỳ chọn, nhưng bạn cần tuân theo một số quy tắc về tính nhất quán trên giao diện người dùng:

Bạn phải cho biết rằng bạn đang sử dụng reCAPTCHA gần tiện ích CAPTCHA.
Bạn phải cung cấp một nút hiển thị để gọi hàm tải lại.
Bạn phải cung cấp cho người dùng khiếm thị cách thức truy cập CAPTCHA âm thanh.
Bạn phải cung cấp văn bản thay thế cho mọi hình ảnh mà bạn dùng làm nút trong tiện ích reCAPTCHA.

Quốc tế hoá: Thay đổi ngôn ngữ của tiện ích

Có 2 cách để quốc tế hoá tiện ích reCAPTCHA:

Bản dịch tích hợp sẵn

reCAPTCHA có một số bản dịch được tích hợp sẵn. Bạn có thể sử dụng các lớp này bằng cách đặt tham số lang của RecaptchaOptions:

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

Bản dịch tuỳ chỉnh

Nếu không có bản dịch cho ngôn ngữ của bạn, bạn có thể tự tạo bản dịch cho ngôn ngữ của mình. Bạn cần dịch tất cả các chuỗi trong JavaScript của reCAPTCHA và đặt biến "custom_translations" của RecaptchaOptions. Mọi chuỗi mà bạn không đặt sẽ được lấy từ bản dịch mặc định cho ngôn ngữ của bạn. Bạn có thể sử dụng tính năng này để chỉ ghi đè một phần của bản dịch mặc định (ví dụ: nếu bản dịch chúng tôi chọn không phù hợp với khu vực của bạn). Ví dụ:

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

Dưới đây là ví dụ hoạt động của bản dịch tiếng Ý tùy chỉnh (đặt mã này trước khi bạn gọi 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>

Tham khảo RecaptchaOptions

Bạn có thể đặt các trường sau trong từ điển RecaptchaOptions:

Khoá

Giá trị có thể sử dụng

Giá trị mặc định

Ý nghĩa:

chủ đề

"đỏ" | "trắng" | "đen đen" | "sạch" | "tuỳ chỉnh"

"đỏ"

Xác định giao diện dùng cho reCAPTCHA. Các giao diện đỏ, trắng, kính đen và sạch là các giao diện được xác định trước, trong đó reCAPTCHA cung cấp giao diện người dùng. Trong giao diện tuỳ chỉnh, trang web của bạn có toàn quyền kiểm soát giao diện của reCAPTCHA.

lang

Mọi mã ngôn ngữ được hỗ trợ.

"vi"

Ngôn ngữ nào được dùng trong giao diện dành cho các giao diện được xác định trước. Hỗ trợ các ngôn ngữ sau:

Ngôn ngữ	Mã
Tiếng Anh	en
Tiếng Hà Lan	nl
Tiếng Pháp	fr
Tiếng Đức	de
Tiếng Bồ Đào Nha	pt
Tiếng Nga	ru
Tiếng Tây Ban Nha	es
Tiếng Thổ Nhĩ Kỳ	tr

Nếu ngôn ngữ trên trang web của bạn không được hỗ trợ, bạn luôn có thể sử dụng giao diện tuỳ chỉnh để đặt reCAPTCHA bằng ngôn ngữ của mình.

custom_translations

Từ điển bản dịch

null

Sử dụng thuộc tính này để chỉ định bản dịch tuỳ chỉnh của các chuỗi reCAPTCHA.

custom_theme_widget

Chuỗi có mã nhận dạng của phần tử DOM

null

Khi sử dụng giao diện tuỳ chỉnh, đây là một phần tử div chứa tiện ích. Hãy xem phần giao diện tuỳ chỉnh để biết cách sử dụng giao diện này.

chỉ mục thẻ

số nguyên bất kỳ

Đặt chỉ mục thẻ cho hộp văn bản reCAPTCHA. Nếu các phần tử khác trong biểu mẫu sử dụng chỉ mục thẻ, thì bạn nên thiết lập chỉ mục này để người dùng dễ dàng thao tác hơn

Ví dụ: thẻ tập lệnh này khiến reCAPTCHA có giao diện màu trắng và có chỉ mục thẻ 2:

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