Zpětná volání událostí v MSAL React

Ve většině případů @azure/msal-react abstrahuje volání přihlášení a zpracování odpovědi. Jako vývojář aplikací jste většinou ponecháni, abyste zjistili, které komponenty mají být chráněné a jakou metodu byste chtěli použít k přihlášení uživatelů, ale nemusí se zabývat specifikami odpovědi. Můžou ale existovat případy, kdy vaše aplikace potřebuje přímý přístup k odpovědi na přihlašovací volání nebo možná potřebujete zpracovat konkrétní chybu. @azure/msal-browser zveřejňuje rozhraní API událostí , které můžete pro tento účel použít. Tento článek vás provede tím, jak toho můžete využít v aplikaci React.

Registrace a zrušení registrace zpětného volání události

Pomocí rozhraní API událostí můžete zaregistrovat zpětné volání události, které provede něco při vygenerování události. Při registraci zpětného volání události v komponentě React budete muset zajistit, abyste udělali 2 věci.

1. Zpětné volání se zaregistruje pouze jednou.
2. Zpětné volání se odregistruje předtím, než se komponenta odmontuje.

Součást funkce

V komponentě funkce můžete k tomu použít useEffect háček s prázdným polem závislostí. Příklad je znázorněný v následujícím fragmentu kódu.

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);
            }
        }
        
    }, []);
}

Komponenta třídy

V komponentě typu třída toho můžete dosáhnout pomocí componentDidMount a componentWillUnmount.

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

Synchronizace přihlášeného stavu napříč kartami a okny

Pokud chcete aktualizovat uživatelské rozhraní, když se uživatel přihlásí nebo odhlásí ve vaší aplikaci v jiné kartě nebo okně, můžete se přihlásit k událostem ACCOUNT_ADDED a ACCOUNT_REMOVED. Datovou zátěž bude tvořit objekt AccountInfo, který byl přidán nebo odebrán.

Tyto události se ve výchozím nastavení nevygenerují. Abyste mohli tyto události povolit, musíte před registrací callbacků událostí zavolat rozhraní API enableAccountStorageEvents:

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);
            }
        }
        
    }, []);
}

Viz také

• Rozhraní API událostí prohlížeče MSAL