Azure AD用户角色添加需求：Angular4+.NET Core2.0 Azure应用

看起来你已经搞定了应用认证的基础部分，还在Azure AD应用清单里定义了Reviewer角色，接下来咱们一步步完成角色分配和应用内的权限验证：

第一步：在Azure门户给用户分配角色 #

首先得把你定义好的Reviewer角色分配给具体用户：

• 登录Azure门户，找到你的Azure AD租户，进入企业应用程序，找到你的目标应用
• 切换到用户和组选项卡，点击「添加用户/组」
• 选中要分配角色的用户，然后在「选择角色」下拉框里选你之前定义的Reviewer，最后确认分配就行

第二步：后端.NET Core 2.0配置角色验证 #

因为你用的是ADAL，后端需要正确解析Bearer令牌里的角色声明，然后配置授权规则：

1. 调整Startup.cs里的认证配置 #

在ConfigureServices方法里，确保JWT验证时把Azure AD的roles声明映射到.NET的角色系统：

public void ConfigureServices(IServiceCollection services)
{
    services.AddAuthentication(options =>
    {
        options.DefaultAuthenticateScheme = JwtBearerDefaults.AuthenticationScheme;
        options.DefaultChallengeScheme = JwtBearerDefaults.AuthenticationScheme;
    })
    .AddJwtBearer(options =>
    {
        options.Authority = "https://login.microsoftonline.com/你的租户ID";
        options.Audience = "你的应用客户端ID";
        options.TokenValidationParameters = new TokenValidationParameters
        {
            // 把Azure AD的roles声明映射为.NET的角色声明
            RoleClaimType = "roles"
        };
    });

    // 创建一个需要Reviewer角色的授权策略
    services.AddAuthorization(options =>
    {
        options.AddPolicy("RequireReviewer", policy =>
            policy.RequireRole("Reviewer"));
    });

    services.AddMvc();
}

2. 在API里应用权限控制 #

你有两种方式来验证角色：

• 方式一：用授权策略保护整个控制器/Action

// 只有拥有Reviewer角色的用户才能访问这个控制器
[Authorize(Policy = "RequireReviewer")]
[Route("api/reviews")]
public class ReviewsController : Controller
{
    // 你的API逻辑
}

• 方式二：在Action里手动检查角色

[Authorize]
public IActionResult ApproveReview(int reviewId)
{
    if (User.IsInRole("Reviewer"))
    {
        // 执行审批逻辑
        return Ok();
    }
    else
    {
        return Forbid(); // 返回403禁止访问
    }
}

第三步：前端Angular 4获取并使用角色信息 #

ADAL for Angular会自动获取包含角色的令牌，你可以从用户信息里解析出角色，用来控制前端UI的显示：

1. 在组件里获取用户角色 #

import { AdalService } from 'adal-angular';

@Component({
  selector: 'app-review-panel',
  templateUrl: './review-panel.component.html'
})
export class ReviewPanelComponent implements OnInit {
  userRoles: string[] = [];

  constructor(private adalService: AdalService) { }

  ngOnInit() {
    const userInfo = this.adalService.userInfo;
    if (userInfo?.profile) {
      // Azure AD的角色会存在profile的roles字段里
      this.userRoles = userInfo.profile.roles || [];
    }
  }

  // 判断当前用户是否是Reviewer
  isReviewer(): boolean {
    return this.userRoles.includes('Reviewer');
  }
}

2. 在模板里根据角色控制内容显示 #

<!-- 只有Reviewer角色能看到这个审批面板 -->
<div *ngIf="isReviewer()" class="review-panel">
  <h2>审批中心</h2>
  <!-- 审批相关的UI元素 -->
</div>

几个重要提醒 #

• 分配角色后，用户需要重新登录才能获取包含角色的新令牌，旧令牌里不会有角色信息
• 后端一定要验证令牌的合法性：确保aud（受众）是你的应用ID，iss（颁发者）是你的Azure AD租户地址，防止伪造令牌
• 角色名称要完全匹配：清单里的displayName和你代码里检查的名称必须一模一样，大小写也要注意

内容的提问来源于stack exchange，提问作者Saso