Eventos

Msal-Browser (@azure/msal-browser) a partir da versão 2.4 agora fornece APIs de evento que estão disponíveis para usuários de nossas bibliotecas principais e bibliotecas de wrapper. Esses eventos estão relacionados à autenticação e ao que a MSAL está fazendo e podem ser usados em aplicativos para atualizar a interface do usuário, mostrar mensagens de erro e assim por diante.

Como são os eventos

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

O conteúdo e o erro EventMessage são definidos da seguinte maneira:

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

export type EventError = AuthError | Error | null;

Como os eventos são emitidos no msal-browser

O msal-browser tem uma função emitEventprotegida e emite eventos em APIs principais. Para obter a lista de eventos emitidos no momento, consulte a tabela abaixo.

Aqui está um exemplo de como o msal-browser emite um evento com um conteúdo ou com um erro:

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

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

Como usar a API de eventos

O msal-browser exporta a addEventCallback função que recebe uma função de retorno de chamada e pode ser usada para processar eventos emitidos.

Aqui está um exemplo de como você pode consumir os eventos emitidos em seu aplicativo:

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

Adicionar um retorno de chamada de evento retornará uma ID. Essa ID pode ser usada para remover o retorno de chamada, se necessário, usando a removeEventCallback função exportada pelo msal-browser:

msalInstance.removeEventCallback(callbackId);

Tratamento de erros

Devido à maneira EventError definida, o tratamento de erros emitidos com um evento pode exigir a validação de que o erro é do tipo correto antes de acessar propriedades específicas no erro emitido. O erro pode ser convertido AuthError ou verificado se é uma instância de AuthError.

Aqui está um exemplo de como consumir um evento emitido e converter o erro:

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

Obtendo status de interação de eventos

Você pode obter o status de interação atual de eventos usando a API getInteractionStatusFromEvent :

Aqui está um exemplo de exibição de uma mensagem quando não há interações em andamento:

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

Sincronizando o estado conectado entre guias e janelas

Se você quiser atualizar sua interface do usuário quando um usuário fizer logon ou sair do seu aplicativo ou alterar a conta ativa em uma guia ou janela diferente, você poderá assinar o e LOGOUT_SUCCESSACTIVE_ACCOUNT_CHANGED os LOGIN_SUCCESSeventos.

• Para adições e remoções de conta, o conteúdo será o AccountInfo objeto que foi adicionado ou removido.
• Para atualizações de conta ativa, não haverá conteúdo

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 de eventos

Esses são os eventos atualmente emitidos pelo msal-browser.