nodejs不需要登陸的驗證碼-前端問答-PHP中文網

nodejs不需要登陸的驗證碼

王林

發布： 2023-05-13 18:17:38

原創

693 人瀏覽過

隨著網路的發展，驗證碼已經成為了保障網站安全的重要工具。許多網站在使用者進行敏感操作、註冊、登入等操作時都需要輸入驗證碼，以防止惡意程式和機器人攻擊，確保網站的安全性和真實性。然而，在某些場景下，為了提高使用者體驗和操作便利性，需要提供一些不需要登入的驗證碼服務，這時候 JavaScript 所依賴的 Node.js 就可以發揮其優秀的特性。

Node.js 的非同步架構和 JavaScript 語法的易學性使得其在驗證碼服務方面非常實用。透過 Node.js 的特性，我們可以很方便地實現不需要登入的驗證碼服務，並且部署和維護都非常簡單。

首先，我們需要了解驗證碼的原理和組成。一般來說，驗證碼服務有以下幾個組成部分：

驗證碼產生器：用於產生驗證碼圖片。
驗證碼識別器：用於識別驗證碼圖片中的驗證碼字元。
快取器：用於暫時儲存產生的驗證碼字元以及對應的驗證結果。

當使用者在需要驗證碼的場景時，服務端會隨機產生一組驗證碼圖片，其中包含若干個驗證碼字元。使用者需要輸入正確的驗證碼字元才能進行後續的操作。使用者輸入驗證碼後，服務端會將使用者輸入的驗證碼字元與快取器中對應的結果做比對，以判斷使用者輸入是否正確。

在 Node.js 中，可以使用第三方函式庫來實作驗證碼服務的各個組成部分。以下介紹一個例子，使用 Canvas 和 nodemailer 函式庫實作驗證碼服務。

首先，安裝必要的依賴函式庫：

npm install canvas nodemailer

登入後複製

接著，寫程式碼：

const express = require('express');
const Canvas = require('canvas');
const nodemailer = require('nodemailer');

const app = express();
const PORT = process.env.PORT || 3000;
const WIDTH = 100;
const HEIGHT = 50;

// 生成随机字符串
const randomString = () => {
  const CHARACTERS = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
  let result = '';
  for (let i = 0; i < 6; i++) {
    result += CHARACTERS.charAt(Math.floor(Math.random() * CHARACTERS.length));
  }
  return result;
};

// 生成验证码图片
const generateCaptcha = () => {
  const canvas = Canvas.createCanvas(WIDTH, HEIGHT);
  const ctx = canvas.getContext('2d');
  const captcha = randomString();
  ctx.clearRect(0, 0, WIDTH, HEIGHT);
  ctx.font = 'bold 25px sans-serif';
  ctx.fillStyle = '#333';
  ctx.fillText(captcha, 20, 35);
  return { captcha, dataURL: canvas.toDataURL() };
};

// 初始化缓存
const cache = {};

app.use(express.static('public'));

// 根路由返回验证码图片
app.get('/', (req, res) => {
  const captcha = generateCaptcha();
  cache[captcha.captcha] = true;
  res.send(`<img src="${captcha.dataURL}">`);
});

// 验证码验证路由
app.get('/captcha', (req, res) => {
  const { captcha } = req.query;
  if (captcha && cache[captcha]) {
    delete cache[captcha];
    res.send({ success: true });
  } else {
    res.send({ success: false });
  }
});

// 发送邮件路由
app.get('/email', (req, res) => {
  const { email } = req.query;
  if (email) {
    const captcha = generateCaptcha();
    cache[captcha.captcha] = email;
    const transporter = nodemailer.createTransport({
      host: 'smtp.ethereal.email',
      port: 587,
      secure: false,
      auth: {
        user: testAccount.user,
        pass: testAccount.pass
      }
    });
    const message = {
      from: 'nodejs-captcha@example.com',
      to: email,
      subject: '验证码',
      text: captcha.captcha,
      html: `<img src="${captcha.dataURL}">`
    };
    transporter.sendMail(message, (err, info) => {
      if (err) {
        console.log(err);
        res.send({ success: false });
      } else {
        console.log(info);
        res.send({ success: true });
      }
    });
  } else {
    res.send({ success: false });
  }
});

app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});

登入後複製

在這個範例中，我們使用Canvas 函式庫產生了一個大小為100x50 的驗證碼圖片。並且使用 nodemailer 庫向指定的郵箱發送了一封郵件，郵件中包含了生成的驗證碼圖片。同時，在服務端，我們使用快取器（這裡使用了一個 JavaScript 物件）暫存了驗證碼字元和對應的郵件地址或驗證結果。在驗證碼驗證的路由中，服務端會將使用者輸入的驗證碼字元與快取器中對應的結果進行比對。

當使用者存取根路由時，服務端產生了一個新的驗證碼圖片，並將驗證碼字元作為鍵名儲存到快取器中，以保證每個驗證碼字元的唯一性。然後將產生的驗證碼圖片直接透過 HTTP 傳回給瀏覽器。使用者即使不登入也可以存取這個路由以取得驗證碼圖片。

當使用者在需要進行驗證碼驗證的場景時，服務端會自動產生一個新的驗證碼圖片，並將驗證碼字元作為鍵名存儲，這個驗證碼字元使用者需要輸入。使用者輸入完驗證碼字元之後，服務端會將其與快取器中對應的鍵名做比對以判斷是否正確。

為了提升驗證碼服務的安全性，可以使用更複雜的驗證碼來產生演算法和更嚴謹的驗證邏輯。同時，在實際生產環境中，需要注意快取清理和限定介面存取頻率等細節問題。

總之，使用 Node.js 非常適合實現不需要登入的驗證碼服務。上述例子只是其中的一個小例子，大家可以根據自己的需求來實現自訂的驗證碼服務。

以上是nodejs不需要登陸的驗證碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！