Eventos

Msal-Browser (@azure/msal-browser) a partir da versão 2.4 fornece agora APIs de eventos disponíveis para os utilizadores da nossa biblioteca principal e bibliotecas de wrappers. Estes eventos estão relacionados com a autenticação e o que a MSAL está a fazer, podendo ser usados em aplicações para atualizar a interface, mostrar mensagens de erro, entre outros.

Como são os eventos

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

A carga útil e o erro em EventMessage são definidos da seguinte forma:

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 navegador msal tem uma função emitEventprotegida e emite eventos nas principais APIs. Para a lista de eventos atualmente emitidos, consulte a tabela abaixo.

Aqui está um exemplo de como o msal-browser emite um evento com uma carga útil, 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 callback e pode ser usada para processar eventos emitidos.

Aqui está um exemplo de como pode consumir os eventos emitidos na sua aplicação:

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 callback de evento devolve um id. Este id pode ser usado para remover o callback, se necessário, usando a removeEventCallback função exportada pelo msal-browser:

msalInstance.removeEventCallback(callbackId);

Tratamento de erros

Devido à forma como EventError está definida, o tratamento dos erros emitidos com um evento pode exigir validação de que o erro é do tipo correto antes de aceder a propriedades específicas do erro emitido. O erro pode ser lançado para AuthError ou verificado se é uma instância de AuthError.

Aqui está um exemplo de consumir um evento emitido e lançar 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
        }
     }
});

Obter o estado de interação dos eventos

Pode obter o estado atual da interação dos eventos usando a API getInteractionStatusFromEvent :

Aqui está um exemplo de mostrar 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);
    }
});

Sincronização do estado de login entre separadores e janelas

Se quiser atualizar a sua interface de utilizador quando um utilizador faz login ou sai da sua aplicação ou muda a conta ativa numa aba ou janela diferente, pode subscrever os LOGIN_SUCCESSeventos , LOGOUT_SUCCESS, e ACTIVE_ACCOUNT_CHANGED .

• Para adições e remoções de contas, o payload será o AccountInfo objeto que foi adicionado ou removido.
• Para atualizações de contas ativas, não haverá carga útil

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

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