Události

Msal-Browser (@azure/msal-browser) od verze 2.4 teď poskytuje rozhraní API událostí, která jsou k dispozici uživatelům naší základní knihovny a knihoven obálky. Tyto události souvisejí s ověřováním a tím, co msAL dělá, a lze je použít v aplikacích k aktualizaci uživatelského rozhraní, zobrazení chybových zpráv atd.

Jak vypadají události

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

Datová část a chyba jsou EventMessage definovány takto:

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

export type EventError = AuthError | Error | null;

Jak se události generují v prohlížeči msal

Msal-browser má chráněnou funkci emitEventa generuje události v hlavních rozhraních API. Seznam aktuálně vygenerovaných událostí najdete v následující tabulce.

Tady je příklad, jak msal-browser generuje událost s datovou částí nebo s chybou:

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

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

Jak používat rozhraní API událostí

Msal-browser exportuje addEventCallback funkci, která přebírá funkci zpětného volání a lze ji použít ke zpracování vygenerovaných událostí.

Tady je příklad využití vygenerovaných událostí v aplikaci:

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

Přidání zpětného volání události vrátí ID. Toto ID lze v případě potřeby použít k odebrání zpětného volání pomocí removeEventCallback funkce exportované pomocí msal-browseru:

msalInstance.removeEventCallback(callbackId);

Zpracování chyb

Vzhledem k tomu, jak EventError je definován způsob, může zpracování chyb vygenerovaných událostí vyžadovat ověření, že chyba je správného typu před přístupem ke konkrétním vlastnostem vygenerované chybě. Chybu lze přetypovat AuthError nebo zkontrolovat, zda se jedná o instanci AuthError.

Tady je příklad využívání generované události a přetypování chyby:

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

Získání stavu interakce z událostí

Aktuální stav interakce můžete získat z událostí pomocí rozhraní api getInteractionStatusFromEvent :

Tady je příklad zobrazení zprávy, když neprobíhá žádná interakce:

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

Synchronizace přihlášeného stavu napříč kartami a okny

Pokud chcete aktualizovat uživatelské rozhraní, když se uživatel přihlásí k aplikaci nebo z aplikace nebo změní aktivní účet na jiné kartě nebo okně, můžete se přihlásit k odběru LOGIN_SUCCESSLOGOUT_SUCCESS, a ACTIVE_ACCOUNT_CHANGED událostí.

• U přidání a odebrání účtu bude AccountInfo datová část objektem, který byl přidán nebo odebrán.
• U aktivních aktualizací účtu nebude k dispozici žádná datová část.

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

Tabulka událostí

Jedná se o události, které aktuálně vygeneruje msal-browser.