Trang chủ Lập trình Javascript - HTML Sử dụng reCaptcha cho trang web thuần chỉ hỗ trợ Javascript

Sử dụng reCaptcha cho trang web thuần chỉ hỗ trợ Javascript

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

Các hàm javascript để chạy reCaptcha

Chèn reCaptcha vào vị trí  bằng cách chèn thẻ 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

Huỳnh Mai Anh Kiệthttps://www.mangbinhdinh.vn
Anh là một người đam mê công nghệ. Hiện tại anh là một lập trình viên tại Quy Nhơn.

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây

- Advertisment -
Shopify

BÀI VIẾT MỚI

Hướng dẫn tạo hiệu ứng slow-motion với Instagram Reels

Sau khi cộng đồng công nghệ kêu gọi tẩy chay TikTok vì nghi ngờ ứng dụng này thu thập dữ liệu người dùng thì...

Amazon ra mắt Amazon Honeycode – Công cụ hỗ trợ người dùng tạo ứng dụng di động và web

Mới đây Amazon vừa thông báo ra mắt dịch Amazon Honeycode. Đây là một dịch vụ hỗ trợ người dùng tạo ra các ứng...

Điều gì sẽ xảy ra với cơ thể khi bạn trúng đạn

Chúng ta chắc hẳn đã xem khá nhiều bộ phim hành động mà trong đó nhân vật chính bị trúng đạn vào vai, vào...

Dad, How Do I? – Kênh Youtube cho những ai không có bố

Vừa qua, một kênh YouTube mới của một người đàn ông dạy bài học, kỹ năng về cuộc sống đã lan truyền cực kỳ...

Facebook chi 400 triệu đô để mua lại Giphy

Giphy là một nền tảng trực tuyến hỗ trợ lưu trữ và tìm kiếm ảnh động (GIF) trực tuyến của Mỹ. Và mới đây...

BẠN XEM CHƯA

Thể hiện chuẩn hacker với Geek Typer

Mới đây trên một kênh truyền hình quốc gia có chia sẻ một phóng sự về một ngày làm việc ở Cục an toàn...

Cách tính năm nhuận

Năm nay là năm 2016 và nó là năm nhuận nên cụ thể mai sẽ là ngày 29/2 chứ không phải là 1/3 như...

IM+ mang cả thế giới chat lên Windows 8

IM+ là dịch vụ hỗ trợ người dùng kết nối với các chương trình chat thông dụng như Yahoo! Messenger, AOL, ICQ, Facebook, Skype,…...

Chia tay

Một câu chuyện hư cấu dựa trên những tình tiết có thật... - Kiệt! Tao buồn quá mày ơi. Tao với người yêu chia tay...

Tối ưu hóa đường dẫn cho trang web dễ dàng với .htaccess

Rewrite URL là một kỹ thuật cho phép ghi lại địa chỉ website (URL) từ dạng này thành một dạng khác. Rewrite URLs (đôi...