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

Einführung in OAuth 2.0 und JWT: Was ist das und warum wird es benötigt?

Moderne Webanwendungen kommen selten ohne ein Autorisierungssystem aus. Ob es sich um die Anmeldung über Google, den Zugriff auf eine API oder den Schutz von Routen in Ihrer Node.js-Anwendung handelt – Sie werden OAuth 2.0 und JWT (JSON Web Tokens) benötigen. Diese Technologien sind zum De-facto-Standard für den sicheren Datenaustausch zwischen Client und Server geworden.

In diesem Artikel werden wir uns ansehen, wie OAuth 2.0 und JWT funktionieren, und ein einfaches Autorisierungssystem in JavaScript (Node.js) schreiben. Das Material richtet sich an Anfänger-Entwickler, daher werden wir uns von der Theorie zur Praxis bewegen, mit detaillierten Codebeispielen.

Teil 1: Was ist OAuth 2.0 und wie funktioniert es?

OAuth 2.0 ist ein Autorisierungsprotokoll, das es Anwendungen ermöglicht, eingeschränkten Zugriff auf Benutzerressourcen zu erhalten, ohne das Passwort weiterzugeben. Stellen Sie sich vor, Sie möchten sich auf einer Website mit Ihrem Google-Konto anmelden. OAuth 2.0 ist genau für diesen Prozess zuständig.

Hauptrollen in OAuth 2.0

\n
• Resource Owner – der Benutzer, der die Daten besitzt.
\n
• Client – Ihre Anwendung (z. B. ein Node.js-Server).
\n
• Authorization Server – der Server, der Token ausstellt (z. B. Google, GitHub).
\n
• Resource Server – der Server, der die Benutzerdaten speichert.
\n

Typischer OAuth 2.0-Ablauf (Authorization Code Grant)

\n
1. Der Benutzer klickt auf „Mit Google anmelden“.
\n
2. Die Anwendung leitet ihn zum Autorisierungsserver von Google weiter.
\n
3. Der Benutzer stimmt zu.
\n
4. Google gibt einen authorization code an den Anwendungsserver zurück.
\n
5. Der Server tauscht diesen Code gegen ein access token ein.
\n
6. Der Server verwendet das access token, um auf die Benutzerdaten zuzugreifen.
\n

In der Praxis wird für einfache Anwendungen oft JWT als Format für das Zugriffstoken verwendet.

Teil 2: JWT – Struktur und Funktionsweise

JWT (JSON Web Token) ist eine kompakte und eigenständige Möglichkeit, Informationen zwischen Parteien in Form eines JSON-Objekts zu übertragen. Das Token wird signiert, sodass es ohne Datenbankabfrage verifiziert werden kann.

Struktur eines JWT

Ein JWT besteht aus drei Teilen, die durch Punkte (.) getrennt sind:

header.payload.signature

\n
• Header – enthält den Tokentyp und den Signaturalgorithmus (z. B. HS256).
\n
• Payload – die Daten (Claims), z. B. Benutzer-ID, Rolle, Gültigkeitsdauer.
\n
• Signature – die Signatur, die mit einem geheimen Schlüssel erstellt wurde.
\n

Beispiel eines dekodierten JWT

{\n  "alg": "HS256",\n  "typ": "JWT"\n}\n.\n{\n  "sub": "1234567890",\n  "name": "John Doe",\n  "iat": 1516239022,\n  "exp": 1516242622\n}\n.\n[signature]

Wichtig: Der Payload ist nicht verschlüsselt, nur signiert. Speichern Sie niemals vertrauliche Daten (Passwörter) in einem JWT!

Teil 3: Implementierung der JWT-Autorisierung in Node.js

Kommen wir nun zur Praxis. Wir erstellen eine einfache REST-API mit Express.js und JWT-Autorisierung. Dafür benötigen wir die Bibliotheken jsonwebtoken und bcryptjs.

Schritt 1: Abhängigkeiten installieren

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

Schritt 2: Grundlegende Serverkonfiguration

// server.js\nrequire('dotenv').config();\nconst express = require('express');\nconst jwt = require('jsonwebtoken');\nconst bcrypt = require('bcryptjs');\n\nconst app = express();\napp.use(express.json());\n\nconst users = []; // In einem echten Projekt – eine Datenbank\n\nconst PORT = process.env.PORT || 3000;\nconst JWT_SECRET = process.env.JWT_SECRET || 'mysecretkey123';\n\napp.listen(PORT, () => {\n  console.log(`Server running on port ${PORT}`);\n});

                
                

                    

                        Blogs                    
                    

                                                    
                                

                                    

                                        
                                    
                                    
Hackathon auf PHP: Wie man von Null gewinnt und die Jury beeindruckt
                                
                            
                                            
                

                
                

                    

                        Buchempfehlungen                    
                    

                                                    
                                

                                    

                                        
                                    
                                    
Optimierung in Python
                                
                            
                                                    
                                

                                    

                                        
                                    
                                    
Kotlin und Datenbanken: Ein praktischer Leitfaden
                                
                            
                                                    
                                

                                    

                                        
                                    
                                    
Architektur von C# (.NET)-Anwendungen: Vom Anfänger zum Teamleiter
                                
                            
                                                    
                                

                                    

                                        
                                    
                                    
iOS-Entwicklung mit TDD und Swift
                                
                            
                                            
                
            
    

  
Lesen Sie auch
  

                
                  
                 Arbeit mit WebAssembly und Java: von A bis Z
      
                
                  
                 CI/CD für JavaScript-Projekte: GitHub Actions
      
                
                  
                 Aufgabenwarteschlangen in Go: Ein praktischer Leitfaden
      
                
                  
                 Optimierung der Leistung von Go-Anwendungen: Tipps und Beispiele
      
                
                  
                 call und apply in JavaScript: Top-Fehler und wie man sie vermeidet