React集成Azure AD B2C后，如何通过令牌声明传递自定义角色权限？

1. 在Azure AD B2C中配置自定义用户属性 #

• 登录Azure Portal，定位到你的AD B2C租户
• 进入用户属性页面，点击添加按钮
• 输入属性名称（例如userRole），选择数据类型（推荐字符串，可预设admin/editor/viewer等可选值），若不需要用户注册时自行设置，可不勾选「在用户注册时显示？」
• 保存该属性

2. 将自定义属性加入令牌声明 #

方式一：内置用户流（快速实现） #

• 进入用户流页面，选择当前使用的注册/登录流（如SignUpSignIn）
• 点击应用程序声明，找到刚创建的自定义属性（如userRole），勾选后保存
• 进入用户属性页面，确认该属性已被纳入（无需用户输入则不勾选显示）
• 重新测试用户流，登录后令牌将包含该声明

方式二：自定义策略（复杂场景适配） #

• 打开自定义策略XML文件（如TrustFrameworkExtensions.xml）
• 在<ClaimsSchema>节点下添加声明定义：

<ClaimType Id="userRole">
  <DisplayName>User Role</DisplayName>
  <DataType>string</DataType>
</ClaimType>

• 在对应注册/登录的技术配置文件的<OutputClaims>节点中添加：

<OutputClaim ClaimTypeReferenceId="userRole" />

• 保存并上传更新后的策略到Azure AD B2C

3. 管理员手动为用户分配角色 #

• 进入Azure AD B2C的用户页面，找到目标用户
• 点击编辑属性，找到userRole属性并设置对应值（如admin）
• 保存更改

4. 在React应用中获取并使用角色声明 #

• 登录成功后，从Azure AD B2C返回的令牌中提取角色声明（注意声明名称可能带前缀，如extension_userRole，需与Azure配置一致）
• 示例代码（基于@azure/msal-react）：

import { useMsal } from "@azure/msal-react";

const UserRoleContent = () => {
  const { instance } = useMsal();
  const activeAccount = instance.getActiveAccount();

  if (activeAccount) {
    const idTokenClaims = activeAccount.idTokenClaims;
    const userRole = idTokenClaims["extension_userRole"];

    switch(userRole) {
      case "admin":
        return <div>管理员专属操作面板</div>;
      case "editor":
        return <div>内容编辑界面</div>;
      default:
        return <div>普通用户首页</div>;
    }
  }

  return <div>请先登录</div>;
};

export default UserRoleContent;

• 若使用访问令牌，需确保应用在API权限中配置了读取该自定义属性的权限，或在用户流/策略中将属性加入访问令牌声明

5. 权限验证最佳实践 #

• 前端角色判断仅用于界面展示，关键业务操作必须在后端API中重新验证令牌内的角色声明
• 建议将角色与权限集合绑定，避免硬编码角色值
• 定期清理无效的用户角色配置

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