將使用者登出

在開始之前，請確保你了解如何 登入、 取得代幣，以及 管理代幣的壽命。

登出

MSAL 的登出流程分為兩個步驟。

  1. 清除 MSAL 快取。
  2. 清除身份伺服器上的會話。

這個 PublicClientApplication 物件會暴露兩個執行這些動作的 API。

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

這些 API 會清除令牌快取中的任何使用者和會話資料，然後透過瀏覽器視窗或彈出視窗導引到伺服器的登出頁面。 伺服器接著會提示使用者選擇想要登出的帳戶，並在符合以下條件的前提下重新導向回您的 postLogoutRedirectUri：

  1. URI 在應用程式註冊時註冊為回覆網址
  2. URI 會作為 PublicClientApplication 設定或登出要求中的 postLogoutRedirectUri 提供
  3. 使用者與身份提供者有活躍的會話
  4. （MSA 案例）應用程式註冊中已設定前端通道登出 URL

若上述任何條件未符合，該頁面（或彈出視窗）將保留在身份提供者的登出頁面。

重要： 如果登出導航被中斷，你的 MSAL 快取可能會被清除，但該會話仍可能持續留在伺服器上。 請確保導覽完整完成後再返回申請。

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

請求物件

每個登出 API 都可以提供設定選項以自訂行為：

登出後重新導向

使用 logoutRedirect 後會清除使用者代幣的本地快取，然後將視窗導向到伺服器登出頁面。 回傳 logoutRedirect 的承諾不會被解決，但如果你需要在重新導向啟動前阻止其他程式碼執行，可以等待它。

可提供設定選項以自訂行為：

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

略過從伺服器登出

Warning

跳過伺服器登出表示使用者的會話會持續在伺服器上，且可以重新登入你的應用程式，而不必重新提供憑證。

如果你希望應用程式只執行本機登出，可以在請求的 onRedirectNavigate 參數中提供回呼函式，並讓該回呼函式回傳 false。

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

logout彈出視窗

API logoutPopup 會以彈出視窗開啟伺服器登出頁面，讓你的應用程式維持目前狀態。 由於這一點，在選擇使用彈出式視窗登出時，除了 logoutRedirect 之外，還需要另外考量幾點：

  • 回傳的 logoutPopup 承諾預計會在彈出視窗關閉後解決
  • 為了讓 MSAL 能夠在登出完成後關閉快顯視窗，postLogoutRedirectUri 是 必要的
  • postLogoutRedirectUri 會在彈出視窗中開啟，而不是主框。 如果你需要登出後重定向頂層應用程式，可以在登出請求中使用該 mainWindowRedirectUri 參數。

可提供設定選項以自訂行為。

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

無提示登出

如果你的用戶端應用程式已為 ID 權杖啟用 login_hint 選擇性宣告，你就可以利用 ID 權杖的 login_hint 聲明，在使用 logoutRedirect 或 logoutPopup 時執行「無訊息」或不顯示提示的登出。 有兩種方法可以實現無提示登出：

選項 1：讓 MSAL 自動從帳戶的 ID 權杖宣告中解析出 login_hint

第一個也是最簡單的選項是將你想結束會話的帳號物件提供給登出 API。 MSAL 會檢查帳號的 ID 權杖中是否有 login_hint 宣告，並自動將其作為 logout_hint 加入結束工作階段要求中，以略過帳號選擇器提示。

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

選項 2：在登出要求中手動設定 logoutHint 選項

或者，如果你偏好手動設定 logoutHint，你可以在應用程式中擷取 login_hint 宣告，並在登出請求中將其設為 logoutHint：

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

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

注意：根據你選擇的 API（重定向/彈出視窗），應用程式仍會重新導向或開啟彈出視窗以終止伺服器會話。差別在於使用者不會看到或必須操作伺服器的帳號選擇提示。

前通道登出

Microsoft Entra ID 與 Azure AD B2C 支援 OAuth 前通道登出功能，當使用者啟動登出時，所有應用程式皆可單次登出。 若要搭配 MSAL.js 使用此功能，請執行下列步驟：

  1. 在你的申請中，建立一個專屬的登出頁面。 此頁面 不應 執行任何其他功能，例如在頁面載入時取得權杖（詳情請參見下文）。 注意，此頁面將以隱藏的 iframe 載入，對於 Microsoft Entra ID 和 MSA 使用者，會包含 iss 和 sid 查詢參數。
  2. 在 Microsoft Entra 系統管理中心，瀏覽至應用程式的 Authentication 頁面，然後將步驟一中的頁面 URL 登錄到 Front-channel logout URL 底下。 請注意，此頁面必須透過 https 載入。

前端通道登出頁面的要求

用於前頻道登出的頁面應建構如下：

  1. 頁面載入時，自動呼叫 MSAL logoutRedirect API。
  2. 在 PublicClientApplication 設定中，將 system.allowRedirectInIframe 設為 true。
  3. 在調用 時，我們建議在 logoutiframe 中避免將重定向到登出頁面（見 上文）。

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

現在當使用者從其他應用程式登出時，你的應用程式的前通道登出網址會被載入隱藏的 iframe，MSAL.js 會清除快取以完成單次登出。

Note

前通道登出並非所有瀏覽器都支援。 Chromium 已啟用 儲存分割，而 Firefox 也支援類似的標準，限制應用程式執行前通道登出。 關於此主題的官方 Entra 文件，請參閱 「無第三方 Cookie 前通道登出的限制」。

前通道登出範例

以下範例示範如何使用 MSAL.js實作前通道登出：

事件

如果應用程式的不同部分需要對登出狀態作出回應，但無法直接存取由 logoutRedirect 或 logoutPopup 傳回的 Promise，則可以使用 事件 API。

當登出成功、失敗，及使用 logoutPopup 時快顯視窗開啟時，都會觸發事件。

重要注意事項

  • 如果沒有帳號被傳達到登出 API，或沒有 EndSessionRequest 物件，它就會登出所有帳號。
  • 如果將某個帳戶傳遞給登出 API，MSAL 僅會清除與該帳戶相關的權杖。
  • 伺服器登出是一種便利功能，因此是盡力而為的。 只要本機應用程式快取已成功清除，登出 API 就會成功完成，無論伺服器端登出是否成功。

後續步驟

深入探討更進階的主題，例如：

  • Last updated on