Tùy biến giao diện re-captcha thay đổi giao diện captcha

Hi! today, chào mọi người. Trong bài trước chúng ta đã học cách thêm captcha vào website sử dụng google re-captcha giúp tăng tính năng bào mật và chống auto spam cho web của bạn. Tuy nhiên mặc định re-captcha chỉ có 4 giao diện mặc định được bố trí giống nhau trông rất nhàm chán. Trong bài hôm nay các bạn sẽ biết cách tùy biến giao diện re-captcha và thậm trí thay đổi ngôn ngữ hiển thị cho captcha.

Tùy biến giao diện re-captcha – Thay đổi theme

Thư viện captcha này hỗ trợ sẵn 4 giao diện, mặc định hiển thị mầu “red”. Ví dụ sau có giao diện màu trắng.

<script>
var RecaptchaOptions = {
   theme : 'white',
   tabindex : 2
};
</script>
Re-captcha là một thành phần tồn tại trên form, đại diện cho nó là text input. Thuộc tính <code>tabindex</code> xác định vị trí tab của input text trong form.

Thay đổi ngôn ngữ (localize)

Re-captcha có cấu tạo gồm 5 thành phần: hình captcha, ô nhập input và 3 nút.

Bạn hoàn toàn có thể thay đổi placeholder trong textbox và các toolip của nút refresh, audio và nút help.

Re-captcha, được cấu hình trên biến global RecaptchaOptions, biến này chứa thông tin giao diện, ngôn ngữ cho từng quốc gia, ..Nếu bạn cài re-captcha sử dụng qua iFrame thì biến toàn cục này sẽ được sử dụng. Còn đối với cách 2 sử dụng javascript, tham số cấu hình được khai báo ở tham số thứ dụng và biến cấu hình global RecaptchaOptions không được sử dụng trong trường hợp này. Ví dụ đổi re-captcha sang ngôn ngữ tiếng việt, chúng ta khai báo mã ngôn ngữ cho thuộc tính lang như sau.

var RecaptchaOptions = {
   lang : 'vi',
};

Hai chữ cái ở trên là mã ngôn ngữ (Language Code) đại diện cho ngôn ngữ của quốc gia, ví dụ: vi là tiếng việt. Nếu bạn không biết mã của nước nào thì xem ở đây. Nhưng re-captch chỉ hỗ trợ các ngôn ngữ dưới đây:

Một lưu ý nữa là bạn cần khai báo biến này ở trước dòng.

<script type="text/javascript" src="http://www.google.com/recaptcha/api/challenge?k={your-public-key}"></script>

Đặt ở sau file js này sẽ vô tác dụng, tuy nhiên không nhất thiết đặt ở trong form mà có thể đặt ở ngoài form cũng được.

Tùy chỉnh ngôn ngữ hiển thị

Re-captcha cho phép chúng ta sửa lại những văn bản hiện tại đang sử dụng trên captcha widget. Bằng cách khai báo thuộc tính custom_translations. Thuộc tính này, chứa các dòng ngôn ngữ đại diện cho những phần có trên captcha. Sửa lại văn bản hiển thị như tooltip của nút help, placeholder..nếu bạn muốn.

var RecaptchaOptions = {
                custom_translations : {
                        instructions_visual : "Nhập hai từ",
                        instructions_audio : "ghi lại ban nghe được:",
                        play_again : "Phát lại âm thanh",
                        cant_hear_this : "Tải định dạng mp3",
                        visual_challenge : "Đổi thành hình ảnh",
                        audio_challenge : "Đổi thành âm thanh",
                        refresh_btn : "Nạp lại captcha",
                        help_btn : "Trợ giúp",
                        incorrect_try_again : "Sai, vui lòng thử lại.",
                },
                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
        };

Nếu bạn thay đổi toàn bộ ngôn ngữ trong custom_translations thì không cần sử dụng thuộc tính lang, tuy nhiên kết hợp cả lang và sửa một vài ngôn ngữ thì mang nghĩa đúng hơn.

Tùy biến ngôn ngữ trong khi tạo re-captcha cho hàm Recaptcha.create sẽ là.

Recaptcha.create("your-public-key",
    "captcha",
    {
	lang : 'vi',
	theme:'red',
	callback:Recaptcha.focus_response_field,
	custom_translations : {
                        instructions_visual : "Nhập hai từ",
                        instructions_audio : "ghi lại ban nghe được:",
                        play_again : "Phát lại âm thanh",
                        cant_hear_this : "Tải định dạng mp3",
                        visual_challenge : "Đổi thành hình ảnh",
                        audio_challenge : "Đổi thành âm thanh",
                        refresh_btn : "Nạp lại captcha",
                        help_btn : "Trợ giúp",
                        incorrect_try_again : "Sai, vui lòng thử lại.",
                },
     }
  );

