OAuth 2.0 和 JWT 授权在 TypeScript 中的完整指南

OAuth 2.0 和 JWT 授权在 TypeScript 中的完整指南

现代 Web 应用程序和 API 需要可靠的认证和授权机制。两个最流行的标准——OAuth 2.0 和 JWT（JSON Web Tokens）——通常一起使用来创建安全且可扩展的系统。在本文中，我们将使用 Express.js 和流行的库，详细讲解如何在 TypeScript 中实现 OAuth 2.0 和 JWT 授权。

什么是 OAuth 2.0 和 JWT？

OAuth 2.0 是一种授权协议，它允许应用程序在不传递用户凭证的情况下获取对用户资源的有限访问权限。它广泛用于通过社交网络（Google、GitHub、Facebook）登录。

JWT（JSON Web Token） 是一种紧凑且自包含的令牌，其中包含用户信息，并且无需查询数据库即可进行验证。JWT 通常用作 OAuth 2.0 中 access 令牌的格式。

它们共同构成了一个强大的机制：OAuth 2.0 管理令牌的颁发过程，而 JWT 则确保其安全传输和验证。

项目设置和依赖安装

让我们创建一个新的 TypeScript 项目。确保您已安装 Node.js（版本 18+）。

mkdir oauth-jwt-typescriptcd oauth-jwt-typescriptnpm init -y

安装必要的依赖：

npm install express jsonwebtoken passport passport-google-oauth20 dotenv bcryptjsnpm install -D typescript @types/express @types/jsonwebtoken @types/passport @types/passport-google-oauth20 @types/bcryptjs ts-node nodemon

创建 tsconfig.json 文件：

{  "compilerOptions": {    "target": "ES2020",    "module": "commonjs",    "strict": true,    "esModuleInterop": true,    "skipLibCheck": true,    "outDir": "./dist"  },  "include": ["src/**/*"]}

项目结构：

src/  ├── config/  │   └── passport.ts  ├── controllers/  │   └── authController.ts  ├── middleware/  │   └── authMiddleware.ts  ├── models/  │   └── user.ts  ├── routes/  │   └── authRoutes.ts  ├── services/  │   └── jwtService.ts  └── app.ts

实现 JWT 授权

JWT 令牌由三部分组成：头部（header）、有效载荷（payload）和签名（signature）。让我们看看在 TypeScript 中的基本实现。

创建用于处理 JWT 的服务（src/services/jwtService.ts）：

import jwt from 'jsonwebtoken';import dotenv from 'dotenv';

dotenv.config();

const ACCESS_SECRET = process.env.JWT_ACCESS_SECRET || 'access-secret-key';const REFRESH_SECRET = process.env.JWT_REFRESH_SECRET || 'refresh-secret-key';

export interface TokenPayload {  userId: string;  email: string;  role: string;}

export const generateAccessToken = (payload: TokenPayload): string => {  return jwt.sign(payload, ACCESS_SECRET, { expiresIn: '15m' });};

export const generateRefreshToken = (payload: TokenPayload): string => {  return jwt.sign(payload, REFRESH_SECRET, { expiresIn: '7d' });};

export const verifyAccessToken = (token: string): TokenPayload => {  return jwt.verify(token, ACCESS_SECRET) as TokenPayload;};

export const verifyRefreshToken = (token: string): TokenPayload => {  return jwt.verify(token, REFRESH_SECRET) as TokenPayload;};

创建用于验证 JWT 的中间件（src/middleware/authMiddleware.ts）：

import { Request, Response, NextFunction } from 'express';import { verifyAccessToken } from '../services/jwtService';

export interface AuthRequest extends Request {  user?: {    userId: string;    email: string;    role: string;  };}

export const authenticateJWT = (req: AuthRequest, res: Response, next: NextFunction): void => {  const authHea