Heim > Web-Frontend > js-Tutorial > Single Sign-On (SSO) leicht gemacht

Single Sign-On (SSO) leicht gemacht

Linda Hamilton
Freigeben: 2025-01-21 04:30:08
Original
896 Leute haben es durchsucht

Single Sign-On (SSO) Made Easy

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):

// Generate an encrypted cookie value
const encryptedValue = encrypt(userinfo);

// Set the cookie
document.cookie = `sso_token=${encryptedValue};domain=.example.com;path=/;max-age=86400;`;
Nach dem Login kopieren
Nach dem Login kopieren

Abrufen und Verwenden eines Cookies (Seite B):

// 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);
Nach dem Login kopieren
Nach dem Login kopieren

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):

// Generate the token value
const token = generateToken(userinfo);

// Store the token
localStorage.setItem('sso_token', token);
Nach dem Login kopieren

Abrufen und Verwenden eines Tokens (andere Seiten):

// Retrieve the token
const token = localStorage.getItem('sso_token');

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

// Log in directly
login(userinfo);
Nach dem Login kopieren

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):

// Generate an encrypted cookie value
const encryptedValue = encrypt(userinfo);

// Set the cookie
document.cookie = `sso_token=${encryptedValue};domain=.example.com;path=/;max-age=86400;`;
Nach dem Login kopieren
Nach dem Login kopieren

Abwicklung des Rückrufs (Seite A):

// 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);
Nach dem Login kopieren
Nach dem Login kopieren

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

Single Sign-On (SSO) Made Easy

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!

Single Sign-On (SSO) Made Easy

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!

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage