我有一个 Angular Web 应用程序,它使用 @microsoft/microsoft-graph-client 来获取登录用户的信息。@azure/msal-angular 用于登录用户。我有一个身份验证服务,可以通过以下方式登录用户:
async signIn(): Promise<void> {
const result = await this.msalService.loginPopup(OAuthSettings.consentScopes)
.catch((reason) => {
this.alertsService.add('Login failed', JSON.stringify(reason, null, 2));
});
if (result) {
this.authenticated = true;
await this.getUser();
}
}
private async getClient(): Promise<Client> {
const graphClient = Client.init({
// Initialize the Graph client with an auth
// provider that requests the token from the
// auth service
authProvider: async (done) => {
const token = await this.getAccessToken()
.catch((reason) => {
done(reason, null);
});
if (token) {
done(null, token);
} else {
done('Could not get an access token', null);
}
}
});
return graphClient;
}
private async getUser() {
if (!this.authenticated) {
return null;
}
const graphClient = await this.getClient();
// Get the user from Graph (GET /me)
const graphUser = await graphClient.api('/me').get();
console.log('USERNAME: ', graphUser.displayName);
sessionStorage.setItem('d365dataportal.user', graphUser);
if (graphUser.mail != null) {
sessionStorage.setItem('d365dataportal.user.email', graphUser.mail);
} else {
sessionStorage.setItem('d365dataportal.user.email', graphUser.userPrincipalName);
}
sessionStorage.setItem('d365dataportal.user.avatar', graphUser.avatar);
sessionStorage.setItem('d365dataportal.user.name', graphUser.displayName);
}
我的 OAuthSettings 如下所示:
export const OAuthSettings = {
appId: 'App GUID from Azure Here',
redirectUri: 'http://localhost:4200',
consentScopes: ['user.read',
'Directory.Read.All',
'Directory.ReadWrite.All',
'Directory.AccessAsUser.All']
};
我遇到的问题是,当 this.msalService.loginPopup() 被调用时,整个应用程序挂起,弹出窗口永远不会关闭,并且似乎永远不会进行身份验证并重定向回我的页面。我不确定为什么会这样。谁能看到任何明显的错误?
编辑
我离开上面的内容是因为这是我最初的问题。我意识到这个问题与我原来的标题无关,并更改了问题的名称。
我解决了我的问题,它与使用 Azure AD 或 Graph API 无关。在我的组件 html 中,我有一个 *ngIf 正在寻找函数的结果。它看起来像这样:
<a mat-list-item *ngIf="authService.functionThatReturnsBoolean()" [routerLink]="['/SomeRoute']" routerLinkActive="router-link-active">Link Name</a>
相反,我更改了我的服务以在服务中的属性中填充结果,并将 *ngIf 指向该属性,如下所示:
<a mat-list-item *ngIf="authService.booleanProperty" [routerLink]="['/SomeRoute']" routerLinkActive="router-link-active">Link Name</a>
问题与 Angular 继续在 *ngIf 中查找状态的方式有关。然后它陷入了一个无限循环,直到 Chrome 崩溃。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句