Events

Msal-Browser (@azure/msal-browser) från och med version 2.4 tillhandahåller nu händelse-API:er som är tillgängliga för användare av vårt kärnbibliotek och omslutningsbibliotek. Dessa händelser är relaterade till autentisering och vad MSAL gör och kan användas i program för att uppdatera användargränssnittet, visa felmeddelanden och så vidare.

Hur händelser ser ut

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

Nyttolasten och felet i EventMessage definieras på följande sätt:

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

export type EventError = AuthError | Error | null;

Så här genereras händelser i msal-browser

Msal-browser har en skyddad funktion emitEventoch genererar händelser i större API:er. Listan över händelser som för närvarande genereras finns i tabellen nedan.

Här är ett exempel på hur msal-browser genererar en händelse med en nyttolast, eller med ett fel:

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

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

Så här använder du händelse-API:et

Msal-browser exporterar funktionen addEventCallback som tar in en återanropsfunktion och kan användas för att bearbeta avgivna händelser.

Här är ett exempel på hur du kan använda de utgivna händelserna i ditt program:

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

Om du lägger till ett händelseåteranrop returneras ett ID. Det här ID:t kan användas för att ta bort återanropet om det behövs med hjälp av funktionen removeEventCallback som exporteras av msal-browser:

msalInstance.removeEventCallback(callbackId);

Hantering av fel

På grund av att sättet EventError har definierats kan hanteringsfel som genereras med en händelse kräva validering av att felet är av rätt typ innan specifika egenskaper för det avgivna felet används. Felet kan omvandlas till AuthError eller kontrolleras att det är en instans av AuthError.

Här är ett exempel på hur du använder en genererad händelse och gjuter felet:

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

Hämta interaktionsstatus från händelser

Du kan hämta aktuell interaktionsstatus från händelser med hjälp av API:et getInteractionStatusFromEvent :

Här är ett exempel på hur du visar ett meddelande när det inte pågår några interaktioner:

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

Synkronisera loggat i tillstånd mellan flikar och fönster

Om du vill uppdatera användargränssnittet när en användare loggar in eller ut från din app eller ändrar det aktiva kontot på en annan flik eller ett annat fönster kan du prenumerera LOGIN_SUCCESSpå händelserna , LOGOUT_SUCCESSoch ACTIVE_ACCOUNT_CHANGED .

• För kontotillägg och borttagningar är nyttolasten det AccountInfo objekt som lades till eller togs bort.
• För aktiva kontouppdateringar kommer det inte att finnas någon nyttolast

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

Tabell över händelser

Det här är de händelser som för närvarande genereras av msal-browser.

Händelsetyp	Description	Interaktionstyp	Nyttolast	Error
LOGIN_START	LoginPopup eller loginRedirect anropas	Popup eller Redirect	PopupRequest eller RedirectRequest
LOGIN_SUCCESS	Har loggat in	Popup eller Redirect	AccountInfo
LOGIN_FAILURE	Fel vid inloggning	Popup eller Redirect		AuthError eller fel
ACQUIRE_TOKEN_START	AcquireTokenPopup eller acquireTokenRedirect eller acquireTokenSilent anropas	Popup eller Redirect eller Silent	PopupRequest eller RedirectRequest eller SilentRequest
ACQUIRE_TOKEN_SUCCESS	Token har hämtats från cacheminnet eller nätverket	Popup eller Redirect eller Silent	AuthenticationResult
ACQUIRE_TOKEN_FAILURE	Fel vid anskaffning av token	Popup eller Redirect eller Silent		AuthError eller fel
ACQUIRE_TOKEN_NETWORK_START	Börja hämta token från nätverket	Silent
SSO_SILENT_START	SsoSilent API med namnet	Silent	SsoSilentRequest
SSO_SILENT_SUCCESS	SsoSilent lyckades	Silent	AuthenticationResult
SSO_SILENT_FAILURE	SsoSilent misslyckades	Silent		AuthError eller fel
HANDLE_REDIRECT_START	HandleRedirectPromise anropas	Redirect
HANDLE_REDIRECT_END	HandleRedirectPromise har slutförts	Redirect
LOGOUT_START	Utloggning med namnet	Redirect eller Popup	EndSessionRequest eller EndSessionPopupRequest
LOGOUT_END	Utloggning har slutförts	Redirect eller Popup
LOGOUT_SUCCESS	Utloggning lyckades	Redirect eller Popup	EndSessionRequest eller EndSessionPopupRequest
LOGOUT_FAILURE	Utloggning misslyckades	Redirect eller Popup		AuthError eller fel
ACTIVE_ACCOUNT_CHANGED	Aktiva kontofilter där ändrades i en annan flik eller ett annat fönster	N/A	N/A	N/A
INITIALIZE_START	Initiera funktionen med namnet	N/A	N/A	N/A
INITIALIZE_END	Initiera funktionen har slutförts	N/A	N/A	N/A