Abmelden von Benutzern

Bevor Sie hier beginnen, stellen Sie sicher, dass Sie wissen, wie Sie sichanmelden, Token erwerben und Tokenlebensdauern verwalten.

Abmelden

Der Abmeldevorgang für MSAL umfasst zwei Schritte.

1. Löschen Sie den MSAL-Cache.
2. Löschen Sie die Sitzung auf dem Identitätsserver.

Das PublicClientApplication Objekt macht zwei APIs verfügbar, die diese Aktionen ausführen.

msalInstance.logoutRedirect();
msalInstance.logoutPopup();

Diese APIs löschen den Tokencache aller Benutzer- und Sitzungsdaten und navigieren dann im Browserfenster oder Popupfenster zur Abmeldeseite des Servers. Der Server fordert den Benutzer dann auf, das Konto auszuwählen, von dem er abgemeldet werden möchte, und zurück zu Ihrem postLogoutRedirectUri Konto umzuleiten, solange die folgenden Bedingungen erfüllt sind:

1. Der URI wird als Antwort-URL für die App-Registrierung registriert.
2. Der URI wird als das postLogoutRedirectUri entweder in der PublicClientApplication-Konfiguration oder in der Abmeldeanforderung bereitgestellt.
3. Der Benutzer verfügt über eine aktive Sitzung mit dem Identitätsanbieter.
4. (MSA-Szenarien) In der App-Registrierung ist eine Front-Channel-Abmelde-URL konfiguriert.

Wenn eine der oben genannten Bedingungen nicht erfüllt ist, verbleibt die Seite (oder das Popupfenster) auf der Abmeldeseite des Identitätsanbieters.

WICHTIG: Wenn diese Abmeldenavigation auf irgendeine Weise unterbrochen wird, kann Ihr MSAL-Cache gelöscht werden, die Sitzung kann jedoch weiterhin auf dem Server bestehen bleiben. Stellen Sie sicher, dass die Navigation vollständig abgeschlossen ist, bevor Sie zu Ihrer Anwendung zurückkehren.

const msalConfig = {
    auth: {
        clientId: 'your_client_id',
        authority: 'https://login.microsoftonline.con/{your_tenant_id}',
        redirectUri: 'https://contoso.com',
        postLogoutRedirectUri: 'https://contoso.com/homepage'
    }
};

Anfordern von Objekten

Konfigurationsoptionen können für jede der Abmelde-APIs bereitgestellt werden, um das Verhalten anzupassen:

• logoutRedirect-Anforderung
• logoutPopup-Anfrage

Abmeldeweiterleitung

Die Verwendung logoutRedirect löscht den lokalen Cache von Benutzertoken und leitet dann das Fenster auf die Serveranmeldungsseite um. Die zurückgegebene logoutRedirect Zusage wird nicht aufgelöst, aber Sie können darauf warten, wenn Sie die Ausführung eines anderen Codes blockieren müssen, bevor die Umleitung initiiert wird.

Konfigurationsoptionen können bereitgestellt werden, um das Verhalten anzupassen:

const currentAccount = msalInstance.getAccount({ homeAccountId });
await msalInstance.logoutRedirect({
    account: currentAccount,
    postLogoutRedirectUri: "https://contoso.com/loggedOut"
});

Überspringen der Serverabmeldung

Wenn Ihre Anwendung nur eine lokale Abmeldung durchführen soll, können Sie der Anforderung über den Parameter onRedirectNavigate einen Callback mitgeben und diesen Callback `false` zurückgeben lassen.

msalInstance.logoutRedirect({
    onRedirectNavigate: (url) => {
        // Return false if you would like to stop navigation after local logout
        return false;
    }
});

logoutPopup

Die logoutPopup API öffnet die Serveranmeldungsseite in einem Popup, sodass Ihre Anwendung ihren aktuellen Zustand beibehalten kann. Aus diesem Grund sind zusätzlich zu logoutRedirect einige weitere Aspekte zu beachten, wenn Sie Pop-ups zum Abmelden verwenden möchten:

• Die zurückgegebene logoutPopup Zusage wird voraussichtlich aufgelöst, nachdem das Popup geschlossen wurde.
• postLogoutRedirectUri ist erforderlich , damit MSAL das Popup schließen kann, wenn die Anmeldung abgeschlossen ist.
• postLogoutRedirectUri wird im Popupfenster geöffnet, nicht im Hauptrahmen. Wenn Ihre App auf oberster Ebene nach dem Abmelden umgeleitet werden muss, können Sie den mainWindowRedirectUri Parameter für die Abmeldeanforderung verwenden.

Konfigurationsoptionen können bereitgestellt werden, um das Verhalten anzupassen.

const currentAccount = msalInstance.getAccount({ homeAccountId });
await msalInstance.logoutPopup({
    account: currentAccount,
    postLogoutRedirectUri: "https://contoso.com/loggedOut",
    mainWindowRedirectUri: "https://contoso.com/homePage",
    popupWindowAttributes: {
        popupSize: {
            height: 100,
            width: 100
        },
        popupPosition: {
            top: 100,
            left: 100
        }
    }
});

Abmeldung ohne Bestätigungsabfrage

Wenn Ihre Clientanwendung den optionalen Anspruch login_hint für ID-Token aktiviert hat, können Sie den login_hint-Anspruch des ID-Tokens nutzen, um eine „stille“ oder eine Abmeldung ohne Eingabeaufforderung durchzuführen, wenn Sie entweder logoutRedirect oder logoutPopup verwenden. Es gibt zwei Möglichkeiten, um ein promptloses Abmelden zu erreichen:

