Events

Msal-Browser (@azure/msal-browser) начиная с версии 2.4 теперь предоставляет API событий, доступные пользователям основной библиотеки и библиотек оболочки. Эти события связаны с проверкой подлинности и действиями MSAL и могут использоваться в приложениях для обновления пользовательского интерфейса, отображения сообщений об ошибках и т. д.

Как выглядят события

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

При добавлении обратного вызова события возвращается идентификатор. Этот идентификатор можно использовать для удаления обратного вызова при необходимости с помощью removeEventCallback функции, экспортируемой msal-browser:

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

Получение состояния взаимодействия из событий

Текущее состояние взаимодействия можно получить из событий с помощью API getInteractionStatusFromEvent :

Ниже приведен пример отображения сообщения при отсутствии взаимодействия.

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

Синхронизация вошедшего в систему состояния между вкладками и окнами

Если вы хотите обновить пользовательский интерфейс, когда пользователь входит в приложение или выходит из него или изменяет активную учетную запись на другой вкладке или окне, вы можете подписаться на 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.

Тип события	Description	Тип взаимодействия	Полезная нагрузка	Error
LOGIN_START	LoginPopup или loginRedirect вызывается	Popup или Redirect	PopupRequest или RedirectRequest
LOGIN_SUCCESS	Успешно вошедший в систему	Popup или Redirect	AccountInfo
LOGIN_FAILURE	Ошибка при входе в систему	Popup или Redirect		AuthError или Error
ACQUIRE_TOKEN_START	Метод AcquireTokenPopup или acquireTokenRedirect или acquireTokenSilent вызывается	Popup или Redirect или Silent	PopupRequest или RedirectRequest илиSilentRequest
ACQUIRE_TOKEN_SUCCESS	Успешно полученный маркер из кэша или сети	Popup или Redirect или Silent	AuthenticationResult
ACQUIRE_TOKEN_FAILURE	Ошибка при получении маркера	Popup или Redirect или Silent		AuthError или Error
ACQUIRE_TOKEN_NETWORK_START	Начало получения маркера из сети	Silent
SSO_SILENT_START	Вызывается API SsoSilent	Silent	SsoSilentRequest
SSO_SILENT_SUCCESS	SsoSilent успешно выполнено	Silent	AuthenticationResult
SSO_SILENT_FAILURE	Сбой единого входа	Silent		AuthError или Error
HANDLE_REDIRECT_START	Вызов HandleRedirectPromise	Redirect
HANDLE_REDIRECT_END	Готово HandleRedirectPromise	Redirect
LOGOUT_START	Вызывается выход	Redirect или Popup	EndSessionRequest или EndSessionPopupRequest
LOGOUT_END	Завершение выхода	Redirect или Popup
LOGOUT_SUCCESS	Успешное завершение выхода	Redirect или Popup	EndSessionRequest или EndSessionPopupRequest
LOGOUT_FAILURE	Сбой выхода	Redirect или Popup		AuthError или Error
ACTIVE_ACCOUNT_CHANGED	Фильтры активных учетных записей, измененные на другой вкладке или окне	N/A	N/A	N/A
INITIALIZE_START	Инициализация функции с именем	N/A	N/A	N/A
INITIALIZE_END	Инициализация функции завершена	N/A	N/A	N/A