Events

Msal-Browser (@azure/msal-browser) a partir de la versión 2.4 ahora proporciona API de eventos que están disponibles para los usuarios de nuestra biblioteca principal y bibliotecas contenedoras. Estos eventos están relacionados con la autenticación y lo que MSAL está haciendo y se pueden usar en aplicaciones para actualizar la interfaz de usuario, mostrar mensajes de error, etc.

Aspecto de los eventos

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

La carga y el error de EventMessage se definen de la siguiente manera:

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

export type EventError = AuthError | Error | null;

Cómo se emiten los eventos en msal-browser

Msal-browser tiene una función emitEventprotegida y emite eventos en las API principales. Para obtener la lista de eventos emitidos actualmente, consulte la tabla siguiente.

Este es un ejemplo de cómo msal-browser emite un evento con una carga o con un error:

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

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

Uso de la API de eventos

Msal-browser exporta la addEventCallback función que toma una función de devolución de llamada y se puede usar para procesar eventos emitidos.

Este es un ejemplo de cómo podría consumir los eventos emitidos en la aplicación:

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

Al agregar una devolución de llamada de evento, se devolverá un identificador. Este identificador se puede usar para quitar la devolución de llamada si es necesario, mediante la removeEventCallback función exportada por msal-browser:

msalInstance.removeEventCallback(callbackId);

Control de errores

Debido a la forma EventError en que se define, el control de errores emitidos con un evento puede requerir la validación de que el error es del tipo correcto antes de acceder a propiedades específicas en el error emitido. El error se puede convertir AuthError o comprobar que es una instancia de AuthError.

Este es un ejemplo de consumo de un evento emitido y la conversión del error:

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

Obtención del estado de interacción de los eventos

Puede obtener el estado de interacción actual de los eventos mediante la API getInteractionStatusFromEvent :

Este es un ejemplo de visualización de un mensaje cuando no hay interacciones en curso:

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

Sincronización del estado iniciado sesión entre pestañas y ventanas

Si quiere actualizar la interfaz de usuario cuando un usuario inicia sesión o sale de la aplicación o cambia la cuenta activa en otra pestaña o ventana, puede suscribirse a los LOGIN_SUCCESSeventos , LOGOUT_SUCCESSy ACTIVE_ACCOUNT_CHANGED .

• En el caso de las adiciones y eliminaciones de cuentas, la carga será el AccountInfo objeto que se agregó o quitó.
• En el caso de las actualizaciones de cuentas activas, no habrá ninguna carga

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

Tabla de eventos

Estos son los eventos emitidos actualmente por msal-browser.