Single Sign-On (SSO) leicht gemacht

Was ist Single Sign-On (SSO)?

Frontend Single Sign-On (SSO) ist eine Methode zur Benutzerauthentifizierung und -autorisierung, die es Benutzern ermöglicht, mit einem einzigen Satz Anmeldeinformationen auf mehrere Anwendungen oder Websites zuzugreifen, wodurch wiederholte Anmeldungen und Registrierungen entfallen. Dies verbessert die Benutzererfahrung, senkt die Wartungskosten und erhöht die Sicherheit.

Implementierung von Single-Sign-On-Lösungen

Es gibt mehrere Schlüsselansätze für die Frontend-SSO-Implementierung:

Cookie-basiertes SSO

Diese weit verbreitete Methode nutzt den Cookie-Mechanismus des Browsers. Bei der ersten Anmeldung auf einer zentralen Authentifizierungsseite (z. B. Seite A) wird ein verschlüsseltes Cookie erstellt, das Benutzerdaten und eine Ablaufzeit enthält. Die Domäne des Cookies ist auf die Top-Level-Domäne (z. B. example.com) festgelegt, wodurch die gemeinsame Nutzung durch Anwendungen innerhalb dieser Domäne (a.example.com, b.example.com usw.) ermöglicht wird. Bei späteren Zugriffen auf andere Anwendungen wird nach diesem Cookie gesucht. falls vorhanden, wird der Benutzer automatisch angemeldet; andernfalls erfolgt eine Umleitung zur Authentifizierungsseite. Obwohl dieser Ansatz einfach ist, ist er auf Anwendungen in derselben Domäne beschränkt, steht vor domänenübergreifenden Herausforderungen und unterliegt Einschränkungen hinsichtlich der Cookie-Größe und -Menge.

Beispiel: Setzen und Abrufen eines Cookies.

Ein Cookie setzen (Seite A):

<code class="language-javascript">// Generate an encrypted cookie value
const encryptedValue = encrypt(userinfo);

// Set the cookie
document.cookie = `sso_token=${encryptedValue};domain=.example.com;path=/;max-age=86400;`;</code>

Abrufen und Verwenden eines Cookies (Seite B):

<code class="language-javascript">// Retrieve the cookie
const cookieValue = document.cookie
  .split(';')
  .find((cookie) => cookie.trim().startsWith('sso_token='))
  .split('=')[1];

// Decrypt the cookie
const userinfo = decrypt(cookieValue);

// Log in directly
login(userinfo);</code>

Tokenbasiertes SSO

Diese zustandslose Methode beinhaltet die Generierung eines verschlüsselten Tokens (mit Benutzerinformationen und Ablaufdatum) nach erfolgreicher Anmeldung im Authentifizierungscenter. Dieses Token wird clientseitig gespeichert (localStorage oder sessionStorage). Nachfolgende Anwendungszugriffe verifizieren das Token; Ein gültiger Token gewährt direkten Zugriff, während ein ungültiger Token zum Authentifizierungscenter weiterleitet. Tokenbasiertes SSO unterstützt domänenübergreifende Funktionalität und vermeidet Cookie-Einschränkungen, erfordert jedoch zusätzlichen Speicher und Netzwerk-Overhead und birgt Sicherheitsrisiken, wenn Token kompromittiert werden.

Beispiel: Speichern und Verifizieren eines Tokens.

Speichern eines Tokens (Seite A):

<code class="language-javascript">// Generate the token value
const token = generateToken(userinfo);

// Store the token
localStorage.setItem('sso_token', token);</code>

Abrufen und Verwenden eines Tokens (andere Seiten):

<code class="language-javascript">// Retrieve the token
const token = localStorage.getItem('sso_token');

// Validate the token
const userinfo = verifyToken(token);

// Log in directly
login(userinfo);</code>

OAuth 2.0-basiertes SSO

Diese Methode nutzt den Autorisierungscode-Ablauf von OAuth 2.0. Bei der ersten Anmeldung wird eine Anfrage an das Authentifizierungscenter ausgelöst, das einen Autorisierungscode zurückgibt und zur Rückruf-URL der Anwendung weiterleitet. Die Anwendung tauscht diesen Code gegen Zugriffs- und Aktualisierungstoken (mit Benutzerdaten und Ablaufzeiten) aus, die clientseitig gespeichert werden. Nachfolgende Anwendungszugriffsprüfungen auf ein gültiges Zugriffstoken, automatische Anmeldung, falls gefunden, andernfalls Weiterleitung an das Authentifizierungscenter. Obwohl es sich an die OAuth 2.0-Standards hält und verschiedene Clienttypen (Web, Mobil, Desktop) unterstützt, ist es komplexer und erfordert mehrere Anfragen und Weiterleitungen.

Beispiel: Autorisierungscodefluss.

Senden einer Autorisierungsanfrage (Seite A):

<code class="language-javascript">// Generate an encrypted cookie value
const encryptedValue = encrypt(userinfo);

// Set the cookie
document.cookie = `sso_token=${encryptedValue};domain=.example.com;path=/;max-age=86400;`;</code>

Abwicklung des Rückrufs (Seite A):

<code class="language-javascript">// Retrieve the cookie
const cookieValue = document.cookie
  .split(';')
  .find((cookie) => cookie.trim().startsWith('sso_token='))
  .split('=')[1];

// Decrypt the cookie
const userinfo = decrypt(cookieValue);

// Log in directly
login(userinfo);</code>

---

Leapcell: Ihre erstklassige Node.js-Hosting-Lösung

Leapcell ist eine hochmoderne serverlose Plattform für Webhosting, asynchrone Aufgaben und Redis und bietet:

• Mehrsprachige Unterstützung: Node.js, Python, Go und Rust.
• Kostenlose unbegrenzte Projekte:Zahlen Sie nur für die Nutzung.
• Kostengünstig: Pay-as-you-go ohne Leerlaufzeiten.
• Optimierte Entwicklererfahrung: Intuitive Benutzeroberfläche, automatisiertes CI/CD, Echtzeitmetriken.
• Skalierbar und leistungsstark: Automatische Skalierung, kein Betriebsaufwand.

Entdecken Sie die Dokumentation und probieren Sie es aus!

Folgen Sie uns auf X: @LeapcellHQ

---

Lesen Sie mehr auf unserem Blog

Das obige ist der detaillierte Inhalt vonSingle Sign-On (SSO) leicht gemacht. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!