Acara

Msal-Browser (@azure/msal-browser) mulai versi 2.4 sekarang menyediakan API peristiwa yang tersedia untuk pengguna pustaka inti dan pustaka pembungkus kami. Peristiwa ini terkait dengan autentikasi dan apa yang dilakukan MSAL, dan dapat digunakan dalam aplikasi untuk memperbarui UI, menampilkan pesan kesalahan, dan sebagainya.

Seperti apa kejadiannya

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

Payload dan kesalahan di EventMessage didefinisikan sebagai berikut:

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

export type EventError = AuthError | Error | null;

Bagaimana peristiwa dipancarkan di msal-browser

Msal-browser memiliki fungsi emitEventyang dilindungi , dan memancarkan peristiwa di API utama. Untuk daftar peristiwa yang saat ini dipancarkan, lihat tabel di bawah ini.

Berikut adalah contoh bagaimana msal-browser memancarkan peristiwa dengan payload, atau dengan kesalahan:

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

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

Cara menggunakan API peristiwa

Msal-browser mengekspor addEventCallback fungsi yang mengambil fungsi panggilan balik dan dapat digunakan untuk memproses peristiwa yang dipancarkan.

Berikut adalah contoh bagaimana Anda dapat menggunakan peristiwa yang dipancarkan di aplikasi Anda:

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

Menambahkan panggilan balik peristiwa akan mengembalikan id. Id ini dapat digunakan untuk menghapus panggilan balik jika perlu, menggunakan fungsi yang removeEventCallback diekspor oleh msal-browser:

msalInstance.removeEventCallback(callbackId);

Menangani kesalahan

Karena cara EventError didefinisikan, menangani kesalahan yang dipancarkan dengan peristiwa mungkin memerlukan validasi bahwa kesalahan adalah jenis yang benar sebelum mengakses properti tertentu pada kesalahan yang dipancarkan. Kesalahan dapat dilemparkan ke AuthError atau diperiksa bahwa itu adalah instans dari AuthError.

Berikut adalah contoh mengkonsumsi peristiwa yang dipancarkan dan mentransmisikan kesalahan:

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

Mendapatkan status interaksi dari peristiwa

Anda bisa mendapatkan status interaksi saat ini dari peristiwa dengan menggunakan GETInteractionStatusFromEvent API:

Berikut adalah contoh menampilkan pesan ketika tidak ada interaksi yang sedang berlangsung:

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

Menyinkronkan log masuk status di seluruh tab dan jendela

Jika Anda ingin memperbarui UI saat pengguna masuk atau keluar dari aplikasi Anda atau mengubah akun aktif di tab atau jendela lain, Anda dapat berlangganan LOGIN_SUCCESSperistiwa , , LOGOUT_SUCCESSdan ACTIVE_ACCOUNT_CHANGED .

• Untuk penambahan dan penghapusan akun, payload akan menjadi AccountInfo objek yang ditambahkan atau dihapus.
• Untuk pembaruan akun aktif, tidak akan ada payload

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

Tabel peristiwa

Ini adalah peristiwa yang saat ini dipancarkan oleh msal-browser.