ユーザーのサインアウト

ここから始める前に、ログイン、トークンの取得、トークンの有効期間の管理方法を理解しておく必要があります。

ログアウト

MSAL のログアウトプロセスには 2 つの手順があります。

MSAL キャッシュをクリアします。
ID サーバー上のセッションをクリアします。

PublicClientApplication オブジェクトは、これらのアクションを実行する 2 つの API を公開します。

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

これらの API は、ユーザーおよびセッションデータのトークンキャッシュをクリアし、ブラウザーウィンドウまたはポップアップウィンドウをサーバーのログアウトページに移動します。次の条件が満たされている限り、サーバーはサインアウトするアカウントを選択し、 postLogoutRedirectUri にリダイレクトするようにユーザーに求めます。

URI は、アプリ登録の応答 URL として登録されます
URI は、PublicClientApplication 設定またはログアウトリクエストの postLogoutRedirectUri として指定されます
ユーザーが ID プロバイダーとのアクティブなセッションを持っている
(MSA シナリオ)アプリの登録時にフロントチャネルログアウト URL が構成されている

上記のいずれかの条件が満たされていない場合、ページ (またはポップアップウィンドウ) は ID プロバイダーのログアウトページに残ります。

大事な： このログアウトナビゲーションが何らかの方法で中断された場合、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を使用すると、ユーザートークンのローカルキャッシュがクリアされ、ウィンドウがサーバーのサインアウトページにリダイレクトされます。 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;
    }
});

logoutPopup

logoutPopup API によって、サーバーのサインアウトページがポップアップで開き、アプリケーションが現在の状態を維持できるようになります。このため、ポップアップを使用してログアウトする場合は、 logoutRedirect に関するいくつかの追加の考慮事項があります。

logoutPopup が返す Promise は、ポップアップが閉じた後に解決されることが想定されています
postLogoutRedirectUri は、サインアウトが完了したときに MSAL がポップアップを閉じることができるようにするために必要です
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を使用しているときに"サイレント" またはプロンプトなしのログアウトを実行できます。プロンプトなしのログアウトを実現するには、次の 2 つの方法があります。

オプション 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でこの機能を利用するには、次の手順に従います。

アプリケーションで、専用のログアウトページを作成します。このページでは、ページの読み込み時にトークンを取得するなど、他の機能を実行しないでください (詳細については、以下を参照してください)。このページは非表示の iframe に読み込まれ、Microsoft Entra IDおよび MSA ユーザーの場合は、issおよびsidクエリパラメーターが含まれます。
Microsoft Entra 管理センターで、アプリケーションの [認証] ページに移動し、手順 1 のページを [Front-channel logout URL] に登録します。このページは、 https経由で読み込む必要があることに注意してください。

フロントチャネルログアウトページの要件

フロントチャネルログアウトに使用されるページは、次のように作成する必要があります。

ページの読み込み時に、MSAL logoutRedirect API を自動的に呼び出します。
PublicClientApplication構成で、system.allowRedirectInIframeを true に設定します。
logoutを呼び出すときは、iframe のログアウトページへのリダイレクトを禁止することをお勧めします (上記を参照)。

例：

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

ユーザーが別のアプリケーションからログアウトすると、アプリケーションのフロントチャネルログアウト URL が非表示の iframe に読み込まれ、MSAL.js はキャッシュをクリアしてシングルサインアウトを完了します。

Note

フロントチャネルログアウトは、ブラウザー間で常にサポートされるとは限りません。 Chromium 対応ストレージパーティション分割と Firefox では、フロントチャネルログアウトを実行するための同様の標準制限アプリケーションがサポートされています。このトピックに関する Entra の公式ドキュメントについては、「サードパーティの Cookie を使用しないフロントチャネルログアウトの制限事項」を参照してください。

フロントチャネルログアウトのサンプル

次のサンプルは、MSAL.jsを使用してフロントチャネルログアウトを実装する方法を示しています。

MSAL Angular v2: Angular 11 サンプル
MSAL React: React ルーターのサンプル

Events

アプリの異なる部分で、logoutRedirect または logoutPopup によって返される Promise に直接アクセスせずにログアウト状態の変化に反応する必要がある場合は、イベント API を使用できます。

ログアウトが成功または失敗したとき、および logoutPopupを使用しているときにポップアップが開かれると、イベントが生成されます。

重要な注意事項

ログアウト API に渡されたアカウントがない場合、または EndSessionRequest オブジェクトがない場合は、すべてのアカウントからログアウトされます。
アカウントがログアウト API に渡された場合、MSAL はそのアカウントに関連するトークンのみをクリアします。
サーバーサインアウトは便利な機能であり、ベストエフォートで行われます。ログアウト API は、サーバーのサインアウトが成功したかどうかに関係なく、ローカルアプリケーションキャッシュが正常にクリアされている限り、正常に解決されます。

次のステップ

次のようなより高度なトピックを調べる。

フィードバック

このページはお役に立ちましたか?

Last updated on 2026-07-02