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

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

Moderne Webanwendungen kommen selten ohne Authentifizierungs- und Autorisierungsmechanismen aus. Die beiden beliebtesten Standards sind OAuth 2.0 (ein Protokoll zur Zugriffsdelegierung) und JWT (JSON Web Token, eine kompakte Methode zur Datenübertragung). In diesem Artikel werden wir erläutern, wie man OAuth 2.0 und JWT-Autorisierung in TypeScript implementiert, indem wir einen einfachen, aber funktionsfähigen Server erstellen. Das Material richtet sich an Anfänger, die mit den Grundlagen von TypeScript und Node.js vertraut sind.

Was sind OAuth 2.0 und JWT?

Bevor wir Code schreiben, ist es wichtig, die Theorie zu verstehen.

OAuth 2.0

Dies ist ein Protokoll, das es einem Benutzer ermöglicht, einer Drittanwendung eingeschränkten Zugriff auf seine Ressourcen (z. B. auf sein GitHub- oder Google-Profil) zu gewähren, ohne seinen Benutzernamen und sein Passwort weiterzugeben. In OAuth 2.0 gibt es mehrere Rollen:

• Resource Owner — der Eigentümer der Ressource (der Benutzer).
• Client — die Anwendung, die Zugriff erhalten möchte.
• Authorization Server — der Server, der nach erfolgreicher Authentifizierung Token ausstellt.
• Resource Server — der Server, der die geschützten Daten speichert.

Das häufigste Szenario ist der "Authorization Code Flow", bei dem der Benutzer auf die Seite des Anbieters weitergeleitet wird, sich anmeldet und der Server dann den erhaltenen Code gegen ein Token eintauscht.

JWT (JSON Web Token)

JWT ist eine Zeichenfolge im Format header.payload.signature, die Daten (Claims) enthält und mit einem geheimen Schlüssel signiert ist. Es wird als Access Token (kurzlebig) oder Refresh Token (langlebig) in OAuth 2.0 verwendet. Der Vorteil von JWT ist, dass es eigenständig ist: Der Server kann es überprüfen, ohne auf eine Datenbank zugreifen zu müssen.

Projekt einrichten und Abhängigkeiten installieren

Wir erstellen ein neues TypeScript-Projekt. Stellen Sie sicher, dass Node.js und npm installiert sind.

mkdir oauth-jwt-typescriptcd oauth-jwt-typescriptnpm init -ynpm install express jsonwebtoken dotenv cors cookie-parsernpm install -D typescript @types/node @types/express @types/jsonwebtoken @types/cors @types/cookie-parser ts-node nodemonnpx tsc --init

In der Datei tsconfig.json kommentieren Sie die Zeile "outDir": "./dist" aus und setzen Sie "rootDir": "./src". Erstellen Sie die Ordnerstruktur:

src/  ├── index.ts  ├── auth.ts  ├── middleware.ts  └── types.ts.env

Geben Sie in der Datei .env Folgendes an:

ACCESS_TOKEN_SECRET=your-secret-key-123REFRESH_TOKEN_SECRET=your-refresh-secret-456PORT=3000

Implementierung des Servers mit OAuth 2.0 und JWT

1. Grundlegende Serverstruktur (index.ts)

Wir schreiben einen einfachen Express-Server mit Routen für Login, Token-Erhalt und einen geschützten Endpunkt.

import express from 'express';import cors from 'cors';import cookieParser from 'cookie-parser';import dotenv from 'dotenv';import { login, refresh, logout } from './auth';import { authenticateToken } from './middleware';

dotenv.config();

const app = express();app.use(express.json());app.use(cors());app.use(cookieParser());

// Öffentliche Routeapp.get('/', (req, res) => {  res.send('OAuth 2.0 + JWT Server is running');});

// Authentifizierung (Simulation von OAuth 2.0)app.post('/login', login);app.post('/token', refresh);   // Aktualisierung des Access Tokensapp.delete('/logout', logout);

// Geschützte Routeapp.get('/protected', authenticateToken, (req, res) => {  res.json({ message: 'Zugriff erlaubt', user: (req as any).user });});

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

2. Datentypen (types.ts)

export interface TokenPayload {  userId: number;  username: string;}

export int