{}const=>[]async()letfn</>var
EntwicklungMobil

Autorisierung für Entwickler-Anfänger: E-Mail/Passwort, OAuth, OTP und JWT — eine vollständige Anleitung 2026

Wir analysieren alle Methoden zur Autorisierung moderner Webanwendungen: von der klassischen E-Mail / dem klassischen Passwort über "Mit Google anmelden" bis hin zu SMS-Codes. Klare Erklärungen, Codebeispiele, häufige Fehler und eine Checkliste für Vorstellungsgespräche – alles, was ein Junior-Entwickler über JWT, OAuth 2.0 und Einmalkennwörter wissen muss.

К

Kodik

Autor

7 Min. Lesezeit

Ich erinnere mich, wie ich vor einem Jahr auf die Login-Seite eines großen Projekts schaute und dachte: „Mein Gott, wie funktioniert das alles?“ Vier Schaltflächen zum Einloggen, irgendwelche Token, Weiterleitungen... Kopf dreht sich. Heute werden wir alles auf die Reihe setzen, damit Sie nicht in diesem Meer der Technologien ertrinken.

Warum Autorisierung nicht nur „Passwort eingeben“ bedeutet 🔐

Im Jahr 2026 wollen sich Nutzer schnell, sicher und ohne Kopfzerbrechen bei Apps anmelden. Einige bevorzugen die klassische E-Mail-Adresse und das Passwort, andere die Schaltfläche „Mit Google anmelden“, wieder andere möchten einen Code per SMS erhalten und sich nicht mit Passwörtern herumschlagen.

Ihre Aufgabe als Entwickler ist es, ihnen all dies zu geben, und zwar so, dass das System sicher ist und sich nicht in Spaghetti-Code verwandelt 🍝

Beginnen wir mit der Basis, die jeder Junior verstehen sollte, und dann gehen wir weiter.

🔥 100.000+ Schüler sind bereits bei uns

Genug Theorie gelesen?
Zeit zu coden!

Kodik — eine App, in der du durch Praxis programmieren lernst. KI-Mentor, interaktive Lektionen, echte Projekte.

🤖 KI 24/7
🎓 Zertifikate
💰 Kostenlos
🚀 Jetzt starten
Heute beigetreten

E-Mail/Passwort: die gute alte Schule, die es immer noch gibt ✉️

Die klassische Autorisierung per E-Mail und Passwort ist die Grundlage. Ja, viele sagen, dass sie veraltet ist, aber die Wahrheit ist, dass sie immer noch von Millionen von Diensten verwendet wird. Und zu wissen, wie es richtig funktioniert, ist von entscheidender Bedeutung.

Was passiert bei der Registrierung

Der Benutzer gibt E-Mail und Passwort ein. Deine erste Aufgabe ist die Validierung. Die E-Mail-Adresse muss echt sein (zumindest syntaktisch korrekt) und das Passwort muss ziemlich komplex sein.

Im Jahr 2026 mindestens 8 Zeichen, Groß- und Kleinbuchstaben, Zahlen, Sonderzeichen. Aber die Anforderungen hängen vom Projekt ab — nicht überall braucht man ein „Passwort wie von einem Banksafe“.

Dann das Wichtigste: Hörst du, NIE Speichern Sie Passwörter nicht im Klartext. Du musst das Passwort hashen, bevor du es in der Datenbank speicherst. Im Jahr 2026 ist der Standard - bcrypt oder Argon2.

// Beispiel mit bcrypt (Node.js)
const bcrypt = require('bcrypt');

// Bei der Registrierung
const saltRounds = 10;
const hashedPassword = await bcrypt.hash(userPassword, saltRounds);
// Speichern Sie hashedPassword in der Datenbank

// Beim Eingang
const isValid = await bcrypt.compare(userPassword, hashedPasswordFromDB);
if (isValid) {
  // Benutzer ist autorisiert
}

Was passiert beim Einloggen

Der Benutzer gibt eine E-Mail-Adresse und ein Passwort ein. Du suchst diese E-Mail in der Datenbank, holst den Passwort-Hash und vergleichst ihn mit dem eingegebenen Passwort über bcrypt.compare. Wenn es übereinstimmt, generieren Sie ein Token (normalerweise JWT) und geben es an den Client weiter.

JWT — dein neuer bester Freund 🤝

JSON Web Token ist eine Zeichenfolge, die verschlüsselte Informationen über den Benutzer enthält. Nach erfolgreicher Autorisierung erstellst du ein JWT mit Benutzerdaten (ID, E-Mail, Rolle) und sendest es an den Client. Der Client speichert das Token und sendet es mit jeder Anfrage an die API.

const jwt = require('jsonwebtoken');