Tùy biến giao diện hiển thị

Tùy chỉnh giao diện cho captcha cũng khá đơn giản chúng ta sẽ chèn trực tiếp các thành phần tag HTML và js cũng là các thành phần chính cấu tạo nên captcha nhưng vị trí đặt là do bạn. Copy đoạn code này vào vị trí trong form nơi captcha sẽ hiển thị.

<form method="POST" action="verify-captcha.php">
...
<script type="text/javascript">
          var RecaptchaOptions = {
 
              tabindex: 1,
              theme: 'custom',
              custom_theme_widget: 'recaptcha_widget'
          };
        </script>
<div id="recaptcha_widget" style="display:none">
<div id="recaptcha_image"></div>
<div class="recaptcha_only_if_incorrect_sol" style="color:red">Sai, vui lòng thử lại</div>
<span class="recaptcha_only_if_image">Nhập captcha:</span>
<span class="recaptcha_only_if_audio">Gõ text bạn nghe được:</span>
<input type="text" id="recaptcha_response_field" name="recaptcha_response_field"/>
<div><a href="javascript:Recaptcha.reload()">Refresh CAPTCHA</a></div>
<div class="recaptcha_only_if_image"><a href="javascript:Recaptcha.switch_type(&#39;audio&#39;)">Đổi thành audio CAPTCHA</a></div>
<div class="recaptcha_only_if_audio"><a href="javascript:Recaptcha.switch_type(&#39;image&#39;)">Đổi thành image CAPTCHA</a></div>
<div><a href="javascript:Recaptcha.showhelp()">Trợ giúp</a></div>
<script type="text/javascript" src="http://www.google.com/recaptcha/api/challenge?k=<?php echo $publickey?>"></script>
<noscript>
	<iframe src="http://www.google.com/recaptcha/api/noscript?k=<?php echo $publickey?>" 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>
</div>
<script type="text/javascript">
          window.onload = function() {
              Recaptcha.focus_response_field();
          }
        </script>
<table cellspacing="0" cellpadding="4" border="0" style="font-family: Helvetica, sans-serif; color: #000000; font-size: 12px;"><tr><td><div><input type="submit" name="Button1" value="Submit"/></div></td></tr></table>
....
</form>

Mình sẽ giải thích cho bạn dễ hiểu với đoạn mã trên, khai báo theme:'custom' nói với captcha là bạn tự xây dựng các thành phần của captcha không sử dụng mặc định bởi thư viện giao diện. Bạn nhìn thấy thẻ div recaptcha_widget bao toàn bộ đối tượng captcha không, ban đầu thiết lập css cho ẩn đi sử dụng style display:none. Và các thành phần khác như recaptcha_image, recaptcha_response_field,..những tên ID này không được tùy ý đổi nhá, vì nó được sử dụng để tạo tính năng cho captcha.

Một lần nữa nhắc lại, tính năng tùy biến giao diện này chỉ hỗ trợ với cách cài đặt mã iframe. Phần cài đặt tùy chỉnh với javascript thì mình chưa tìm thấy trên Google Developer. Vì vậy mọi options sẽ khai báo vào biến RecaptchaOptions. Cuối cùng xác nhận cấu trúc captcha xác định bởi DIV chứa toàn bộ thành phần có của re-captcha mà bạn đã chuẩn bị trong form. Bằng cách chỉ định tên DIV vào thuộc tính cuối cùng custom_theme_widget.

var RecaptchaOptions = {
	theme:'custom',
              custom_theme_widget: 'recaptcha_widget'
          };

Tên này được thay đổi tùy ý. Nếu thành công bạn nhận được hình giống như thế này.

Công đoạn verify captcha mình đã nói ở bài trước rồi, nên mình không nói lại nữa, các bạn tìm đọc bài Tạo form bảo mật với captcha chống auto spam trong php

Mọi ý kiến về cách sử dụng re-captcha bạn đừng ngại hãy để lại bình luận của mình nhé sẽ giúp bạn và mình tương tác tốt hơn đấy. Chúc thành công!

Để nhận được bài viết mới vui lòng đăng ký kênh kiến thức WordPress từ A-Z ở Form bên dưới. Bạn cũng có thể nhận được sự trợ giúp trên Twitter và Facebook