Einfache Anleitung zu Single Sign-On (SSO)

Was ist Single Sign-On?

Frontend Single Sign-On (SSO) ist eine Technologie zur Benutzerauthentifizierung und -autorisierung, die es Benutzern ermöglicht, sich mit einem einzigen Satz von Anmeldeinformationen bei mehreren Anwendungen oder Websites anzumelden, ohne sich erneut anmelden oder registrieren zu müssen. Dieser Ansatz verbessert die Benutzerfreundlichkeit, reduziert die Wartungskosten und erhöht die Sicherheit.

Einführung und Implementierung von Single Sign-On-Lösungen

Die wichtigsten Ansätze für Frontend-SSO umfassen:

Cookie-basiertes SSO

Nach erfolgreicher Anmeldung im Authentifizierungszentrum auf Seite A wird ein Cookie gesetzt: Dies ist die gebräuchlichste SSO-Implementierung. Das Prinzip beruht auf dem Cookie-Mechanismus des Browsers. Wenn sich ein Benutzer zum ersten Mal bei einer Anwendung anmeldet, wird eine Anfrage an das Authentifizierungszentrum gesendet. Nach Überprüfung der Identität des Benutzers gibt das Authentifizierungszentrum ein verschlüsseltes Cookie zurück, das Benutzerinformationen und eine Gültigkeitsdauer enthält. Die Domain des Cookies wird auf die Top-Level-Domain gesetzt (z. B. example.com), wodurch es für Anwendungen unter derselben Top-Level-Domain freigegeben werden kann (z. B. a.example.com und b.example.com). Wenn der Benutzer auf andere Anwendungen zugreift, wird geprüft, ob ein gültiges Cookie vorhanden ist. Wenn dies der Fall ist, meldet er sich direkt an; andernfalls wird der Benutzer zur Anmeldung an das Authentifizierungszentrum weitergeleitet. Diese Methode ist einfach zu implementieren, beschränkt sich aber auf Anwendungen unter derselben Top-Level-Domain, hat domänenübergreifende Probleme und schränkt die Größe und Anzahl der Cookies ein.

Setzen eines Cookies nach erfolgreicher Anmeldung auf Seite A:

// Generieren eines verschlüsselten Cookie-Wertes
const encryptedValue = encrypt(userinfo);

// Setzen des Cookies
document.cookie = `sso_token=${encryptedValue};domain=.example.com;path=/;max-age=86400;`;

Prüfen auf das Cookie auf Seite B:

// Abrufen des Cookies
const cookieValue = document.cookie
  .split(';')
  .find((cookie) => cookie.trim().startsWith('sso_token='))
  .split('=')[1];

// Entschlüsseln des Cookies
const userinfo = decrypt(cookieValue);

// Direkt anmelden
login(userinfo);

Token-basiertes SSO

Dies ist eine zustandslose SSO-Implementierung. Das Prinzip besteht darin, eine Anfrage an das Authentifizierungszentrum während der ersten Anmeldung des Benutzers zu senden. Nach Überprüfung der Identität des Benutzers gibt das Authentifizierungszentrum ein verschlüsseltes Token zurück, das Benutzerinformationen und eine Gültigkeitsdauer enthält, die im lokalen Speicher des Browsers gespeichert werden (z. B. localStorage oder sessionStorage). Wenn der Benutzer auf andere Anwendungen zugreift, wird geprüft, ob ein gültiges Token vorhanden ist. Wenn dies der Fall ist, meldet er sich direkt an; andernfalls wird der Benutzer zur Anmeldung an das Authentifizierungszentrum weitergeleitet. Diese Methode unterstützt domänenübergreifende Operationen und ist nicht durch Cookies eingeschränkt, erfordert aber zusätzlichen Speicherplatz und Netzwerk-Overhead. Sie birgt auch Sicherheitsrisiken, da gestohlene Token zu Identitätsmissbrauch führen können.

Speichern des Tokens in localStorage nach erfolgreicher Anmeldung auf Seite A:

// Generieren des Token-Wertes
const token = generateToken(userinfo);

// Speichern des Tokens
localStorage.setItem('sso_token', token);

Prüfen auf das Token auf anderen Seiten:

// Abrufen des Tokens
const token = localStorage.getItem('sso_token');

