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

Einleitung: Warum OAuth 2.0 und JWT der Standard moderner Autorisierung sind

In der modernen Webentwicklung ist die sichere Authentifizierung und Autorisierung von Benutzern eine der zentralen Aufgaben. Die beiden beliebtesten Protokolle und Formate, die diese Aufgabe lösen, sind OAuth 2.0 und JWT (JSON Web Token). Obwohl sie oft zusammen verwendet werden, sind sie unterschiedliche Dinge: OAuth 2.0 ist ein Protokoll zur Zugriffsdelegierung, während JWT ein Token-Format ist.

In diesem Artikel werden wir untersuchen, wie OAuth 2.0 funktioniert, was JWT ist und wie man sie in JavaScript (Node.js) implementiert. Das Material richtet sich an Anfänger-Entwickler, daher werden wir uns von der Theorie zur Praxis mit verständlichen Codebeispielen bewegen.

Was ist OAuth 2.0 und wie funktioniert es

OAuth 2.0 (Open Authorization) ist ein Protokoll, das es einer Anwendung ermöglicht, eingeschränkten Zugriff auf die Ressourcen eines Benutzers zu erhalten, ohne dessen Login und Passwort weiterzugeben. Stellen Sie sich vor, Sie möchten sich über Google oder GitHub auf einer Website anmelden – das ist OAuth 2.0.

Hauptrollen in OAuth 2.0

• Resource Owner – der Benutzer, der die Daten besitzt
• Client – die Anwendung, die Zugriff anfordert
• Authorization Server – der Server, der Token ausstellt (z. B. Google)
• Resource Server – der Server, der die Benutzerdaten speichert

Der Authorization Code Grant Ablauf (am Beispiel von Node.js)

Der gebräuchlichste und sicherste OAuth 2.0 Ablauf ist der Authorization Code Grant. Betrachten wir seine Implementierung mit Express.js.

// Installation der Abhängigkeiten// npm install express axios dotenv

// .envCLIENT_ID=your_client_idCLIENT_SECRET=your_client_secretREDIRECT_URI=http://localhost:3000/callback

const express = require('express');const axios = require('axios');require('dotenv').config();

const app = express();

// Schritt 1: Weiterleitung des Benutzers zur Autorisierungsseiteapp.get('/auth', (req, res) => {    const authUrl = `https://provider.com/oauth/authorize?client_id=${process.env.CLIENT_ID}&redirect_uri=${process.env.REDIRECT_URI}&response_type=code&scope=email`;    res.redirect(authUrl);});

// Schritt 2: Verarbeitung des Callbacks mit dem authorization codeapp.get('/callback', async (req, res) => {    const { code } = req.query;

    try {        // Austausch des authorization code gegen einen access token        const tokenResponse = await axios.post('https://provider.com/oauth/token', {            client_id: process.env.CLIENT_ID,            client_secret: process.env.CLIENT_SECRET,            code,            redirect_uri: process.env.REDIRECT_URI,            grant_type: 'authorization_code'        });

        const { access_token, refresh_token } = tokenResponse.data;                // Token speichern (in einem echten Projekt in der Datenbank)        req.session.accessToken = access_token;        req.session.refreshToken = refresh_token;

        res.send('Autorisierung erfolgreich!');    } catch (error) {        res.status(500).send('Autorisierungsfehler');    }});

app.listen(3000, () => console.log('Server läuft auf Port 3000'));

JWT (JSON Web Token): Struktur und Erstellung

JWT ist eine kompakte und eigenständige Methode zur Übertragung von Informationen zwischen Parteien in Form eines JSON-Objekts. Der Token besteht aus drei Teilen, die durch Punkte getrennt sind:

• Header – Token-Typ und Signaturalgorithmus (z. B. HS256)
• Payload – die Daten (Claims), die wir übertragen möchten
• Signature – die Signatur, die die Integrität der Daten gewährleistet

Erstellung eines JWT in Node.js

Für die Arbeit mit JWT verwenden wir die Bibliothek jsonwebtoken.

// npm install jsonwebtoken

const jwt = require('jsonwebtoken');

const secretKey = 'Ihr_geheimer_Schlüssel';