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://anhkiet.biz
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 cho Hura Apps - một startup nhỏ về công nghệ 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

Trang web hỗ trợ tìm kiếm trên Facebook

Facebook là mạng xã hội lớn nhất hiện nay. Thông tin được người dùng chia sẻ trên mạng xã hội này là vô cùng...

Giới thiệu một số công nghệ, dịch vụ mà Hura Apps đang dùng cho mô hình SaaS

Hura Apps là nhóm phát triển các ứng dụng web hỗ trợ cho nền tảng Shopify. Hura Apps hoạt động theo mô hình SaaS....

Hành trình kiếm 500 triệu/tháng từ việc xuất bản ứng dụng lên Shopify App Store

Đây là câu chuyện của một lập trình viên người Pháp có tên Axel Hardy được chính anh chia sẻ trên Twitter của mình....

Hura Apps nhận được gói hỗ trợ khởi nghiệp $10.000 từ Amazon Web Services

Mới đây Hura Apps đã nhận được gói hỗ trợ khởi nghiệp $10.000 từ Amazon Web Services. Đây là gói hỗ trợ dành cho Hura...

PayPal đang phát triển đồng stablecoin của riêng mình

Công ty PayPal đang tích cực làm việc để ra mắt stablecoin của riêng mình như là một phần của việc thúc đẩy sử...

BẠN XEM CHƯA

Chăm sóc máy tính toàn diện với Comodo PC TuneUp

Comodo nổi tiếng với các sản phẩm phần mềm chuyên về bảo mật. Mới đây hãng này vừa tung ra một sản phẩm mới...

Website cung cấp mã bưu chính của tất cả các địa phương trên thế giới

Khi đăng ký một số dịch vụ trên mạng chắc hẳn không ít lần bạn sẽ yêu cầu nhập mã bưu chính (postcode, zipcode)....

Đổi màu cho biểu tượng thư mục với Folder Colorizer

Màu vàng là màu mặc định của các biểu tượng thư mục trong Windows. Khi bạn muốn đánh dấu một thư mục đặc biệt...

Google dự định thay thế mật khẩu thông thường bằng cơ chế xác thực thông minh

Tầm quan trọng của việc bảo mật các thông tin cá nhân đã tăng lên do sự gia tăng các cuộc tấn công trực...

Cách chuyển tập tin từ tài khoản Google Drive này sang tài khoản khác

Google Drive cung cấp 15 GB dung lượng miễn phí. Nghe có vẻ nhiều nhưng hãy nhớ rằng không gian này dùng chung cho...