Was ist Authentifizierungsfluss?

Der Authentifizierungsfluss ist der Prozess der Bestätigung der Identität eines Benutzers und der Verwaltung seines Zugriffs auf bestimmte Teile einer Anwendung. Wenn Sie mit einer Web-App (z. B. einer Social-Media-Site) arbeiten, müssen Sie überprüfen, ob der Benutzer der ist, für den er sich ausgibt (Anmelden), und ihm dann Zugriff auf bestimmte Funktionen gewähren.

Wie funktioniert es in React?

Wenn Sie in React die Benutzerauthentifizierung durchführen möchten, interagieren Sie normalerweise mit einem Backend-Server, der die schwere Arbeit übernimmt. So funktioniert es normalerweise:

1. Registrierungs- und Anmeldeendpunkte

• Registrierungsendpunkt: Wenn sich ein neuer Benutzer anmeldet, sendet er seine Daten (wie Benutzername, E-Mail-Adresse, Passwort) an den Server. Der Server erstellt dann ein Konto für sie.
• Anmeldeendpunkt: Wenn sich ein bestehender Benutzer anmeldet, sendet er seinen Benutzernamen und sein Passwort an den Server. Der Server prüft, ob diese Angaben korrekt sind.

2. Tokens: Zugriffstoken und Aktualisierungstoken

Nach einer erfolgreichen Anmeldung sendet der Server zwei wichtige Token zurück:

• Zugriffstoken:

  • Dies ist wie ein Kurzzeitpass, der dem Benutzer den Zugriff auf bestimmte Funktionen der App ermöglicht. Es hat normalerweise eine kurze Lebensdauer (in diesem Fall 5 Minuten).
  • Jedes Mal, wenn der Benutzer eine Anfrage stellt (z. B. sein Profil ansehen oder etwas posten), wird dieses Token an den Server gesendet, um zu beweisen, dass er angemeldet ist.

• Aktualisierungstoken:

  • Dies ist wie ein Backup-Pass, der verwendet wird, wenn das Zugriffstoken abläuft. Es ist langlebiger.
  • Wenn das Zugriffstoken abläuft (nach 5 Minuten), kann die App den Aktualisierungstoken verwenden, um ein neues Zugriffstoken zu erhalten, anstatt den Benutzer erneut anmelden zu müssen.

3. Tokens im Browser speichern

Sobald sich der Benutzer anmeldet und diese Token erhält, muss die App sie irgendwo auf dem Gerät des Benutzers speichern. Hier kommt localStorage ins Spiel:

• localStorage: Dies ist eine Funktion in Webbrowsern, die es Ihnen ermöglicht, Daten (wie die Token) im Browser des Benutzers zu speichern.
  • setItem() Methode: Dies wird zum Speichern von Daten verwendet. Beispielsweise speichern Sie das Zugriffstoken und das Aktualisierungstoken mit etwas wie localStorage.setItem('accessToken', tokenValue).
  • getItem() Methode: Wird zum Abrufen gespeicherter Daten verwendet. Beispielsweise erhalten Sie das gespeicherte Zugriffstoken mit etwas wie localStorage.getItem('accessToken').

4. Anfragen mit dem Zugriffstoken stellen

Jedes Mal, wenn der Benutzer etwas tut, das eine Serverinteraktion erfordert (wie das Posten eines Status oder das Anzeigen seiner Nachrichten), sendet die App eine Anfrage an den Server mit dem im Autorisierungsheader angehängten Zugriffstoken. Dadurch wird dem Server mitgeteilt, dass der Benutzer angemeldet ist und die Aktion ausführen darf.

5. Umgang mit abgelaufenen Token

• Ablauf des Zugriffstokens: Wenn der Server mit einem 401-Fehler antwortet, bedeutet dies, dass das Zugriffstoken abgelaufen ist. Die App verwendet dann das Aktualisierungstoken, um ein neues Zugriffstoken anzufordern.

• Refresh Token Expiration: Wenn auch das Refresh Token abgelaufen ist (was nach längerer Zeit passieren kann), antwortet der Server erneut mit einem 401-Fehler. Zu diesem Zeitpunkt leitet die App den Benutzer zur Anmeldeseite weiter und fordert ihn auf, sich erneut anzumelden, um neue Token zu erhalten.

6. Erneutes Senden der fehlgeschlagenen Anfrage

Sobald die App mithilfe des Aktualisierungstokens ein neues Zugriffstoken erhält, sendet sie die ursprüngliche Anfrage erneut, die aufgrund des abgelaufenen Tokens fehlgeschlagen ist. Auf diese Weise erfährt der Benutzer keine Unterbrechung.

Zusammenfassung

• Authentifizierungsablauf: Auf diese Weise bestätigt die App, wer Sie sind und gewährt Ihnen Zugriff auf Funktionen.
• Zugriffstoken: Ein kurzfristiger Schlüssel für den Zugriff auf Ressourcen in der App. Läuft schnell ab.
• Aktualisierungstoken: Ein langfristiger Sicherungsschlüssel, um ein neues Zugriffstoken zu erhalten, wenn das alte abläuft.
• localStorage: Die Art und Weise, wie der Browser diese Token auf dem Gerät des Benutzers speichert.
• Autorisierungsheader: Wo das Zugriffstoken in Anfragen an den Server enthalten ist.
• 401 Fehler: Ein Signal, dass das Token abgelaufen ist und dass die App Maßnahmen ergreifen muss (entweder das Token aktualisieren oder den Benutzer auffordern, sich erneut anzumelden).

Dieser Ablauf stellt sicher, dass der Benutzer angemeldet bleiben und die App sicher nutzen kann, ohne seine Anmeldeinformationen ständig neu eingeben zu müssen.