Rappels d’événements dans MSAL React

Dans l’ensemble, @azure/msal-react masque les appels de connexion et le traitement de la réponse. En tant que développeur d’applications, vous êtes principalement laissé pour déterminer quels composants doivent être protégés et quelle méthode vous souhaitez utiliser pour connecter vos utilisateurs, mais peut être moins préoccupé par les spécificités de la réponse. Toutefois, il peut arriver que votre application ait besoin d’un accès direct à la réponse d’un appel de connexion ou que vous devez gérer une erreur spécifique. @azure/msal-browser expose une API d’événement que vous pouvez utiliser à cet effet. Cet article vous guide tout au long de la façon dont vous pouvez tirer parti de cela dans une application React.

Enregistrement et désenregistrement d’une fonction de rappel d’événement

À l’aide de l’API d’événement, vous pouvez inscrire un rappel d’événement qui fera quelque chose lorsqu’un événement est émis. Lors de l’inscription d’un rappel d’événement dans un composant React, vous devez vous assurer que vous effectuez 2 choses.

  1. Le rappel est inscrit une seule fois.
  2. La fonction de rappel est désenregistrée avant le démontage du composant.

Composant de fonction

Dans un composant de fonction, vous pouvez utiliser un useEffect hook avec un tableau de dépendances vide pour y parvenir. Un exemple est illustré dans l’extrait de code suivant.

import { useEffect } from "react";
import { useMsal } from "@azure/msal-react";
import { EventType } from "@azure/msal-browser";

function EventExample() {
    const { instance } = useMsal();

    useEffect(() => {
        // This will be run on component mount
        const callbackId = instance.addEventCallback((message) => {
            // This will be run every time an event is emitted after registering this callback
            if (message.eventType === EventType.LOGIN_SUCCESS) {
                const result = message.payload;    
                // Do something with the result
            }
        });

        return () => {
            // This will be run on component unmount
            if (callbackId) {
                instance.removeEventCallback(callbackId);
            }
        }
        
    }, []);
}

Composant de classe

Dans un composant de classe, vous pouvez utiliser componentDidMount et componentWillUnmount pour y parvenir.

class EventExample extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            callbackId: null;
        }
    }

    componentDidMount() {
        // This will be run on component mount
        const callbackId = this.props.msalContext.instance.addEventCallback((message) => {
            // This will be run every time an event is emitted after registering this callback
            if (message.eventType === EventType.LOGIN_SUCCESS) {
                const result = message.payload;    
                // Do something with the result
            }
        });

        this.setState({callbackId: callbackId});
    }

    componentWillUnmount() {
        // This will be run on component unmount
        if (this.state.callbackId) {
            this.props.msalContext.instance.removeEventCallback(this.state.callbackId);
        }
    }
}

Synchronisation de l’état connecté entre les onglets et les fenêtres

Si vous souhaitez mettre à jour votre interface utilisateur lorsqu’un utilisateur se connecte à votre application ou s’en déconnecte dans un autre onglet ou une autre fenêtre, vous pouvez vous abonner aux événements ACCOUNT_ADDED et ACCOUNT_REMOVED. La charge utile est l’objet AccountInfo qui a été ajouté ou supprimé.

Ces événements ne seront pas émis par défaut. Pour activer ces événements, vous devez appeler l’API enableAccountStorageEvents avant d’inscrire vos rappels d’événements :

import { useEffect } from "react";
import { useMsal } from "@azure/msal-react";
import { EventType } from "@azure/msal-browser";

function EventExample() {
    const { instance } = useMsal();

    useEffect(() => {
        // This will be run on component mount
        instance.enableAccountStorageEvents();
        const callbackId = instance.addEventCallback((message) => {
            // This will be run every time an event is emitted after registering this callback
            if (message.eventType === EventType.ACCOUNT_ADDED) {
                const account = message.payload;    
                // Update UI
            } else if (message.eventType === EventType.ACCOUNT_REMOVED) {
                const account = message.payload;
                // Update UI
            }
        });

        return () => {
            // This will be run on component unmount
            instance.disableAccountStorageEvents();
            if (callbackId) {
                instance.removeEventCallback(callbackId);
            }
        }
        
    }, []);
}

Voir aussi

  • Last updated on