Option 1: Lassen Sie MSAL die login_hint automatisch aus den ID-Tokenansprüchen des Kontos analysieren

Die erste und einfachste Option besteht darin, das Kontoobjekt, für das Sie die Sitzung beenden möchten, an die Logout-API zu übergeben. MSAL prüft, ob der login_hint-Claim im ID-Token des Kontos vorhanden ist, und fügt ihn automatisch als logout_hint der Abmeldeanforderung hinzu, um die Aufforderung zur Kontoauswahl zu überspringen.

const currentAccount = msalInstance.getAccount({ homeAccountId });
// The account's ID Token must contain the login_hint optional claim to avoid the account picker
await msalInstance.logoutRedirect({ account: currentAccount});

Option 2: Manuelles Festlegen der Option "logoutHint" in der Abmeldeanforderung

Alternativ können Sie, wenn Sie den logoutHint lieber manuell festlegen möchten, den login_hintClaim in Ihrer App extrahieren und ihn in der Abmeldeanforderung als logoutHint festlegen:

const currentAccount = msalInstance.getAccount({ homeAccountId });

// Extract login hint to use as logout hint
const logoutHint = currentAccount.idTokenClaims.login_hint;
await msalInstance.logoutPopup({ logoutHint: logoutHint });

Hinweis: Je nach der API, die Sie auswählen (Umleitung/Pop-up), wird die App weiterhin umleiten oder ein Pop-up öffnen, um die Serversitzung zu beenden. Der Unterschied besteht darin, dass der Benutzer die Aufforderung zur Kontoauswahl des Servers nicht sieht und nicht damit interagieren muss.

Abmelden im Frontkanal

Microsoft Entra ID und Azure AD B2C unterstützen das OAuth Front-Channel-Abmeldefeature, das die einmalige Abmeldung über alle Anwendungen hinweg ermöglicht, wenn ein Benutzer die Abmeldung initiiert. Führen Sie die folgenden Schritte aus, um dieses Feature mit MSAL.jszu nutzen:

1. Erstellen Sie in Ihrer Anwendung eine dedizierte Abmeldeseite. Diese Seite sollte keine andere Funktion ausführen, z. B. das Abrufen von Token beim Laden der Seite (details finden Sie unten). Beachten Sie, dass diese Seite in einem ausgeblendeten iFrame geladen wird und für Microsoft Entra ID- und MSA-Benutzer die iss Parameter und sid Abfrageparameter enthält.
2. Navigieren Sie im Microsoft Entra Admin Center zur Seite Authentifizierung für Ihre Anwendung, und registrieren Sie die Seite aus Schritt 1 unter Front-Channel-Abmelde-URL. Beachten Sie, dass diese Seite über httpsgeladen werden muss.

Anforderungen für die Front-Channel-Abmeldeseite

Die Seite, die für die Abmeldung im Frontkanal verwendet wird, sollte wie folgt erstellt werden:

1. Rufen Sie beim Laden der Seite automatisch die MSAL-API logoutRedirect auf.
2. Legen Sie in der Konfiguration PublicClientApplicationsystem.allowRedirectInIframe auf true fest.
3. Beim Aufrufen logoutwird empfohlen, die Umleitung im iframe auf die Abmeldeseite zu verhindern (siehe oben).

Beispiel:

const msal = new PublicClientApplication({
    auth: {
        clientId: "my-client-id"
    },
    system: {
        allowRedirectInIframe: true
    }
})

// Automatically on page load
msal.logoutRedirect({
    onRedirectNavigate: () => {
        // Return false to stop navigation after local logout
        return false;
    }
});

Wenn sich ein Benutzer nun von einer anderen Anwendung abmeldet, wird die Front-Channel-Abmelde-URL Ihrer Anwendung in einem ausgeblendeten iFrame geladen, und MSAL.js wird seinen Cache leeren, um das Single Sign-Out abzuschließen.

Beispiele für die Front-Channel-Abmeldung

Die folgenden Beispiele veranschaulichen, wie Sie die Front-Channel-Abmeldung mithilfe von MSAL.jsimplementieren:

• MSAL Angular v2: Angular 11-Beispiel
• MSAL React: React-Router-Beispiel

Ereignisse

Wenn verschiedene Teile Ihrer App auf den Abmeldestatus reagieren müssen, ohne direkten Zugriff auf das von logoutRedirect oder logoutPopup zurückgegebene Promise zu haben, können Sie die Ereignis-API verwenden.

Ereignisse werden ausgelöst, wenn die Abmeldung erfolgreich ist oder fehlschlägt und wenn das Pop-up bei Verwendung von logoutPopup geöffnet wird.

Wichtige Hinweise

• Wenn kein Konto an die Abmelde-API oder kein EndSessionRequest-Objekt übergeben wird, wird es von allen Konten abgemeldet.
• Wenn ein Konto an die Abmelde-API übergeben wird, löscht MSAL nur Token im Zusammenhang mit diesem Konto.
• Die Abmeldung vom Server ist eine Komfortfunktion und erfolgt daher nach bestem Bemühen. Abmelde-APIs werden erfolgreich aufgelöst, solange der lokale Anwendungscache erfolgreich gelöscht wurde, unabhängig davon, ob die Serveranmeldung erfolgreich ist.

Nächste Schritte

Tauchen Sie tiefer in fortgeschrittene Themen ein, z. B.:

• Zwischenspeichern
• Erweiterte Konfigurationsoptionen