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ướng dẫn khai báo thuế TNCN trực tuyến cho cá nhân mảng kinh doanh nội dung số

Mình là 1 freelancer kiểu kiếm tiền trực tuyến mà được ngành thuế đưa vào mảng cá nhân kinh doanh nội dung số. Nếu...

Bột ngọt Vị Hương Tố – Thương hiệu bột ngọt nổi tiếng trước 75 và ly kỳ chuyện “châu chấu đá xe”

Hai nhãn hiệu Ajinomoto và Vedan có mặt tại Việt Nam vào thập niên 1950, đã chiếm lĩnh toàn bộ thị trường trong nước....

Pixel 6, chiếc điện thoại sắp ra mắt của Google

Nổi tiếng với danh hiệu "cha đẻ của hệ điều hành Android", nhưng ít ai biết Google cũng sở hữu cho mình một dòng...

Chụp ảnh nguyên trang web với công cụ trực tuyến Site-Shot

Ngày nay có rất nhiều công cụ giúp bạn chụp ảnh màn hình và trong số đó cũng có nhiều công cụ hỗ trợ...

Cách tạo thanh thông báo trượt trên đầu trang web Shopify

Thông báo trên đầu trang (announcement bar) là vị trí cũng như giải pháp tốt nhất để truyền tải thông điệp đến khách truy...

BẠN XEM CHƯA

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

Công cụ trực tuyến hỗ trợ tạo icon đại diện cho ứng dụng Android

Khi cài đặt 1 ứng dụng trên điện thoại thông minh thì bạn sẽ thấy 1 icon đại điện để mở ứng dụng (kiểu...

Bài viết cuối trên MangBinhDinh năm 2015

Vậy là chỉ còn hơn 3 ngày nữa là chúng ta bước sang năm 2016. Năm 2015 với mình nhìn chung nó mang lại...

Hướng dẫn tạo video… hư cấu

Hôm nay bài viết này sẽ chia sẻ với các bạn một trang web dịch vụ tạo ra một video... hư cấu. Hư cấu...

Đánh giá giá trị bản thân trước khi người khác làm điều đó

Năm 2014, trợ lý Mary Beth Brown đề nghị Musk tăng lương sau 12 năm làm việc. Vị CEO Tesla cho cô nghỉ phép...