Ereignisse

Msal-Browser (@azure/msal-browser) ab Version 2.4 stellt jetzt Ereignis-APIs bereit, die Benutzern unserer Kernbibliotheks- und Wrapperbibliotheken zur Verfügung stehen. Diese Ereignisse beziehen sich auf die Authentifizierung und die Funktionsweise von MSAL und können in Anwendungen verwendet werden, um die Benutzeroberfläche zu aktualisieren, Fehlermeldungen anzuzeigen usw.

Wie Ereignisse aussehen

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

Die Nutzlast und der Fehler in EventMessage sind wie folgt definiert:

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

export type EventError = AuthError | Error | null;

Gibt an, wie Ereignisse im msal-browser ausgegeben werden

Msal-browser verfügt über eine geschützte Funktion emitEventund gibt Ereignisse in wichtigen APIs aus. Eine Liste der aktuell ausgegebenen Ereignisse finden Sie in der folgenden Tabelle.

Nachfolgend sehen Sie ein Beispiel dafür, wie msal-browser ein Ereignis mit einer Nutzlast oder mit einem Fehler ausgibt:

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

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

Verwenden der Ereignis-API

Msal-browser exportiert die Funktion, die addEventCallback in einer Rückruffunktion verwendet wird, und kann verwendet werden, um ausgegebene Ereignisse zu verarbeiten.

Nachfolgend sehen Sie ein Beispiel dafür, wie Sie die ausgegebenen Ereignisse in Ihrer Anwendung nutzen können:

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

Durch das Hinzufügen eines Ereignisrückrufs wird eine ID zurückgegeben. Diese ID kann verwendet werden, um den Rückruf bei Bedarf mithilfe der removeEventCallback von msal-browser exportierten Funktion zu entfernen:

msalInstance.removeEventCallback(callbackId);

Behandlung von Fehlern

Aufgrund der definitionsweise definierten Methode EventError müssen Fehler, die mit einem Ereignis ausgegeben werden, überprüft werden, dass der Fehler vom richtigen Typ ist, bevor auf bestimmte Eigenschaften für den ausgegebenen Fehler zugegriffen wird. Der Fehler kann in AuthError eine Instanz von AuthError.

Nachfolgend sehen Sie ein Beispiel für die Verwendung eines ausgegebenen Ereignisses und das Umwandeln des Fehlers:

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

Abrufen des Interaktionsstatus von Ereignissen

Sie können den aktuellen Interaktionsstatus aus Ereignissen abrufen, indem Sie die getInteractionStatusFromEvent-API verwenden:

Nachfolgend sehen Sie ein Beispiel für die Anzeige einer Meldung, wenn keine Interaktionen ausgeführt werden:

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

Synchronisieren des angemeldeten Zustands über Registerkarten und Fenster hinweg

Wenn Sie Ihre Benutzeroberfläche aktualisieren möchten, wenn sich ein Benutzer bei Ihrer App anmeldet oder die App abmeldet oder das aktive Konto auf einer anderen Registerkarte oder einem anderen Fenster ändert, können Sie die LOGIN_SUCCESSEreignisse und LOGOUT_SUCCESSACTIVE_ACCOUNT_CHANGED Ereignisse abonnieren.

• Bei Kontozufügungen und Entfernungen ist die Nutzlast das AccountInfo Objekt, das hinzugefügt oder entfernt wurde.
• Für aktive Kontoaktualisierungen gibt es keine Nutzlast.

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

Ereignisverzeichnis

Dies sind die Ereignisse, die derzeit von msal-browser ausgegeben werden.