Trước giờ khi có yêu cầu thiết lập Captcha cho các trang web thuần HTML chỉ hỗ trợ Javascript thì mình thường phải viết 1 captcha đơn giản kiểu như làm phép tính hoặc cao cấp hơn mình sẽ kết hợp với thẻ canvas trong HTML5 để tạo ra một chuỗi ngẫu nhiên nhưng được trang trí theo kiểu… khó đọc. Hôm rồi dính yêu cầu có liên quan đến reCaptcha và rồi tìm hiểu thì reCaptcha có hỗ trợ các hàm callback trong javascript và chợt loé lên giải pháp để có thể sử dụng reCaptcha cho các trang web thuần HTML.
Đầu tiên mình sẽ chèn reCaptcha và trang web.
Gọi thư viện API của reCaptcha
1 | <script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script> |
Các hàm javascript để chạy reCaptcha
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <script> var actionCallback = function (response) { $('#contactFormSubmit').prop("disabled", false); }; var expCallback = function() { $('#contactFormSubmit').prop("disabled", true); }; var onloadCallback = function () { var widget = grecaptcha.render(document.getElementById("re-captcha"), { 'sitekey' : "123456789", 'theme': "light", 'callback' : actionCallback, 'expired-callback': expCallback, }); } </script> |
Chèn reCaptcha vào vị trí bằng cách chèn thẻ DIV
1 | <div id="re-captcha"></div> |
Giải thích
Đầu tiên ta sẽ phải vô hiệu hoá (disable) nút bấm submit của form bằng thuộc tính disabled. Ở các đoạn code ở trên nút bấm này có id là contactFormSubmit.
Hàm onloadCallback là hàm để khởi tạo reCaptcha.
Hàm actionCallback là hàm chạy khi người dùng thực hiện hành động xác minh “I’m not a robot”. Ở hàm này mình sẽ viết hàm bỏ thuộc tính disabled cho nút bấm submit của form để người dùng có thể bấm gửi form.
Hàm expCallback là hàm chạy hành động khi reCaptcha hết phiên. Ở đây mình sẽ viết hàm đưa thuộc tính disabled vào lại nút submit của form.
Demo: https://huynh-mai-anh-kiet.myshopify.com/pages/contact
Dĩ nhiên là cách này cũng không xử lý triệt để và không thể phát huy hết khả năng chặn spam của reCaptcha nhưng nếu gặp khách hàng khó tính yêu cầu bắt buộc phải dùng reCaptcha trên trang HTML của họ thì đây là giải pháp.
Chúc các bạn thành công.
Huỳnh Mai Anh Kiệt
