Events

sürüm 2.4'te başlayan Msal-Browser (@azure/msal-browser) artık çekirdek kitaplığımızın ve sarmalayıcı kitaplıklarımızın kullanıcılarına sunulan olay API'leri sağlar. Bu olaylar kimlik doğrulaması ve MSAL'nin yaptıklarıyla ilgilidir ve uygulamalarda kullanıcı arabirimini güncelleştirmek, hata iletilerini göstermek vb. için kullanılabilir.

Olaylar nasıl görünür?

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

içindeki yük ve hata EventMessage aşağıdaki gibi tanımlanır:

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

export type EventError = AuthError | Error | null;

Olaylar msal-browser'da nasıl yayılır?

Msal-browser korumalı bir işleve emitEventsahiptir ve büyük API'lerde olayları yayar. Şu anda yayılan olayların listesi için aşağıdaki tabloya bakın.

Aşağıda msal-browser'ın yük içeren veya hata içeren bir olayı nasıl yaydığıyla ilgili bir örnek verilmiştir:

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

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

Olay API'sini kullanma

Msal-browser, geri çağırma işlevini alan işlevi dışarı aktarır addEventCallback ve yayılan olayları işlemek için kullanılabilir.

Burada, uygulamanızda yayılan olayları nasıl kullanabileceğinize ilişkin bir örnek verilmiştir:

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

Olay geri çağırması eklendiğinde bir kimlik döndürülecektir. Bu kimlik, msal-browser tarafından dışarı aktarılan işlevi kullanarak gerekirse geri çağırmayı removeEventCallback kaldırmak için kullanılabilir:

msalInstance.removeEventCallback(callbackId);

Hataları işleme

Tanımlanma şekli EventError nedeniyle, bir olayla birlikte yayılan hataların işlenmesi, belirtilen hatanın belirli özelliklerine erişmeden önce hatanın doğru türde olduğunu doğrulamayı gerektirebilir. Hata, öğesine AuthError yayınlanabilir veya örneği olup olmadığını denetleyebilirsiniz AuthError.

Burada, yayılan bir olayı kullanma ve hatayı atama örneği verilmiştir:

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

Olaylardan etkileşim durumunu alma

getInteractionStatusFromEvent API'sini kullanarak olaylardan geçerli etkileşim durumunu alabilirsiniz:

Devam eden hiçbir etkileşim olmadığında ileti görüntüleme örneği aşağıda verilmiştir:

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

Sekmeler ve pencereler arasında oturum durumunu senkronize etme

Kullanıcı uygulamanızda oturum açtığında veya uygulamada oturum açtığında ya da etkin hesabı farklı bir sekmede veya pencerede değiştirdiğinde kullanıcı arabiriminizi güncelleştirmek istiyorsanız , LOGOUT_SUCCESSve ACTIVE_ACCOUNT_CHANGED olaylarına LOGIN_SUCCESSabone olabilirsiniz.

• Hesap ekleme ve kaldırma işlemleri için yük, eklenen veya kaldırılan nesne olacaktır AccountInfo .
• Etkin hesap güncelleştirmeleri için yük olmayacak

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

Olaylar tablosu

Bunlar şu anda msal-browser tarafından yayılan olaylardır.

Olay Türü	Description	Etkileşim Türü	Yük	Error
LOGIN_START	LoginPopup veya loginRedirect çağrılır	Popup veya Redirect	PopupRequest veya RedirectRequest
LOGIN_SUCCESS	Başarıyla oturum açıldı	Popup veya Redirect	AccountInfo
LOGIN_FAILURE	Oturum açarken hata oluştu	Popup veya Redirect		AuthError veya Hata
ACQUIRE_TOKEN_START	AcquireTokenPopup veya acquireTokenRedirect veya acquireTokenSilent çağrılır	Popup veya Redirect veya Silent	PopupRequest veya RedirectRequest veya SilentRequest
ACQUIRE_TOKEN_SUCCESS	Önbellekten veya ağdan başarıyla belirteç alındı	Popup veya Redirect veya Silent	AuthenticationResult
ACQUIRE_TOKEN_FAILURE	Belirteç alırken hata oluştu	Popup veya Redirect veya Silent		AuthError veya Hata
ACQUIRE_TOKEN_NETWORK_START	Ağdan belirteç alma işlemini başlatma	Silent
SSO_SILENT_START	Çağrılan SsoSilent API'si	Silent	SsoSilentRequest
SSO_SILENT_SUCCESS	SsoSilent başarılı oldu	Silent	AuthenticationResult
SSO_SILENT_FAILURE	SsoSilent başarısız oldu	Silent		AuthError veya Hata
HANDLE_REDIRECT_START	HandleRedirectPromise çağrıldı	Redirect
HANDLE_REDIRECT_END	HandleRedirectPromise tamamlandı	Redirect
LOGOUT_START	Oturum kapatma çağrıldı	Redirect veya Popup	EndSessionRequest veya EndSessionPopupRequest
LOGOUT_END	Oturumu kapatma tamamlandı	Redirect veya Popup
LOGOUT_SUCCESS	Oturumu kapatma başarılı	Redirect veya Popup	EndSessionRequest veya EndSessionPopupRequest
LOGOUT_FAILURE	Oturumu kapatılamadı	Redirect veya Popup		AuthError veya Hata
ACTIVE_ACCOUNT_CHANGED	Farklı bir sekmede veya pencerede değiştirilen etkin hesap filtreleri	N/A	N/A	N/A
INITIALIZE_START	Çağrılan Initialize işlevi	N/A	N/A	N/A
INITIALIZE_END	Initialize işlevi tamamlandı	N/A	N/A	N/A