OAuth 2.0 und JWT-Autorisierung in TypeScript: vollständiger Leitfaden

OAuth 2.0 und JWT-Autorisierung in TypeScript: Vollständiger Leitfaden

Moderne Webanwendungen und APIs erfordern zuverlässige Mechanismen zur Authentifizierung und Autorisierung. Die beiden beliebtesten Standards — OAuth 2.0 und JWT (JSON Web Tokens) — werden häufig zusammen verwendet, um sichere und skalierbare Systeme zu erstellen. In diesem Artikel werden wir erläutern, wie man OAuth 2.0- und JWT-Autorisierung in TypeScript mit Express.js und gängigen Bibliotheken implementiert.

Was sind OAuth 2.0 und JWT?

OAuth 2.0 ist ein Autorisierungsprotokoll, das es Anwendungen ermöglicht, eingeschränkten Zugriff auf Benutzerressourcen zu erhalten, ohne deren Anmeldedaten weiterzugeben. Es wird häufig für die Anmeldung über soziale Netzwerke (Google, GitHub, Facebook) verwendet.

JWT (JSON Web Token) ist ein kompaktes und eigenständiges Token, das Informationen über den Benutzer enthält und ohne Datenbankabfrage überprüft werden kann. JWT wird häufig als Format für Access-Token in OAuth 2.0 verwendet.

Zusammen bilden sie einen leistungsstarken Mechanismus: OAuth 2.0 verwaltet den Prozess der Tokenausgabe, während JWT deren sichere Übertragung und Verifizierung gewährleistet.

Projekteinrichtung und Abhängigkeiten installieren

Erstellen wir ein neues TypeScript-Projekt. Stellen Sie sicher, dass Node.js (Version 18+) installiert ist.

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

Installieren Sie die erforderlichen Abhängigkeiten:

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

Erstellen Sie die Datei tsconfig.json:

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

Projektstruktur:

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

Implementierung der JWT-Autorisierung

JWT-Token bestehen aus drei Teilen: Header, Payload und Signatur. Betrachten wir eine grundlegende Implementierung in TypeScript.

Erstellen wir einen Service für die Arbeit mit 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;};

Erstellen wir Middleware zur Überprüfung von 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