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

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

BÀI VIẾT MỚI

Hệ thống camera giám sát giao thông thành phố Quy Nhơn, Bình Định

Sở Thông tin và Truyền thông Bình Định chính thức đưa Trang thông tin Chính quyền điện tử tỉnh trên Zalo vào hoạt động....

Hướng dẫn tra cứu vi phạm giao thông của tỉnh Bình Định trên Zalo

Bắt đầu từ ngày 14.6, Sở Thông tin và Truyền thông tỉnh Bình Định cung cấp dịch vụ tra cứu vi phạm giao thông...

Hướng dẫn tích hợp cửa sổ Zalo chat vào trang web

Zalo là mạng xã hội mà nhiều người Việt đang sử dụng trên mobile. Và xu hướng người dùng sử dụng mobile để lướt...

Google xóa bỏ lệnh cấm năm 2018 đối với Ví tiền Điện tử và Trao đổi Quảng cáo

Mới đây, Google đã dỡ bỏ một chính sách kéo dài gần ba năm của mình đó là lệnh cấm các sàn giao dịch...

Hướng dẫn thêm tính năng cuộn vô hạn cho cửa hàng Shopify

Nếu cửa hàng của bạn có nhiều sản phẩm trong một bộ sưu tập trên cửa hàng Shopify của bạn, thay vì khiến khách...

BẠN XEM CHƯA

Commandos: Beyond the Call of Duty

Commandos: Beyond the Call of Duty là phiên bản mở rộng của Commandos: Behind Enemy Lines, vẫn với đồ họa hình ảnh và các...

Yêu anh đi

Yêu anh đi, em không cần đổi tên Facebook. Em cứ an tâm "chém gió" Mọi rắc rối nếu có cứ để anh lo... Huỳnh Mai Anh...

Tự động tải video và hình ảnh với GrabDog

Có nhiều chương trình hỗ trợ bạn tải video và hình ảnh từ các trang web về máy. Tuy nhiên bạn sẽ thao tác...

Khắc phục hiện tượng tải bản đồ Google Maps không ổn định

Có bao giờ bạn triển khai bản đồ Google Maps cho trang web của mình mà gặp phải trường hợp bản đồ chỉ tải...