Với các website cho phép người dùng gửi dữ liệu lên và lưu vào Database thì việc sử dụng Captcha là cần thiết. Hãy tưởng tượng nếu không có Captcha, người dùng có thể gửi dữ liệu liên tục lên Server (spam) làm Database bị phình lên nhanh chóng.
Các Captcha kiểu cũ đơn giản thì hoàn toàn có thể vượt qua 1 cách dễ dàng bằng cách sử dụng các dịch vụ trung gian. Tuy nhiên với Captcha kiểu mới của Google (reCAPTCHA) thì độ bảo mật rất cao, dễ dàng tích hợp vào website và đem lại trải nghiệm tốt hơn (captcha hiển thị theo các hình thức khác nhau từ đơn giản với 1 cú click chuột cho đến phức tạp như chọn ảnh theo chủ đề, ...)
Để sử dụng dịch vụ reCAPTCHA, chúng ta sẽ cần một tài khoản Google và đăng ký tại link sau: https://www.google.com/recaptcha/admin
Sau khi đăng ký xong chúng ta sẽ có mã nhúng kèm key xác thực:
Tích hợp vào giao diện dưới dạng Widget
Sau khi đăng ký xong chúng ta sẽ nhúng Widget Captcha vào giao diện theo hướng dẫn phần client-side integration.
Thêm thư viện vào phần header của trang web:
Và nhúng mã Widget vào nơi mà bạn muốn đặt Captcha:
Xác thực phía Server
Sau khi hiển thị được Captcha trên giao diện, chúng ta sẽ kiểm tra lại xem người dùng đã vượt qua được Captcha hay chưa ở trên Server (vì code ngoài Frontend hoàn toàn có thể chỉnh sửa được).
Google reCAPTCHA cung cấp cho chúng ta 1 API để kiểm tra bằng cách gửi request với phương thức POST lên địa chỉ https://www.google.com/recaptcha/api/siteverify.
Dữ liệu bao gồm 3 trường như trong phần đăng ký ở trên là:
- secret: Mã bí mật lấy ở trang đăng ký.
- response: Mã trả về khi người dùng hoàn thành Captcha. Có thể lấy bằng hàm grecaptcha.getResponse() phía Client và gửi lên server khi submit form (grecaptcha là 1 biến Javascript global khởi tạo khi nhúng thư viện recaptcha).
- remoteip: IP của client (không bắt buộc).
Sau khi gửi request chúng ta sẽ nhận được kết quả trả về là 1 String dạng JSON object như sau:
{
"success": true|false,
"challenge_ts": timestamp, // timestamp of the challenge load (ISO format yyyy-MM-dd'T'HH:mm:ssZZ)
"hostname": string, // the hostname of the site where the reCAPTCHA was solved
"error-codes": [...] // optional
}
Demo code xử lý phía Server bằng Nodejs dùng cho form đăng ký
let request = require('request'); // Sử dụng thư viện request để gửi request lên Google API
let data = req.body; // Dữ liệu từ form submit lên bao gồm thông tin đăng ký và captcha response
let captchaResponse = data.captchaResponse;
if (captchaResponse) {
request({
url: 'https://www.google.com/recaptcha/api/siteverify',
method: 'POST',
form: {
secret: '6LdlzxcUAAAAAPF5nZYAtT12hlXAhjXXXXXXXXXX',
response: captchaResponse
}
}, function (error, response, body) {
// Parse String thành JSON object
try {
body = JSON.parse(body);
} catch (err) {
body = {};
}
if (!error && response.statusCode == 200 && body.success) {
// Captcha hợp lệ, xử lý tiếp phần đăng ký tài khoản
} else {
// Xử lý lỗi nếu Captcha không hợp lệ
}
});
} else {
// Xử lý lỗi nếu không có Captcha
}Làm quen với các quy tắc lập trình chuyên nghiệp trong khóa thực tập Node JS Full Stack
Cải tiến UX Frontend
Vậy là phần tích hợp Captcha đã hoàn tất, tuy nhiên để tạo trải nghiệm tốt cho người dùng chúng ta nên sửa 1 chút ở giao diện: Chỉ khi người dùng đã hoàn thành Captcha xong thì mới cho phép bấm vào nút Đăng ký.
- Bổ sung thêm hàm Callback cho Captcha (hàm này sẽ được gọi khi người dùng check xong Captcha) bằng cách thêm thuộc tính data-callback ở Widget:
- Viết hàm xử lý khi nhận được kết quả từ Captcha:
function enableRegisterButton() {
// Kiểm tra xem form đã validate chưa và bỏ trạng thái disable của nút Đăng ký
}
Tham khảo tài liệu hướng dẫn đầy đủ: https://developers.google.com/recaptcha/intro
Bình luận