OAuth 2.0 und JWT-Autorisierung in TypeScript: Vollständiger Leitfaden für Anfänger

Einführung in OAuth 2.0 und JWT in TypeScript

In der modernen Webentwicklung ist die sichere Autorisierung von Benutzern die Grundlage jeder Anwendung. Die beiden gängigsten Standards – OAuth 2.0 und JWT (JSON Web Token) – ermöglichen die Implementierung eines zuverlässigen Authentifizierungssystems und einer Zugriffskontrolle. In diesem Artikel werden wir erläutern, wie diese Technologien in TypeScript kombiniert werden können, um eine sichere API von Grund auf zu erstellen.

Dieser Artikel richtet sich an Anfänger-Entwickler, die bereits mit den Grundlagen von TypeScript vertraut sind und verstehen möchten, wie Autorisierung in der Praxis funktioniert. Wir werden uns nicht mit komplexen theoretischen Ausführungen befassen, sondern uns auf konkrete Codebeispiele konzentrieren.

Was ist OAuth 2.0?

OAuth 2.0 ist ein Autorisierungsprotokoll, das es Drittanwendungen ermöglicht, eingeschränkten Zugriff auf die Ressourcen eines Benutzers zu erhalten, ohne dessen Passwort weiterzugeben. Stellen Sie sich vor, Sie möchten sich über Google auf einer Website anmelden: Sie geben der Website nicht Ihr Google-Passwort, sondern erlauben ihr lediglich, Ihre E-Mail und Ihren Namen abzurufen. Das ist OAuth 2.0.

Was ist JWT?

JWT (JSON Web Token) ist ein kompaktes und in sich geschlossenes Token-Format, das alle notwendigen Informationen über den Benutzer in verschlüsselter Form enthält. Das Token besteht aus drei Teilen: Header, Nutzlast (Payload) und Signatur. Dank der Signatur kann der Server sicher sein, dass das Token nicht manipuliert wurde.

1. Projekteinrichtung und Installation von Abhängigkeiten

Zunächst erstellen wir ein neues TypeScript-Projekt. Öffnen Sie das Terminal und führen Sie die folgenden Befehle aus:

mkdir oauth-jwt-ts\ncd oauth-jwt-ts\nnpm init -y\nnpm install express jsonwebtoken bcrypt dotenv cors\nnpm install -D typescript ts-node @types/express @types/jsonwebtoken @types/bcrypt @types/cors @types/node nodemon

Erstellen Sie eine Datei tsconfig.json mit der Basiskonfiguration:

{\n  "compilerOptions": {\n    "target": "ES2020",\n    "module": "commonjs",\n    "outDir": "./dist",\n    "rootDir": "./src",\n    "strict": true,\n    "esModuleInterop": true,\n    "skipLibCheck": true,\n    "forceConsistentCasingInFileNames": true\n  },\n  "include": ["src/**/*"],\n  "exclude": ["node_modules"]\n}

Die Ordnerstruktur sieht wie folgt aus:

\n
• src/ – Quellcode
\n
• src/controllers/ – Controller
\n
• src/middleware/ – Middleware zur Token-Überprüfung
\n
• src/models/ – Datenmodelle
\n
• src/routes/ – Routen
\n
• .env – Umgebungsvariablen
\n

2. Implementierung der grundlegenden Authentifizierung mit JWT

Beginnen wir mit der Erstellung eines einfachen Registrierungs- und Anmeldemechanismus unter Verwendung von JWT. Erstellen wir eine Datei src/config.ts zum Speichern von Konstanten:

import dotenv from 'dotenv';\ndotenv.config();\n\nexport const config = {\n  jwtSecret: process.env.JWT_SECRET || 'your-secret-key',\n  jwtExpiresIn: process.env.JWT_EXPIRES_IN || '15m',\n  refreshTokenExpiresIn: process.env.REFRESH_TOKEN_EXPIRES_IN || '7d',\n  port: process.env.PORT || 3000\n};

Jetzt erstellen wir eine Middleware zur Überprüfung des JWT-Tokens. Datei src/middleware/auth.middleware.ts:

import { Request, Response, NextFunction } from 'express';\nimport jwt from 'jsonwebtoken';\nimport { config } from '../config';\n\nexport interface AuthRequest extends Request {\n  user?: { userId: string; email: string };\n}\n\nexport const authenticateToken = (req: AuthRequest, res: Response, next: NextFunction) => {\n  const authHeader = req.headers['authorization'];\n  const token = authHeader && authHeader.split(' ')[1]; // Bearer TOKEN\n\n  if (!token) {\n    return res.status(401).json({ message: 'Token nicht bereitgestellt' });\n  }\n\n  try {\n    const decoded = jwt.verify(token, config.jwtSecret) as { userId: string; email: string };\n    req.user = decoded;\n    next