登录后如何获取用户名？我正在尝试使用 MSAL (@azure/msal-angular) 进行 Azure 登录

Question

I am trying with MSAL (@azure/msal-angular) for Azure Signin and new to angular.I need to get username after logged in and display it in UI.Thanks in advance

Answer 1

You could use myMSALObj.getAccount().userName to get userName.

function showWelcomeMessage() {
    var divWelcome = document.getElementById('WelcomeMessage');
    divWelcome.innerHTML = 'Welcome ' + myMSALObj.getAccount().userName + " to Microsoft Graph API";
    var loginbutton = document.getElementById('SignIn');
    loginbutton.innerHTML = 'Sign Out';
    loginbutton.setAttribute('onclick', 'signOut();');
}

For more details, see here .

Answer 2

You can retrieve the user from MsalService , for example with:

const accountInfo: AccountInfo | null = this.msalService.instance.getActiveAccount();

It's recommended to wait until the authentication process is complete before you invoke this. This can be done by checking MsalBroadcastService :

const account: Observable<AccountInfo | null> = this.msalBroadcastService
    .inProgress$
    .pipe(
        filter(status => status == InteractionStatus.None),
        map(() => {
            const instance: IPublicClientApplication = this.msalService.instance;
            const activeAccount: AccountInfo | null = instance.getActiveAccount();
            const accounts: AccountInfo[] = instance.getAllAccounts();
            if (activeAccount != null) return activeAccount;
            if (accounts.length > 0) {
                const [firstAccount] = accounts;
                instance.setActiveAccount(firstAccount);
                return firstAccount;
            }
            return null;
        })
    );
  
    });