Creating Captcha in Node.js

A detailed guide on how to create Captcha in your Node.js application to protect your website from automated bots and enhance security.

In this article, we will learn how to create Captcha using the captcha-generator library in Node.js. We will implement a simple example to help you integrate Captcha into your application.

Node.js Code

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');

    // Create background
    ctx.fillStyle = '#ffffff';
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    // Generate random text
    const captchaText = Math.random().toString(36).substring(2, 8);

    // Draw Captcha text
    ctx.fillStyle = '#000000';
    ctx.font = '40px Arial';
    ctx.fillText(captchaText, 50, 50);

    // Send Captcha image to client
    res.set('Content-Type', 'image/png');
    canvas.pngStream().pipe(res);
});

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

Detailed explanation:

1. const express = require('express');: Import the Express library to create a web application.
2. const { createCanvas } = require('canvas');: Import createCanvas from the canvas library to create images.
3. app.get('/captcha', (req, res) => {...});: Define a route to create Captcha when accessing /captcha.
4. const canvas = createCanvas(200, 100);: Create a canvas with dimensions of 200x100 pixels.
5. ctx.fillStyle = '#ffffff';: Set the background color of the canvas to white.
6. ctx.fillRect(0, 0, canvas.width, canvas.height);: Draw a white rectangle covering the entire canvas.
7. const captchaText = Math.random().toString(36).substring(2, 8);: Generate a random Captcha code using a random number and converting it to base-36.
8. ctx.fillText(captchaText, 50, 50);: Draw the Captcha code on the canvas at position (50, 50).
9. res.set('Content-Type', 'image/png');: Set the content type of the response to PNG image.
10. canvas.pngStream().pipe(res);: Send the Captcha image to the client.

System Requirements:

• Node.js version 14.x or higher
• express and canvas libraries

How to install the libraries needed to run the Node.js code above:

Run the following commands in the terminal:

npm install express canvas

Tips:

• You can customize the Captcha code by changing the font style, colors, or sizes to match your website design.
• For better security, store the Captcha code in a session and validate it when the user submits the form.

---