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

Facebook, Apple tố cáo lẫn nhau trục lợi từ thu thập dữ liệu người dùng

Trong một bức thư gửi những người ủng hộ quyền riêng tư, apple cho biết họ sẽ triển khai việc "theo dõi tính minh...

Quyết định nghỉ việc

Sáng nay nhận tin nhắn thằng bạn nhắn qua: "Tao nghỉ việc rồi". Rồi chợt nhớ đêm qua nằm suy nghĩ là lâu rồi...

Shopify hợp tác cùng TikTok

Vào ngày 27/10 vừa qua, ứng dụng chia sẻ video ngắn đình đám TikTok đã ký kết hợp tác với Shopify - công ty...

Google Adsense sẽ hỗ trợ thanh toán qua PayPal, PayOneer và TransferWise?

Google đã có thông báo rằng sẽ ngưng thanh toán qua Western Union từ năm 2021. Và mới đây trong một email gửi đến...

Dịch vụ hosting miễn phí từ 123HOST

123HOST là một nhà cung cấp hosting, VPS, Server, tên miền uy tín tại Việt Nam. Và ngày 10/10/2020 vừa qua, 123Host thông báo...

BẠN XEM CHƯA

Khắc phục lỗi selectbox trên Android

Sáng nay nhận nhiệm vụ fix lỗi website khách hàng báo là select box không hoạt động tốt trên các thiết bị di động....

13 cách nhìn để đánh giá một người

Sưu tầm Here is a collection of places you can buy bitcoin online right now.

Phiên bản Windows 10 dành riêng cho Trung Quốc đã sẵn sàng

Trung Quốc được đánh giá là thị trường vô cùng rộng lớn cho các hoạt động kinh doanh nhưng thực tế là nó không...

Tải miễn phí game 7554 – Sống lại những ký ức hào hùng

7554 là trò chơi điện tử thể loại bắn súng góc nhìn thứ nhất có đồ hoạ đẹp đầu tiên của Việt Nam, do...

Đổi mật khẩu tài khoản Zalo

Nếu bạn đang dùng ứng dụng Zalo trên máy tính và cả trên điện thoại di động nhưng đôi khi không đăng nhập vào...