Wie funktioniert der Authentifizierungsprozess…

Der Authentifizierungsprozess eines Benutzers in einer Frontend-Anwendung besteht im Allgemeinen aus den folgenden Schritten:

Anfrage nach Anmeldedaten: Der Benutzer gibt seinen Benutzernamen und sein Passwort in ein Formular auf der Website oder in der Anwendung ein.
Daten an den Server senden: Das Frontend sendet diese Daten an den Server (Backend) mittels einer HTTP-Anfrage (meist POST) an einen speziellen Authentifizierungs-Endpunkt. Die Daten können im Body der Anfrage im JSON-Format oder als FormData gesendet werden.
Datenüberprüfung auf dem Server: Das Backend empfängt die Daten, überprüft, ob sie in seiner Datenbank vorhanden sind (z.B. ob der Benutzername einem bestehenden Benutzer entspricht und ob der Hash des eingegebenen Passworts mit dem in der Datenbank gespeicherten Hash übereinstimmt).
Token/Sitzung generieren: Wenn die Anmeldedaten korrekt sind, generiert der Server ein einzigartiges Authentifizierungstoken. Dies kann sein:
- Sitzungs-ID: Der Server erstellt eine Sitzung und verbindet sie mit dem Benutzer, indem er dem Client eine Sitzungs-ID sendet (z.B. in einem Cookie mit dem Flag HttpOnly).
- Token (z.B. JWT): Der Server generiert ein Token, das Informationen über den Benutzer und seine Rechte enthält, und signiert es mit seinem geheimen Schlüssel. Dieses Token wird an den Client gesendet.
Token/Sitzung an den Client senden: Der Server antwortet dem Frontend, indem er das generierte Authentifizierungstoken sendet.
- Wird eine Sitzungs-ID verwendet, wird diese meist im HTTP-Header Set-Cookie übertragen.
- Wird ein Token verwendet, kann es im Antwort-Body (JSON) oder im Authorization-Header (z.B. Bearer <Token>) gesendet werden.
Token auf dem Client speichern: Das Frontend erhält das Token und speichert es für zukünftige Anfragen.
- Die Sitzungs-ID wird automatisch in den Cookies des Browsers gespeichert.
- Das Token kann in localStorage, sessionStorage oder Cookies (mit dem Flag HttpOnly zum Schutz vor XSS) gespeichert werden. Es ist empfehlenswert, HttpOnly-Cookies für Zugriffstokens zu verwenden, da dies das Risiko eines Token-Diebstahls durch XSS verringert. Für JWT kann auch ein Aktualisierungstoken in HttpOnly-Cookies gespeichert werden.
Verwendung des Tokens für geschützte Anfragen: Bei nachfolgenden Anfragen an geschützte Ressourcen (die eine Authentifizierung erfordern) sendet das Frontend das gespeicherte Token in jeder Anfrage.
- Für Sitzungen sendet der Browser automatisch die entsprechenden Cookies mit der Sitzungs-ID.
- Für Tokens muss das Frontend das Token explizit im Authorization-Header hinzufügen (z.B. Authorization: Bearer <Token>).
Token-Überprüfung auf dem Server: Bei Erhalt jeder Anfrage an eine geschützte Ressource extrahiert der Server das Token aus der Anfrage und überprüft seine Gültigkeit (z.B. Ablaufdatum des Tokens, Signatur des Tokens, Vorhandensein einer Sitzung mit dieser ID).
Autorisierung: Wenn das Token gültig ist, bestimmt der Server, welcher Benutzer mit diesem Token verbunden ist, und überprüft seine Zugriffsrechte auf die angeforderte Ressource (dies ist ein Schritt der Autorisierung, nach der Authentifizierung).
Ausführung der Anfrage: Wenn der Benutzer authentifiziert und autorisiert ist, führt der Server die Anfrage aus und sendet die Antwort. Andernfalls sendet er einen Fehler (z.B. 401 Unauthorized oder 403 Forbidden).

Authentifizierungsschemas variieren (basierend auf Sitzungen, JWT-Tokens, OAuth2, OpenID Connect usw.), aber die grundlegenden Schritte zum Erhalten und Verwenden eines Tokens zur Benutzeridentifikation sind ähnlich.

Beispiel für das Senden von Daten an den Server (mit fetch API und Token):

// Benutzerdaten
const userData = {
  username: 'user123',
  password: 'securepassword'
};

// Daten an den Server senden
fetch('/api/login', { // Authentifizierungs-Endpunkt auf dem Server
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(userData)
})
.then(response => {
  if (!response.ok) {
    throw new Error('Login fehlgeschlagen');
  }
  return response.json(); // Es wird erwartet, dass der Server JSON mit dem Token zurückgibt
})
.then(data => {
  const authToken = data.token; // Token aus der Serverantwort holen
  localStorage.setItem('authToken', authToken); // Token speichern (z.B. in localStorage)
  console.log('Login erfolgreich, Token gespeichert.');
  // Benutzer auf eine geschützte Seite umleiten
})
.catch(error => {
  console.error('Authentifizierungsfehler:', error);
  // Fehlermeldung an den Benutzer anzeigen
});

// Geschützte Anfrage mit gespeichertem Token
const token = localStorage.getItem('authToken');
if (token) {
  fetch('/api/protected-resource', {
    method: 'GET',
    headers: {
      'Authorization': `Bearer ${token}` // Token im Authorization-Header hinzufügen
    }
  })
  .then(response => {
    if (!response.ok) {
      if (response.status === 401) {
        console.log('Token abgelaufen oder ungültig. Umleitung zu login.');
        // Token ist ungültig, löschen und umleiten
        localStorage.removeItem('authToken');
        // window.location.href = '/login'; // Beispiel für Umleitung
      }
      throw new Error('Fehler beim Abrufen der geschützten Ressource');
    }
    return response.json();
  })
  .then(data => {
    console.log('Geschützte Daten:', data);
  })
  .catch(error => {
    console.error('Fehler beim Abrufen der geschützten Ressource:', error);
  });
} else {
  console.log('Kein Authentifizierungstoken gefunden. Umleitung zu login.');
  // window.location.href = '/login'; // Beispiel für Umleitung
}

Wichtige Sicherheitsaspekte:

Immer HTTPS verwenden, um die Übertragung von Anmeldedaten und Tokens zu sichern.
Tokens sicher speichern (Vermeidung der Speicherung sensibler Daten im Code oder in öffentlichen Feldern).
Für JWT: kurze Gültigkeitsdauer für Zugriffstokens verwenden und sie mit Refresh-Tokens aktualisieren, die in HttpOnly-Cookies gespeichert sind. Zugriffstokens können im Speicher oder localStorage gespeichert werden, wobei die Risiken von XSS zu berücksichtigen sind.
Alle Daten auf dem Server validieren.

Wie funktioniert der Authentifizierungsprozess?