在 Web 應用程式中建立和保護 JWT 身份驗證

介紹

JSON Web 令牌 (JWT) 是一種緊湊且獨立的方式，可將資訊作為 JSON 物件在各方之間安全地傳輸。 JWT 廣泛用於對 Web 應用程式中的使用者進行身份驗證。在本教程中，我們將使用 JWT 身份驗證來建立 Node.js 和 Express 後端。

什麼是智威湯遜？

JWT（JSON Web Token）是一種開放式標準，用於以 JSON 物件的形式在各​​方之間安全地傳輸資訊。每個令牌由三個部分組成：

1. 標頭：包含有關令牌類型和雜湊演算法的資訊。
2. 有效負載：包含使用者資訊和聲明。
3. 簽章：驗證令牌的完整性。

範例 JWT

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VySWQiOiIxMjM0IiwidXNlcm5hbWUiOiJqb2huZG9lIn0.H6BBiB1y5eXKXvW9bbjT2Rg8Jp4oE4Y5Kxf_sDF7Kzg

設定項目

1. 建立一個新的專案目錄：
   

   mkdir jwt-auth-app
   cd jwt-auth-app
   

2. 初始化一個新的 Node.js 專案：
   

   npm init -y
   

安裝依賴項

安裝必要的依賴項：

npm install express jsonwebtoken bcryptjs dotenv express-validator

• express：Node.js 的 Web 框架。
• jsonwebtoken：用於產生和驗證 JWT 的函式庫。
• bcryptjs：用於雜湊密碼的函式庫。
• dotenv：用於環境變數。
• express-validator：用於驗證輸入資料。

設定伺服器

在 server.js 中建立基本伺服器設定：

// server.js
require('dotenv').config();
const express = require('express');
const app = express();
app.use(express.json());

// Import Routes
const authRoutes = require('./routes/auth');
app.use('/api/auth', authRoutes);

const PORT = process.env.PORT || 5000;
app.listen(PORT, () => console.log(`Server running on port ${PORT}`));

建立.env檔案用於儲存環境變數：

PORT=5000
JWT_SECRET=your_jwt_secret_key

建立用戶認證路由

1. 為身份驗證路由建立routes/auth.js檔案：

// routes/auth.js
const express = require('express');
const { body, validationResult } = require('express-validator');
const bcrypt = require('bcryptjs');
const jwt = require('jsonwebtoken');
const router = express.Router();

const users = []; // In-memory user storage

// Signup Route
router.post(
  '/signup',
  [
    body('username').isLength({ min: 3 }),
    body('password').isLength({ min: 5 })
  ],
  async (req, res) => {
    const errors = validationResult(req);
    if (!errors.isEmpty()) return res.status(400).json({ errors: errors.array() });

    const { username, password } = req.body;
    const hashedPassword = await bcrypt.hash(password, 10);

    users.push({ username, password: hashedPassword });
    res.status(201).json({ message: 'User registered successfully' });
  }
);

// Login Route
router.post(
  '/login',
  [
    body('username').notEmpty(),
    body('password').notEmpty()
  ],
  async (req, res) => {
    const errors = validationResult(req);
    if (!errors.isEmpty()) return res.status(400).json({ errors: errors.array() });

    const { username, password } = req.body;
    const user = users.find(u => u.username === username);

    if (!user) return res.status(400).json({ message: 'Invalid credentials' });

    const isMatch = await bcrypt.compare(password, user.password);
    if (!isMatch) return res.status(400).json({ message: 'Invalid credentials' });

    const token = jwt.sign({ username }, process.env.JWT_SECRET, { expiresIn: '1h' });
    res.json({ token });
  }
);

module.exports = router;

1. 路線說明

• 註冊路線：在儲存使用者之前驗證並散列密碼。
• 登入路由：驗證憑證、檢查密碼並頒發 JWT 令牌。

產生 JWT 令牌

• jwt.sign 方法產生一個包含使用者資訊的令牌。
• JWT_SECRET 用於簽署令牌，應保持安全和私密。

const token = jwt.sign({ username }, process.env.JWT_SECRET, { expiresIn: '1h' });

使用 JWT 保護路由

為了保護路由，請建立一個中間件來驗證令牌。

1. 建立中間件/auth.js：

// middleware/auth.js
const jwt = require('jsonwebtoken');

module.exports = function (req, res, next) {
  const token = req.header('Authorization')?.split(' ')[1];
  if (!token) return res.status(401).json({ message: 'Access denied' });

  try {
    const decoded = jwt.verify(token, process.env.JWT_SECRET);
    req.user = decoded;
    next();
  } catch (ex) {
    res.status(400).json({ message: 'Invalid token' });
  }
};

1. 保護 server.js 中的路由：

建立需要有效令牌的受保護路由：

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VySWQiOiIxMjM0IiwidXNlcm5hbWUiOiJqb2huZG9lIn0.H6BBiB1y5eXKXvW9bbjT2Rg8Jp4oE4Y5Kxf_sDF7Kzg

中介軟體說明

• 中介軟體檢查授權標頭中是否有令牌。
• 如果令牌有效，則使用者的資訊將會新增到 req 物件中，從而允許存取受保護的路由。

結論

在本教學中，我們介紹了在 Node.js 和 Express 後端設定 JWT 驗證的基礎知識。本指南示範了：

1. 設定註冊和登入的身份驗證路由。
2. 建立和驗證 JWT 令牌。
3. 使用基於 JWT 的中間件保護路由。

JWT 是一種處理身份驗證的強大方法，可讓您的 Web 應用程式既安全又可擴展。

以上是在 Web 應用程式中建立和保護 JWT 身份驗證的詳細內容。更多資訊請關注PHP中文網其他相關文章！