Wylogowywanie użytkowników

Przed rozpoczęciem pracy upewnij się, że rozumiesz, jak zalogować się, uzyskać tokeny i zarządzać okresami istnienia tokenów.

Wylogowywanie

Proces wylogowywania w MSAL składa się z dwóch etapów.

  1. Wyczyść pamięć podręczną biblioteki MSAL.
  2. Wyczyść sesję na serwerze tożsamości.

Obiekt PublicClientApplication uwidacznia dwa interfejsy API, które wykonują te akcje.

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

Te interfejsy API wyczyszczą pamięć podręczną tokenów oraz wszelkie dane użytkownika i sesji, a następnie przekierują okno przeglądarki lub okno wyskakujące na stronę wylogowania serwera. Serwer następnie poprosi użytkownika o wybranie konta, z którego chce się wylogować, a następnie przekieruje go z powrotem do postLogoutRedirectUri, pod warunkiem że spełnione są następujące warunki:

  1. URI jest zarejestrowany jako adres URL odpowiedzi w ramach rejestracji aplikacji
  2. URI jest podawany jako postLogoutRedirectUri w konfiguracji PublicClientApplication lub w żądaniu wylogowania
  3. Użytkownik ma aktywną sesję z dostawcą tożsamości
  4. (Scenariusze MSA) W rejestracji aplikacji skonfigurowano adres URL wylogowania front-channel

Jeśli którykolwiek z powyższych warunków nie zostanie spełniony, strona (lub okno podręczne) pozostanie na stronie wylogowania dostawcy tożsamości.

WAŻNE: Jeśli ta nawigacja wylogowywania zostanie w jakikolwiek sposób przerwana, pamięć podręczna biblioteki MSAL może zostać wyczyszczona, ale sesja może nadal pozostawać aktywna na serwerze. Przed powrotem do aplikacji upewnij się, że nawigacja zostanie w pełni ukończona.

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

Obiekty żądań

Opcje konfiguracji można przekazać każdemu z interfejsów API wylogowania, aby dostosować ich działanie:

Przekierowanie po wylogowaniu

Użycie logoutRedirect spowoduje wyczyszczenie lokalnej pamięci podręcznej tokenów użytkownika, a następnie przekierowanie okna do strony wylogowania serwera. Nie oczekuje się, że obietnica zwrócona przez logoutRedirect zostanie spełniona, ale możesz użyć wobec niej await, jeśli musisz zablokować wykonanie innego kodu do momentu zainicjowania przekierowania.

Opcje konfiguracji można udostępnić, aby dostosować zachowanie:

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

Pomijanie wylogowania serwera

Warning

Pomijanie wylogowania serwera oznacza, że sesja użytkownika pozostanie aktywna na serwerze i może zostać ponownie zalogowana do aplikacji bez ponownego podania poświadczeń.

Jeśli chcesz, aby aplikacja wykonywała tylko lokalne wylogowanie, możesz przekazać funkcję wywołania zwrotnego jako parametr onRedirectNavigate w żądaniu i sprawić, aby ta funkcja zwracała wartość false.

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

wyskakująceOknoWylogowania

Interfejs API logoutPopup otworzy stronę wylogowania na serwerze w wyskakującym oknie, umożliwiając aplikacji zachowanie jej bieżącego stanu. Z tego powodu, oprócz logoutRedirect, należy wziąć pod uwagę kilka dodatkowych kwestii przy wyborze wyskakujących okien do wylogowywania:

  • Oczekuje się, że obietnica zwrócona przez logoutPopup program zostanie rozwiązana po zamknięciu wyskakujących okienek
  • postLogoutRedirectUri jest wymagane, aby biblioteka MSAL mogła zamknąć wyskakujące okno po zakończeniu wylogowania
  • postLogoutRedirectUri zostanie otwarty w wyskakującym oknie, a nie w oknie głównym. Jeśli chcesz, aby aplikacja najwyższego poziomu została przekierowana po wylogowaniu, możesz użyć parametru mainWindowRedirectUri w żądaniu wylogowania.

Opcje konfiguracji można udostępnić, aby dostosować zachowanie.

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
        }
    }
});

Wylogowywanie bez monitu

Jeśli aplikacja kliencka ma włączone opcjonalne oświadczenie login_hint dla tokenów identyfikatorów, możesz użyć oświadczenia tokenu identyfikatora login_hint , aby wykonać "dyskretne" lub bez monitu wylogowanie podczas korzystania z tokenu logoutRedirect lub logoutPopup. Istnieją dwa sposoby na osiągnięcie bez monitowego wylogowania:

Opcja 1. Zezwalaj usłudze MSAL na automatyczne analizowanie login_hint z oświadczeń tokenu identyfikatora konta