// Token erstellen
const token = jwt.sign(
  { userId: user.id, email: user.email },
  process.env.JWT_SECRET,
  { expiresIn: '7d' }
);

// Token-Überprüfung
const decoded = jwt.verify(token, process.env.JWT_SECRET);

Refresh-Token: Wenn der Access-Token abgelaufen ist 🧊

Ein Zugriffstoken ist normalerweise nicht lange gültig - von 15 Minuten bis zu mehreren Stunden. Wenn es abläuft, muss der Benutzer das Passwort nicht erneut eingeben. Dazu wird ein Refresh-Token verwendet — ein langlebiges Token, das an einem sicheren Ort gespeichert wird (normalerweise httpOnly cookie) und wird verwendet, um ein neues Zugriffstoken zu erhalten.

Die Logik ist einfach: kurzes Token für die Arbeit, Langer Token um das kurze zu aktualisieren. Dieses Muster wirst du in den meisten realen Projekten finden.

OAuth 2.0: „Mit Google anmelden“ und all diese Magie ✨

Wenn ein Benutzer auf „Mit Google anmelden“ oder „Mit Apple anmelden“ klickt, findet hinter den Kulissen ein Tanz nach dem OAuth 2.0-Protokoll statt. Dies ist ein Standard, mit dem Drittanbieterdienste Benutzer autorisieren können, ohne ein Passwort zu übertragen.

So funktioniert es in zwei Worten

  1. Der Benutzer klickt auf „Mit Google anmelden“

  2. Sie leiten ihn auf die Google-Seite um

  3. Der Benutzer meldet sich an und erteilt die Erlaubnis

  4. Google leitet dich mit einer temporären Weiterleitung auf deine Website zurück code

  5. Du änderst code auf Token und Sie erhalten Benutzerdaten

Was ein Junior wissen muss

  • Sie müssen die App in der Konsole (Google/Apple) registrieren und erhalten Client ID und Client Secret.

  • Das beliebteste Szenario ist Authorization Code Flow.

  • Verliere den Status zwischen Umleitungen nicht — verwende den Parameter state (CSRF-Schutz).

  • Client Secret sollte niemals auf das Frontend gelangen.

// Beispiel mit Passport.js (Node.js)
const passport = require('passport');
const GoogleStrategy = require('passport-google-oauth20').Strategy;

passport.use(new GoogleStrategy({
    clientID: process.env.GOOGLE_CLIENT_ID,
    clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    callbackURL: "http://localhost:3000/auth/google/callback"
  },
  async (accessToken, refreshToken, profile, done) => {
    // Hier erhältst du die Benutzerdaten
    // Du suchst ihn in deiner Datenbank oder erstellst einen neuen
    const user = await findOrCreateUser(profile);
    return done(null, user);
  }
));

Apple Sign In: Funktionen 🍏

Apple nimmt den Datenschutz ernst. Sie können die echte E-Mail des Benutzers ausblenden und eine Proxy-E-Mail des Typs randomstring@privaterelay.appleid.com angeben. Außerdem haben sie ihre eigene Spezifität mit der Generierung von client_secret — es wird programmatisch erstellt und nicht nur in der Konsole ausgegeben.

Hauptfehler: falscher redirect_uri (muss 1 zu 1 übereinstimmen), Fehlen von state, "user cancelled" nicht verarbeitet und Client Secret Leak an die Front.

OTP: Einmalpasswörter und SMS-Codes 📲

Ein Einmalkennwort ist ein Code, der nur einige Minuten gültig ist und nur einmal verwendet wird. Im Jahr 2026 ist dies eine der beliebtesten Arten der Autorisierung, insbesondere in mobilen Anwendungen.

Wie funktioniert das?

  1. Der Benutzer gibt eine Telefonnummer ein

  2. Sie generieren einen Code (4-6 Ziffern), speichern ihn mit TTL (oft in Redis)

  3. Du sendest den Code über ein SMS-Gateway

  4. Der Benutzer gibt den Code ein → Sie überprüfen → Sie erstellen eine Sitzung

// OTP-Generierung
function generateOTP(length = 6) {
  const digits = '0123456789';
  let otp = '';
  for (let i = 0; i < length; i++) {
    otp += digits[Math.floor(Math.random() * 10)];
  }
  return otp;
}

// Speichern mit TTL (Redis)
await redis.setex(`otp:${phoneNumber}`, 300, otp); // 5 Minuten

// SMS senden
await smsService.send(phoneNumber, `Your code: ${otp}`);

// Überprüfung
const storedOTP = await redis.get(`otp:${phoneNumber}`);
if (storedOTP === userInputOTP) {
  // Autorisierung erfolgreich
  await redis.del(`otp:${phoneNumber}`);
}

