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 tạo bộ đếm lùi thời gian bằng JavaScript

Mới đó mà đã gần nửa năm 2021 trôi qua. Tình hình dịch bệnh COVID-19 cũng chẳng mấy khả quan. Nhưng vẫn cứ hy...

Hướng dẫn tạo hiệu ứng mưa rơi trên trang web với JavaScript

Quy Nhơn chớm bước vào mùa hè với nắng nóng. Những lúc thế này tự nhiên lại thèm những cơn mưa để giải tỏa...

Instagram ra mắt tính năng tạo chú thích tự động cho Stories và Reels

Tiếp bước TikTok, Instagram hiện cũng đã ra mắt tính năng tạo chú thích (caption) tự động của riêng mình. Tính năng mới này đã...

Facebook đã chính thức cập nhật tính năng “bong bóng chat” trên iPhone

Mới đây, Facebook đã chính thức cập nhật tính năng Chat Heads (hay còn gọi là bong bóng chat) trên iPhone, cho phép người...

Facebook Workplace đạt mốc 7 triệu người dùng trả phí

Vào thứ Ba vừa rồi, Facebook vừa mới thông báo ứng dụng Facebook Workplace của họ tính cho tới thời điểm hiện tại đã...

BẠN XEM CHƯA

Bing Translator ứng dụng dịch thuật cho Windows 8

Bing Translator là một sản phẩm ứng dụng mới của công cụ dịch thuật trực tuyến Bing trên nền Windows 8 hỗ trợ người...

Low Orbit Ion Cannon – Công cụ tấn công DoS mã nguồn mở

Low Orbit Ion Cannon (LOIC) là phần mềm mã nguồn mở hỗ trợ kiểm tra và tấn công thử nghiệm phương thức từ chối...

Phía không nhau

Anh đi về phía không em Một ngày ngạo nghễ, nghìn đêm rã rời Môi khô cố thắm miệng cười Héo vàng gượng gạo nói lời tươi...

Paragon Drive Copy – Sao chép cả ổ cứng

Bạn cần thực hiện thao tác sao chép dữ liệu từ ổ cứng cũ sang ổ cứng mới và đang loay hoay tìm phần...

Mẹo nhỏ để nhận ngay 1 tháng VIP miễn phí cho tài khoản NhacCuaTui

Với 1 tài khoản VIP trên trang Nhaccuatui.com (NCT) người dùng có thể thoải mái nghe và tải nhạc chất lượng cao. Bạn cũng...