React中如何通过MSAL2 Provider获取用户应用角色？

可以通过MSAL2 Provider获取用户的应用角色，前提是你的应用已在Azure AD中完成角色配置，且登录请求包含正确的权限范围，下面是具体实现步骤：

• 配置登录请求以获取角色声明
  默认情况下MSAL2不会自动请求包含角色的令牌，你需要在Provider初始化时添加对应权限范围。修改你的Provider定义如下：

  Providers.globalProvider = new Msal2Provider({
    clientId: CLIENT_ID,
    redirectUri: REDIRECT_URI,
    scopes: ['openid', 'profile', 'email', 'api://<你的应用ID>/access_as_user'] // 替换为实际应用权限范围
  });
  

  其中api://<你的应用ID>/access_as_user是你在Azure AD中为应用暴露的API权限，需确保已为目标用户/组分配了对应的应用角色。

• 获取并使用用户角色
  登录成功后，通过Providers.globalProvider.state.account获取用户账户信息，角色会以数组形式存在于idTokenClaims或accessTokenClaims中。示例代码：

  import { Providers } from '@microsoft/mgt';
  
  // 监听登录状态变更
  Providers.globalProvider.onStateChanged(async () => {
    if (Providers.globalProvider.state.isLoggedIn) {
      const account = Providers.globalProvider.state.account;
      // 从idToken中提取角色
      const userRoles = account.idTokenClaims?.roles || [];
      // 若角色在accessToken中，也可从这里提取：account.accessTokenClaims?.roles || []
      
      // 根据角色展示对应内容
      if (userRoles.includes('Admin')) {
        // 渲染管理员专属内容
      } else if (userRoles.includes('RegularUser')) {
        // 渲染普通用户内容
      }
    }
  });
  

• React组件内的便捷实现
  如果你使用@microsoft/mgt-react，可以通过useMgt hook快速获取用户状态和角色：

  import { useMgt } from '@microsoft/mgt-react';
  
  function ContentComponent() {
    const { state } = useMgt();
    const userRoles = state.account?.idTokenClaims?.roles || [];
  
    return (
      <div>
        {userRoles.includes('Admin') && <AdminPanel />}
        {userRoles.includes('RegularUser') && <UserPanel />}
      </div>
    );
  }
  

• 注意事项

  • 必须先在Azure AD应用注册中定义应用角色，并将角色分配给对应的用户或安全组。
  • 如果令牌中没有返回角色，检查Azure AD的角色配置是否正确，以及登录请求的scopes是否包含应用的API权限。

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