Angular 12-Azure AD令牌-分配自定义角色

Question

我们使用Angular 12作为前端应用程序&Web API(Asp.net Core 3.1(。我们已经在Azure AD&我们能够成功地从Azure AD提取令牌。

需要以下方面的帮助：-

1. 需要从令牌中获取电子邮件地址
2. 需要获取映射到电子邮件地址的角色。角色存储在SQL Server中
3. 如果未分配任何角色，则需要将用户重定向到"未授权"页面
4. 如果角色可用，则需要在令牌中映射，以便可以在Web API控制器/操作中验证用户

有人能指导我实施它的步骤吗；它还会在前端实现还是在Web API级别实现？

提前感谢

Answer 1

您已经差不多完成了，为了实现上述要求，我们可以使用下面的示例代码通过HTTP请求检索用户的配置文件。

代码：-

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
const GRAPH_ENDPOINT = 'Enter_the_Graph_Endpoint_Here/v1.0/me';
type ProfileType = {
givenName?: string,
surname?: string,
userPrincipalName?: string,
id?: string
};
@Component({
selector: 'app-profile',
templateUrl: './profile.component.html',
styleUrls: ['./profile.component.css']
})
export class ProfileComponent implements OnInit {
profile!: ProfileType;
constructor(
private http: HttpClient
) { }
ngOnInit() {
this.getProfile();
}
getProfile() {
this.http.get(GRAPH_ENDPOINT)
.subscribe(profile => {
this.profile = profile;
});
}
}

有关完整设置，请参阅MICROSOFT文档|在Angular中获取令牌