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

Question

我们使用 Angular 12 作为前端应用程序 & Web API (Asp.net Core 3.1)。 我们已经在 Azure AD 中注册了这两个应用程序，我们能够成功地从 Azure AD 获取令牌。

在以下方面需要帮助：-

1. 需要从令牌中获取 email 地址
2. 需要获取映射到 email 地址的角色。 角色存放在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 DOCUMENTATION| 在 Angular 中获取令牌