Zdarzenia

Msal-Browser (@azure/msal-browser) począwszy od wersji 2.4 udostępnia teraz interfejsy API zdarzeń, które są dostępne dla użytkowników naszej podstawowej biblioteki i bibliotek otoki. Te zdarzenia są związane z uwierzytelnianiem i działaniem biblioteki MSAL i mogą być używane w aplikacjach do aktualizowania interfejsu użytkownika, wyświetlania komunikatów o błędach itd.

Jak wyglądają zdarzenia

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

Ładunek i błąd w pliku EventMessage są definiowane w następujący sposób:

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

export type EventError = AuthError | Error | null;

Jak zdarzenia są emitowane w przeglądarce msal-browser

Biblioteka Msal-browser ma chronioną funkcję emitEventi emituje zdarzenia w głównych interfejsach API. Aby uzyskać listę aktualnie emitowanych zdarzeń, zobacz poniższą tabelę.

Oto przykład sposobu, w jaki przeglądarka msal-browser emituje zdarzenie z ładunkiem lub z błędem:

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

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

Jak używać interfejsu API zdarzeń

Msal-browser eksportuje addEventCallback funkcję, która przyjmuje funkcję wywołania zwrotnego i może służyć do przetwarzania emitowanych zdarzeń.

Oto przykład sposobu korzystania z emitowanych zdarzeń w aplikacji:

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

Dodanie wywołania zwrotnego zdarzeń zwróci identyfikator. Ten identyfikator może służyć do usuwania wywołania zwrotnego w razie potrzeby przy użyciu removeEventCallback funkcji wyeksportowanej przez msal-browser:

msalInstance.removeEventCallback(callbackId);

Obsługa błędów

Ze względu na sposób EventError jest zdefiniowany, obsługa błędów emitowanych ze zdarzeniem może wymagać weryfikacji, czy błąd jest poprawnym typem przed uzyskaniem dostępu do określonych właściwości emitowanego błędu. Błąd można rzutować na AuthError lub sprawdzić, czy jest to wystąpienie AuthErrorklasy .

Oto przykład używania emitowanego zdarzenia i rzutowania błędu:

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

Uzyskiwanie stanu interakcji ze zdarzeń

Bieżący stan interakcji można uzyskać ze zdarzeń przy użyciu interfejsu API getInteractionStatusFromEvent :

Oto przykład wyświetlania komunikatu, gdy nie ma żadnych interakcji w toku:

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

Synchronizowanie zalogowanego stanu na kartach i oknach

Jeśli chcesz zaktualizować interfejs użytkownika, gdy użytkownik loguje się do aplikacji lub poza aplikacją albo zmienia aktywne konto na innej karcie lub w innym oknie, możesz subskrybować LOGIN_SUCCESSzdarzenia , LOGOUT_SUCCESSi ACTIVE_ACCOUNT_CHANGED .

• W przypadku dodawania i usuwania kont ładunek będzie obiektem AccountInfo , który został dodany lub usunięty.
• W przypadku aktualizacji aktywnego konta nie będzie ładunku

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

Tabela zdarzeń

Są to zdarzenia obecnie emitowane przez msal-browser.

Typ zdarzenia	Description	Typ interakcji	Ładunek	Error
LOGIN_START	Nazwa LoginPopup lub loginRedirect jest wywoływana	Popup lub Redirect	PopupRequest lub RedirectRequest
LOGIN_SUCCESS	Pomyślnie zalogowano się	Popup lub Redirect	AccountInfo
LOGIN_FAILURE	Błąd podczas logowania	Popup lub Redirect		Błąd AuthError lub błąd
ACQUIRE_TOKEN_START	Funkcja AcquireTokenPopup lub acquireTokenRedirect lub acquireTokenSilent jest wywoływana	Popup lub Redirect lub Silent	PopupRequest lub RedirectRequest lub SilentRequest
ACQUIRE_TOKEN_SUCCESS	Pomyślnie pobrano token z pamięci podręcznej lub sieci	Popup lub Redirect lub Silent	AuthenticationResult
ACQUIRE_TOKEN_FAILURE	Błąd podczas uzyskiwania tokenu	Popup lub Redirect lub Silent		Błąd AuthError lub błąd
ACQUIRE_TOKEN_NETWORK_START	Rozpoczynanie uzyskiwania tokenu z sieci	Silent
SSO_SILENT_START	Interfejs API SsoSilent o nazwie	Silent	SsoSilentRequest
SSO_SILENT_SUCCESS	Logowanie jednokrotne powiodło się	Silent	AuthenticationResult
SSO_SILENT_FAILURE	Logowanie jednokrotne nie powiodło się	Silent		Błąd AuthError lub błąd
HANDLE_REDIRECT_START	HandleRedirectPromise o nazwie	Redirect
HANDLE_REDIRECT_END	Zakończono handleRedirectPromise	Redirect
LOGOUT_START	Wylogowywanie o nazwie	Redirect lub Popup	EndSessionRequest lub EndSessionPopupRequest
LOGOUT_END	Zakończono wylogowywanie	Redirect lub Popup
LOGOUT_SUCCESS	Powodzenie wylogowywanie	Redirect lub Popup	EndSessionRequest lub EndSessionPopupRequest
LOGOUT_FAILURE	Wylogowywanie nie powiodło się	Redirect lub Popup		Błąd AuthError lub błąd
ACTIVE_ACCOUNT_CHANGED	Aktywne filtry kont, w których zmieniono je na innej karcie lub w innym oknie	N/A	N/A	N/A
INITIALIZE_START	Inicjowanie funkcji o nazwie	N/A	N/A	N/A
INITIALIZE_END	Inicjowanie funkcji zostało ukończone	N/A	N/A	N/A