TOTP: Wenn SMS keine Option ist ⏱️

Time-based One-Time Password — Codes, die von Anwendungen wie Google Authenticator oder Authy generiert werden. Funktioniert auf Basis eines geheimen Schlüssels und der Zeit. Eine ausgezeichnete Option für 2FA.

const speakeasy = require('speakeasy');

// Generierung des Geheimnisses
const secret = speakeasy.generateSecret({ name: 'MyApp (user@email.com)' });
// secret.base32 ist das, was in der Datenbank gespeichert werden muss

// Code-Überprüfung
const verified = speakeasy.totp.verify({
  secret: secret.base32,
  encoding: 'base32',
  token: userInputCode,
  window: 2 // Zeitabweichungstoleranz
});

OTP-Sicherheit

  • Begrenzen Sie die Anzahl der Eingabeversuche (normalerweise 3-5)

  • Verwenden Sie die Ratenbegrenzung (nicht mehr als N SMS pro Nummer pro Stunde)

  • Machen Sie die Codes lang genug (mindestens 6 Ziffern)

  • Stellen Sie unbedingt TTL ein (5-10 Minuten)

Hier passt die Illustration „Autorisierungskarte“ gut – um alles visuell in einem Bild zusammenzufassen: E-Mail/Passwort → JWT → refresh → OAuth → OTP.

Was Junior wissen sollte: Checkliste für das Vorstellungsgespräch 🧠

Grundlagen

  • Der Unterschied zwischen Authentifizierung und Autorisierung

  • Was ist JWT und aus welchen Teilen besteht es (Header, Payload, Signature)

  • Warum Passwörter nicht im Klartext gespeichert werden sollten

  • Was ist Salz beim Hashing von Passwörtern?

Mittleres Niveau

  • Access token vs refresh token

  • Wie OAuth 2.0 auf hohem Niveau funktioniert

  • Was ist CSRF und Schutz durch state/token/origin

  • Wo Token auf der Front gespeichert werden und warum (httpOnly cookies / memory / localStorage)

Fortgeschrittenes Niveau

  • Abmelden bei JWT (Blacklist in Redis oder kurze TTL)

  • PKCE in OAuth und warum es benötigt wird

  • Brute-Force-Schutz bei OTP (Rate Limiting, Backoff, Captcha)

Im Jahr 2026 ist das keine Raketenwissenschaft mehr 🚀

Noch vor 5-10 Jahren schien OAuth etwas Unzugängliches zu sein. Jetzt ist es ein Standard, der in alle normalen Frameworks integriert ist. Bibliotheken erledigen 80% der Arbeit, und Sie müssen die Konzepte verstehen und in der Lage sein, alles richtig zusammenzufügen.

Beginnen Sie mit der Basis — E-Mail/Passwort und JWT. Fügen Sie dann OAuth hinzu. Und wenn nötig — OTP für mehr Komfort oder zusätzliche Sicherheit. Denken Sie immer an das Minimum: Hash-Passwörter, Token überprüfen, Anmeldeversuche einschränken, HTTPS verwenden.

All dies und vieles mehr kann im Kodikum studiert werden 🎓

Wenn Sie nach dem Lesen dieses Artikels Fragen haben (und die werden Sie sicherlich haben - Autorisierung ist ein tiefes Thema), kommen Sie zu Kodik.

Kodik - Programmierunterricht mit Schwerpunkt auf der Praxis: Wir analysieren die Themen im Detail, mit Live-Code-Beispielen und Erklärungen der Fallstricke. Nicht „hier ist der Code, kopiere ihn“, sondern ein Verständnis dafür, wie und warum alles funktioniert.

  • Praktische Aufgaben: Sie erstellen eine Autorisierung von Grund auf neu – von E-Mail/Passwort bis OAuth und 2FA

  • Festigung der Fähigkeiten durch Übungen und Mini-Projekte

  • Analyse typischer Fehler und Muster aus realen Anwendungen

Brauchen Sie Unterstützung? Es gibt eine Community 👥

Bei uns aktiver Telegram-Kanal, wo mehr als 2000 Entwickler sitzen. Sie können eine Frage stellen, ein Problem diskutieren, eine Codeüberprüfung anfordern oder einfach mit Personen auf demselben Weg kommunizieren.

Schließe dich dem Kodik an — Wir erklären die Autorisierung so, dass du sie anderen mit geschlossenen Augen erklären kannst 😉

🎯Hör auf zu zögern

Artikel gefallen?
Zeit zum Üben!

Bei Kodik liest du nicht nur — du schreibst sofort Code. Theorie + Praxis = echte Skills.

Sofortige Praxis
🧠KI erklärt Code
🏆Zertifikat

Keine Registrierung • Keine Karte