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

Question

我正在尝试使用 MSAL (@azure/msal-angular) 进行 Azure 登录，并且是 Angular 的新手。我需要在登录后获取用户名并将其显示在 UI 中。提前致谢

Answer 1

您可以用来myMSALObj.getAccount().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();');
}

有关更多详细信息，请参阅此处。

Answer 2

您可以从 检索用户MsalService，例如：

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

建议等到身份验证过程完成后再调用此方法。这可以通过检查来完成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;
        })
    );
  
    });