// Validieren des Tokens
const userinfo = verifyToken(token);

// Direkt anmelden
login(userinfo);

OAuth 2.0-basiertes SSO

Dieser Ansatz verwendet den Authorization Code Flow von OAuth 2.0. Wenn sich ein Benutzer zum ersten Mal bei einer Anwendung anmeldet, wird eine Anfrage an das Authentifizierungszentrum gesendet. Nach Überprüfung der Identität des Benutzers gibt das Authentifizierungszentrum einen Autorisierungscode zurück und leitet zur Callback-URL der Anwendung weiter. Die Anwendung sendet dann den Code an das Authentifizierungszentrum, um ihn gegen ein Access Token und ein Refresh Token einzutauschen, die Benutzerinformationen und Gültigkeitsdauern enthalten. Diese Token werden im lokalen Speicher des Browsers gespeichert. Wenn der Benutzer auf andere Anwendungen zugreift, wird geprüft, ob ein gültiges Access Token vorhanden ist. Wenn dies der Fall ist, meldet er sich direkt an; andernfalls wird der Benutzer zur Anmeldung an das Authentifizierungszentrum weitergeleitet. Diese Methode folgt dem OAuth 2.0-Standard und unterstützt mehrere Client-Typen (z. B. Web, Mobile, Desktop). Sie ist jedoch komplexer und erfordert mehrere Anfragen und Weiterleitungen.

Senden einer Autorisierungsanfrage auf Seite A:

const authorizeUrl = `https://auth.example.com/authorize?client_id=${clientId}&redirect_uri=${encodeURIComponent(
  redirectUri
)}&response_type=code`;

// Weiterleiten zur Authentifizierungs-Login-Seite
window.location.href = authorizeUrl;

Weiterleiten zurück zur Callback-URL von Seite A mit dem Autorisierungscode nach erfolgreicher Anmeldung:

const redirectUri = 'https://app.example.com/callback';

// Generieren des Autorisierungscodes
const code = generateAuthorizationCode(userinfo);

// Weiterleiten zurück zur Callback-URL der Anwendung
window.location.href = `${redirectUri}?code=${code}`;

Austauschen des Autorisierungscodes gegen ein Access Token auf Seite A:

const code = getQueryString('code');

// Senden einer Anfrage an das Authentifizierungszentrum, um das Access Token zu erhalten
const tokenUrl = `https://auth.example.com/token?client_id=${clientId}&client_secret=${clientSecret}&code=${code}&grant_type=authorization_code`;

fetch(tokenUrl)
  .then((response) => response.json())
  .then((data) => {
    // Speichern des Access Tokens und Refresh Tokens
    localStorage.setItem('access_token', data.access_token);
    localStorage.setItem('refresh_token', data.refresh_token);

    // Direkt anmelden
    login(data.userinfo);
  });

---

Wir sind Leapcell, Ihre erste Wahl für das Hosten von Node.js-Projekten – wir unterstützen Datei-Uploads bis zu 100 MB!

Leapcell ist die Next-Gen Serverless Plattform für Webhosting, Async Tasks und Redis:

Multi-Language Support

• Entwickeln Sie mit Node.js, Python, Go oder Rust.

Unbegrenzte Projekte kostenlos bereitstellen

• Sie zahlen nur für die Nutzung – keine Anfragen, keine Gebühren.

Unschlagbare Kosteneffizienz

• Pay-as-you-go ohne Leerlaufgebühren.
• Beispiel: 25 $ unterstützen 6,94 Millionen Anfragen bei einer durchschnittlichen Antwortzeit von 60 ms.

Optimierte Entwicklererfahrung

• Intuitive Benutzeroberfläche für mühelose Einrichtung.
• Vollautomatische CI/CD-Pipelines und GitOps-Integration.
• Echtzeit-Metriken und -Protokollierung für verwertbare Erkenntnisse.

Mühelose Skalierbarkeit und hohe Leistung

• Auto-Scaling zur mühelosen Bewältigung hoher Parallelität.
• Kein operativer Overhead – konzentrieren Sie sich einfach auf das Bauen.

Erfahren Sie mehr in der Dokumentation!

Folgen Sie uns auf X: @LeapcellHQ