Events

バージョン 2.4 以降の Msal-Browser (@azure/msal-browser) では、コア ライブラリとラッパー ライブラリのユーザーが使用できるイベント API が提供されるようになりました。 これらのイベントは認証と MSAL の処理に関連しており、アプリケーションで UI の更新やエラー メッセージの表示などを行うために使用できます。

イベントの外観

export type EventMessage = {
    eventType: EventType;
    interactionType: InteractionType | null;
    payload: EventPayload;
    error: EventError;
    timestamp: number;
};

EventMessageのペイロードとエラーは次のように定義されます。

export type EventPayload = PopupRequest | RedirectRequest | SilentRequest | SsoSilentRequest | EndSessionRequest | AuthenticationResult | PopupEvent | null;

export type EventError = AuthError | Error | null;

msal-browser でのイベントの生成方法

Msal-browser には、保護された関数 emitEventがあり、主要な API でイベントを出力します。 現在出力されているイベントの一覧については、次の表を参照してください。

msal-browser がペイロードまたはエラーを含むイベントを生成する方法の例を次に示します。

this.emitEvent(EventType.LOGIN_SUCCESS, InteractionType.Redirect, result);

this.emitEvent(EventType.LOGIN_FAILURE, InteractionType.Redirect, null, e);

イベント API の使用方法

Msal-browser は、コールバック関数を受け取る addEventCallback 関数をエクスポートし、出力されたイベントを処理するために使用できます。

アプリケーションで生成されたイベントを使用する方法の例を次に示します。

const callbackId = msalInstance.addEventCallback((message: EventMessage) => {
    // Update UI or interact with EventMessage here
    if (message.eventType === EventType.LOGIN_SUCCESS) {
        console.log(message.payload);
     }
});

イベント コールバックを追加すると、ID が返されます。この ID は、msal-browser によってエクスポートされた removeEventCallback 関数を使用して、必要に応じてコールバックを削除するために使用できます。

msalInstance.removeEventCallback(callbackId);

エラーの処理

EventErrorの定義方法により、イベントで生成されたエラーを処理するには、出力されたエラーの特定のプロパティにアクセスする前に、エラーが正しい型であることを検証する必要があります。 エラーは、 AuthError にキャストすることも、 AuthErrorのインスタンスであることを確認することもできます。

出力されたイベントを使用してエラーをキャストする例を次に示します。

const callbackId = msalInstance.addEventCallback((message: EventMessage) => {
    // Update UI or interact with EventMessage here
    if (message.eventType === EventType.LOGIN_FAILURE) {
        if (message.error instanceof AuthError) {
            // Do something with the error
        }
     }
});

イベントからの対話状態の取得

getInteractionStatusFromEvent API を使用して、イベントから現在の対話状態を取得できます。

進行中の対話がない場合にメッセージを表示する例を次に示します。

const callbackId = msalInstance.addEventCallback((message: EventMessage) => {
    const status = EventMessageUtils.getInteractionStatusFromEvent(message);

    // Update UI or interact with EventMessage here
    if (status === InteractionStatus.None) {
        console.log(message.payload);
    }
});

タブとウィンドウ間でログに記録された状態を同期する

ユーザーがアプリにログインまたはログアウトするとき、または別のタブまたはウィンドウでアクティブなアカウントを変更するときに UI を更新する場合は、 LOGIN_SUCCESS、 LOGOUT_SUCCESS、および ACTIVE_ACCOUNT_CHANGED イベントをサブスクライブできます。

• アカウントの追加と削除の場合、ペイロードは追加または削除された AccountInfo オブジェクトになります。
• アクティブなアカウントの更新の場合、ペイロードはありません

msalInstance.addEventCallback((message: EventMessage) => {
    if (message.eventType === EventType.LOGIN_SUCCESS) {
        // Update UI with new account
    } else if (message.eventType === EventType.LOGOUT_SUCCESS) {
        // Update UI with account logged out
    } else if (message.eventType === EventType.ACTIVE_ACCOUNT_CHANGED) {
        const accountInfo = msalInstance.getActiveAccount();
        // Update UI with new active account info
    }
});

イベントの表

これらは、msal-browser によって現在生成されているイベントです。