Pierwszą i najprostszą opcją jest podanie obiektu konta, dla którego chcesz zakończyć sesję do interfejsu API wylogowania. Biblioteka MSAL sprawdzi, czy claim login_hint jest dostępny w tokenie ID konta, i automatycznie doda go do żądania zakończenia sesji jako logout_hint, aby pominąć monit wyboru konta.

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});

Opcja 2: Ręcznie ustaw opcję logoutHint w żądaniu wylogowania

Alternatywnie, jeśli wolisz ręcznie ustawić logoutHint, możesz wyodrębnić claim login_hint w aplikacji i ustawić go jako logoutHint w żądaniu wylogowania:

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

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

Uwaga: w zależności od wybranego interfejsu API (przekierowanie/wyskakujące okienko) aplikacja będzie nadal przekierowywać lub otwierać wyskakujące okienko w celu zakończenia sesji serwera. Różnica polega na tym, że użytkownik nie zobaczy ani nie będzie musiał wchodzić w interakcję z monitem selektora konta serwera.

Wylogowanie przez kanał frontowy

Microsoft Entra ID i Azure AD B2C obsługują funkcję wylogowywania przez kanał front-channel protokołu OAuth, która umożliwia pojedyncze wylogowanie we wszystkich aplikacjach, gdy użytkownik zainicjuje wylogowanie. Aby skorzystać z tej funkcji za pomocą MSAL.js, wykonaj następujące kroki:

  1. W aplikacji utwórz oddzielną stronę wylogowania. Ta strona nie powinna wykonywać żadnej innej funkcji, takiej jak uzyskiwanie tokenów podczas ładowania strony (zobacz poniżej, aby uzyskać szczegółowe informacje). Uwaga: ta strona zostanie załadowana w ukrytym elemencie iframe, a w przypadku użytkowników Microsoft Entra ID i MSA będzie zawierać parametry zapytania iss i sid.
  2. W centrum administracyjnym Microsoft Entra przejdź do strony Authentication swojej aplikacji i zarejestruj stronę z kroku pierwszego w polu Front-channel logout URL. Należy pamiętać, że ta strona musi zostać załadowana za pomocą polecenia https.

Wymagania dotyczące strony wylogowania kanału frontowego

Strona używana do wylogowywania w kanale frontowym powinna być zbudowana w następujący sposób:

  1. Po załadowaniu strony automatycznie wywołuj interfejs API MSAL logoutRedirect.
  2. W konfiguracji PublicClientApplication ustaw parametr system.allowRedirectInIframe na true.
  3. Przy wywoływaniu logout zalecamy zapobieganie przekierowaniu w elemencie iframe na stronę wylogowania (patrz powyżej).

Example:

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;
    }
});

Teraz, gdy użytkownik wyloguje się z innej aplikacji, adres URL wylogowywania front-channel Twojej aplikacji zostanie załadowany w ukrytym elemencie iframe, a MSAL.js wyczyści pamięć podręczną, aby ukończyć pojedyncze wylogowanie.

Note

Wylogowanie przez kanał frontowy nie zawsze jest obsługiwane we wszystkich przeglądarkach. Chromium włączył Partycjonowanie pamięci, a Firefox obsługuje podobny standard, który ogranicza aplikacje do wykonywania wylogowania przez kanał frontowy. Aby uzyskać oficjalną dokumentację Entra na ten temat, zobacz artykuł Ograniczenia dotyczące wylogowywania front-channel bez plików cookie stron trzecich.

Przykłady wylogowania przez kanał frontowy

Poniższe przykłady pokazują, jak zaimplementować wylogowywanie przez kanał frontowy przy użyciu biblioteki MSAL.js:

Zdarzenia

Jeśli różne części aplikacji muszą reagować na status wylogowania bez bezpośredniego dostępu do obiektu Promise zwróconego przez logoutRedirect lub logoutPopup, możesz użyć API zdarzeń.

Zdarzenia będą emitowane, gdy wylogowywanie zakończy się powodzeniem lub niepowodzeniem, a po otwarciu wyskakującego okienka podczas korzystania z polecenia logoutPopup.

Ważne uwagi

  • Jeśli do interfejsu API wylogowania nie zostanie przekazane żadne konto lub jeśli nie zostanie przekazany żaden obiekt EndSessionRequest, spowoduje to wylogowanie ze wszystkich kont.
  • Jeśli konto zostanie przekazane do interfejsu API wylogowania, biblioteka MSAL wyczyści tylko tokeny powiązane z tym kontem.
  • Wylogowanie z serwera jest funkcją pomocniczą i w związku z tym jest realizowane w miarę możliwości. Interfejsy API wylogowania zakończą się powodzeniem, o ile lokalna pamięć podręczna aplikacji została pomyślnie wyczyszczona, niezależnie od tego, czy wylogowanie z serwera zakończyło się pomyślnie.

Dalsze kroki

Zapoznaj się z bardziej zaawansowanymi tematami, takimi jak: