Események

Msal-Browser (@azure/msal-browser) a 2.4-es verziótól kezdődően mostantól olyan esemény API-kat biztosít, amelyek az alapvető kódtárak és burkolótárak felhasználói számára érhetők el. Ezek az események a hitelesítéssel és az MSAL-sel kapcsolatosak, és az alkalmazásokban a felhasználói felület frissítésére, a hibaüzenetek megjelenítésére stb. használhatók.

Hogyan néznek ki az események?

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

A hasznos adat és a EventMessage hiba a következőképpen van definiálva:

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

export type EventError = AuthError | Error | null;

Események kibocsátása a msal-browserben

Az Msal-browser védett függvényt emitEventhasznál, és eseményeket bocsát ki a főbb API-kban. Az aktuálisan kibocsátott események listájáért tekintse meg az alábbi táblázatot.

Íme egy példa arra, hogy a msal-browser hogyan bocsát ki egy eseményt hasznos adattal vagy hibával:

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

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

Az esemény API használata

Az Msal-browser exportálja azt a addEventCallback függvényt, amely egy visszahívási függvényt használ, és a kibocsátott események feldolgozására használható.

Íme egy példa arra, hogyan használhatja fel a kibocsátott eseményeket az alkalmazásban:

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

Az eseményvisszahívás hozzáadása egy azonosítót ad vissza. Ez az azonosító használható a visszahívás eltávolítására, ha szükséges, az removeEventCallback msal-browser által exportált függvény használatával:

msalInstance.removeEventCallback(callbackId);

Hibák kezelése

A definiálás módja EventError miatt az esemény által kibocsátott hibák kezelése szükségessé teheti annak ellenőrzését, hogy a hiba a megfelelő típusú-e, mielőtt hozzáfér a kibocsátott hiba adott tulajdonságaihoz. A hiba leadható vagy AuthError ellenőrizhető, hogy a hiba a példánya.AuthError

Íme egy példa egy kibocsátott esemény használatára és a hiba kiírására:

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

Interakció állapotának lekérése eseményekből

A getInteractionStatusFromEvent API használatával lekérheti az események aktuális interakciós állapotát:

Íme egy példa egy üzenet megjelenítésére, ha nincsenek folyamatban lévő interakciók:

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

Naplózott állapot szinkronizálása lapok és ablakok között

Ha frissíteni szeretné a felhasználói felületet, amikor egy felhasználó bejelentkezik vagy kilép az alkalmazásból, vagy egy másik lapon vagy ablakban módosítja az aktív fiókot, feliratkozhat a , LOGOUT_SUCCESSés ACTIVE_ACCOUNT_CHANGED eseményekreLOGIN_SUCCESS.

• Fiókbetöltések és -eltávolítások esetén a hasznos adatok lesznek hozzáadva AccountInfo vagy eltávolítva.
• Az aktív fiókfrissítésekhez nem lesz hasznos adat

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

Események táblázata

Ezek az msal-browser által jelenleg kibocsátott események.

Esemény típusa	Description	Interakció típusa	Adatcsomag	Hiba
LOGIN_START	A LoginPopup vagy a loginRedirect neve	Popup vagy Redirect	PopupRequest vagy RedirectRequest
LOGIN_SUCCESS	Sikeres bejelentkezés	Popup vagy Redirect	AccountInfo
LOGIN_FAILURE	Hiba a bejelentkezéskor	Popup vagy Redirect		AuthError vagy Error
ACQUIRE_TOKEN_START	A AcquireTokenPopup vagy a acquireTokenRedirect vagy a acquireTokenSilent neve	Popup, Redirect vagy Silent	PopupRequest vagy RedirectRequest vagy SilentRequest
ACQUIRE_TOKEN_SUCCESS	A gyorsítótárból vagy a hálózatból sikeresen beszerzett jogkivonat	Popup, Redirect vagy Silent	AuthenticationResult
ACQUIRE_TOKEN_FAILURE	Hiba a jogkivonat beszerzésekor	Popup, Redirect vagy Silent		AuthError vagy Error
ACQUIRE_TOKEN_NETWORK_START	Jogkivonat beszerzése a hálózatról	Silent
SSO_SILENT_START	SsoSilent API neve	Silent	SsoSilentRequest
SSO_SILENT_SUCCESS	A SsoSilent sikeres volt	Silent	AuthenticationResult
SSO_SILENT_FAILURE	Az SsoSilent nem sikerült	Silent		AuthError vagy Error
HANDLE_REDIRECT_START	HandleRedirectPromise nevű	Redirect
HANDLE_REDIRECT_END	A HandleRedirectPromise befejeződött	Redirect
LOGOUT_START	Kijelentkezés neve	Redirect vagy Popup	EndSessionRequest vagy EndSessionPopupRequest
LOGOUT_END	A kijelentkezés befejeződött	Redirect vagy Popup
LOGOUT_SUCCESS	Sikeres kijelentkezés	Redirect vagy Popup	EndSessionRequest vagy EndSessionPopupRequest
LOGOUT_FAILURE	Sikertelen kijelentkezés	Redirect vagy Popup		AuthError vagy Error
ACTIVE_ACCOUNT_CHANGED	Aktív fiókszűrők, ahol egy másik lapon vagy ablakban módosult	N/A	N/A	N/A
INITIALIZE_START	Függvény inicializálása	N/A	N/A	N/A
INITIALIZE_END	A függvény inicializálása befejeződött	N/A	N/A	N/A