Tạo mã Captcha bằng Node.js

Hướng dẫn chi tiết cách tạo mã Captcha trong ứng dụng Node.js giúp bảo vệ trang web của bạn khỏi các bot tự động và cải thiện tính bảo mật.

Trong bài viết này, chúng ta sẽ tìm hiểu cách tạo mã Captcha sử dụng thư viện captcha-generator trong Node.js. Chúng ta sẽ thực hiện một ví dụ đơn giản để giúp bạn tích hợp mã Captcha vào ứng dụng của mình.

Mã Node.js:

const express = require('express');
const { createCanvas } = require('canvas');
const app = express();

app.get('/captcha', (req, res) => {
    const canvas = createCanvas(200, 100);
    const ctx = canvas.getContext('2d');

    // Tạo nền
    ctx.fillStyle = '#ffffff';
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    // Tạo mã ngẫu nhiên
    const captchaText = Math.random().toString(36).substring(2, 8);

    // Vẽ văn bản Captcha
    ctx.fillStyle = '#000000';
    ctx.font = '40px Arial';
    ctx.fillText(captchaText, 50, 50);

    // Gửi hình ảnh Captcha về client
    res.set('Content-Type', 'image/png');
    canvas.pngStream().pipe(res);
});

app.listen(3000, () => {
    console.log('Server is running on http://localhost:3000/captcha');
});

Giải thích chi tiết từng dòng code:

1. const express = require('express');: Nhập thư viện Express để tạo ứng dụng web.
2. const { createCanvas } = require('canvas');: Nhập createCanvas từ thư viện canvas để tạo hình ảnh.
3. app.get('/captcha', (req, res) => {...});: Định nghĩa một route để tạo mã Captcha khi truy cập vào /captcha.
4. const canvas = createCanvas(200, 100);: Tạo một canvas có kích thước 200x100 pixel.
5. ctx.fillStyle = '#ffffff';: Đặt màu nền cho canvas là trắng.
6. ctx.fillRect(0, 0, canvas.width, canvas.height);: Vẽ một hình chữ nhật trắng phủ toàn bộ canvas.
7. const captchaText = Math.random().toString(36).substring(2, 8);: Tạo mã ngẫu nhiên bằng cách sử dụng số ngẫu nhiên và chuyển đổi sang định dạng base-36.
8. ctx.fillText(captchaText, 50, 50);: Vẽ mã Captcha lên canvas tại vị trí (50, 50).
9. res.set('Content-Type', 'image/png');: Thiết lập loại nội dung trả về là hình ảnh PNG.
10. canvas.pngStream().pipe(res);: Gửi hình ảnh Captcha về client.

Yêu cầu hệ thống:

• Node.js 14.x trở lên
• Thư viện express và canvas

Cách cài đặt các thư viện để chạy được đoạn mã Node.js trên:

Chạy các lệnh sau trong terminal:

npm install express canvas

Lời khuyên:

• Bạn có thể tùy chỉnh mã Captcha bằng cách thay đổi kiểu chữ, màu sắc hoặc kích thước để phù hợp với thiết kế của trang web.
• Để bảo mật tốt hơn, hãy lưu mã Captcha vào session và kiểm tra nó khi người dùng gửi biểu mẫu.

---