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

OAuth 2.0 und JWT-Autorisierung in JavaScript: In der Praxis

Moderne Webanwendungen kommen selten ohne ein Authentifizierungs- und Autorisierungssystem aus. Die beiden gängigsten Standards – OAuth 2.0 und JWT (JSON Web Tokens) – werden häufig zusammen verwendet, um sichere und skalierbare Lösungen zu schaffen. In diesem Artikel werden wir uns ansehen, wie man OAuth 2.0 und JWT-Autorisierung in JavaScript (Node.js) mit praktischen Codebeispielen implementiert.

Das Material ist sowohl für Anfänger als auch für erfahrene Entwickler nützlich, die die Funktionsweise von Token und delegiertem Zugriff besser verstehen möchten.

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. Sie können sich beispielsweise über Google oder GitHub auf einer Website anmelden – das ist OAuth 2.0.

JWT (JSON Web Token) ist ein kompaktes Token-Format, das codierte Daten (Payload) und eine Signatur enthält. JWT wird verwendet, um Informationen zwischen Parteien (Client und Server) zu übertragen und deren Authentizität zu überprüfen.

In Kombination fungiert OAuth 2.0 als Protokoll zur Token-Ausgabe, während JWT das Format der Zugriffstoken selbst darstellt.

Serverkonfiguration und Abhängigkeiten installieren

Zunächst erstellen wir einen einfachen Server mit Express.js und installieren die erforderlichen Pakete:

npm init -y\nnpm install express jsonwebtoken dotenv cors axios\nnpm install --save-dev nodemon

Projektstruktur:

\n
• server.js – Hauptserverdatei
\n
• .env – Umgebungsvariablen
\n
• middleware/auth.js – Middleware zur JWT-Überprüfung
\n
• routes/auth.js – Authentifizierungsrouten
\n

Implementierung der JWT-Autorisierung

Beginnen wir mit der grundlegenden Generierung und Überprüfung von JWT-Token. Erstellen wir server.js:

const express = require('express');\nconst jwt = require('jsonwebtoken');\nrequire('dotenv').config();\n\nconst app = express();\napp.use(express.json());\n\nconst SECRET_KEY = process.env.JWT_SECRET || 'my_secret_key';\n\n// Token-Generierung\nfunction generateToken(user) {\n  const payload = {\n    id: user.id,\n    email: user.email,\n    role: user.role\n  };\n  return jwt.sign(payload, SECRET_KEY, { expiresIn: '1h' });\n}\n\n// Beispielroute für Login\napp.post('/login', (req, res) => {\n  const { email, password } = req.body;\n  // Hier sollte eine Datenbankprüfung erfolgen\n  const user = { id: 1, email, role: 'user' };\n  const token = generateToken(user);\n  res.json({ token });\n});\n\n// Middleware zur Token-Überprüfung\nfunction authenticateToken(req, res, next) {\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({ error: 'Token nicht bereitgestellt' });\n  }\n\n  jwt.verify(token, SECRET_KEY, (err, user) => {\n    if (err) {\n      return res.status(403).json({ error: 'Ungültiger Token' });\n    }\n    req.user = user;\n    next();\n  });\n}\n\n// Geschützte Route\napp.get('/profile', authenticateToken, (req, res) => {\n  res.json({ message: 'Zugriff gewährt', user: req.user });\n});\n\napp.listen(3000, () => console.log('Server läuft auf Port 3000'));

Integration von OAuth 2.0 über Google

Jetzt fügen wir OAuth 2.0 mit Google als Anbieter hinzu. Erstellen wir routes/auth.js:

const express = require('express');\nconst axios = require('axios');\nconst jwt = require('jsonwebtoken');\nconst router = express.Router();\n\nconst GOOGLE_CLIENT_ID = process.env.GOOGLE_CLIENT_ID;\nconst GOOGLE_CLIENT_SECRET = process.env.GOOGLE_CLIENT_SECRET;\nconst REDIRECT_URI = 'http://localhost:3000/auth/google/callback';\nconst JWT_SECRET = process.env.JWT_SECRET;\n\n// Route für den Start