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

Einführung in OAuth 2.0 und JWT-Autorisierung mit JavaScript

Moderne Webanwendungen benötigen ein zuverlässiges Authentifizierungs- und Autorisierungssystem. Die beiden gängigsten Standards – OAuth 2.0 (Delegierungszugriffsprotokoll) und JWT (JSON Web Tokens) – werden oft gemeinsam genutzt, um sichere APIs zu erstellen. In diesem Artikel werden wir Schritt für Schritt erklären, wie man OAuth 2.0 und JWT-Autorisierung mit JavaScript (Node.js) von Grund auf implementiert.

Sie erfahren:

• Was OAuth 2.0 ist und warum es benötigt wird
• Wie JWT-Tokens funktionieren
• Wie man einen Autorisierungsserver mit Express einrichtet
• Wie man Routen mit Middleware schützt

Grundlagen von OAuth 2.0: Abläufe und Rollen

OAuth 2.0 definiert vier Rollen: Resource Owner (Benutzer), Client (Anwendung), Authorization Server (Server, der Tokens ausstellt) und Resource Server (Server, der Daten bereitstellt). Der häufigste Ablauf ist der Authorization Code Grant, der in Webanwendungen verwendet wird.

In diesem Artikel konzentrieren wir uns auf die Implementierung eines Resource Server und Authorization Server unter Verwendung von JWT, anstatt externer Anbieter (Google, GitHub). Dies gibt Ihnen die vollständige Kontrolle über den Prozess.

Installation der Abhängigkeiten

Erstellen Sie zunächst ein neues Node.js-Projekt und installieren Sie die erforderlichen Pakete:

npm init -ynpm install express jsonwebtoken bcrypt dotenv cors

Beschreibung der Pakete:

• express – Framework zum Erstellen des Servers
• jsonwebtoken – Erstellung und Verifizierung von JWT
• bcrypt – Hashing von Passwörtern
• dotenv – Arbeit mit Umgebungsvariablen
• cors – Konfiguration von CORS für die API

Implementierung der JWT-Autorisierung mit Node.js

JWT ist ein kompaktes Token, das aus drei Teilen besteht: Header, Payload und Signatur. Wir werden es zur Authentifizierung von Benutzern nach erfolgreichem Login verwenden.

Einrichtung des Servers und des Benutzermodells

Erstellen Sie die Datei server.js und definieren Sie die grundlegende Struktur:

require('dotenv').config();const express = require('express');const jwt = require('jsonwebtoken');const bcrypt = require('bcrypt');const cors = require('cors');

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

const PORT = process.env.PORT || 3000;const JWT_SECRET = process.env.JWT_SECRET || 'your-secret-key';

// Temporärer Benutzerspeicher (in der Produktion Datenbank verwenden)const users = [];

Registrierung und Passwort-Hashing

Bei der Registrierung muss das Passwort mit bcrypt gehasht werden:

app.post('/api/register', async (req, res) => {    try {        const { email, password } = req.body;                // Prüfung auf existierenden Benutzer        const existingUser = users.find(u => u.email === email);        if (existingUser) {            return res.status(400).json({ message: 'Benutzer existiert bereits' });        }

        // Passwort hashen        const hashedPassword = await bcrypt.hash(password, 10);        const newUser = { id: users.length + 1, email, password: hashedPassword };        users.push(newUser);

        res.status(201).json({ message: 'Benutzer erstellt' });    } catch (error) {        res.status(500).json({ message: 'Serverfehler' });    }});

Login und Generierung des JWT-Tokens

Nach Überprüfung der Anmeldedaten wird mit jsonwebtoken ein Token generiert:

app.post('/api/login', async (req, res) => {    try {        const { email, password } = req.body;                // Benutzer suchen        const user = users.find(u => u.email === email);        if (!user) {