您如何使用 MSAL-ANGULAR 读取角色/权限

Question

所以我已经按照 msal-angular 中的说明成功地在我的 angular 站点中集成了 Azure AD 身份验证，现在我正在寻找定义和利用角色和权限来提供对用户内容的更精细控制的点能和不能做。

根据我已经能够确定的内容，我可以按照这组说明（ https://docs.microsoft.com/en-us/azure/architecture/multitenant-identity/app-roles ）来定义角色，但是 msal-angular登录时似乎没有公开这一点 - 或者至少我还没有找到有关如何执行此操作的说明。

也许我错过了一些东西。 任何建议，将不胜感激

Answer 1

要获取用户所属的组，您需要将directory.read.all添加到 Angular 应用程序的范围以及 Azure 应用程序设置的 API 权限中。

let graphUser = await graphClient.api('/me').get();
let graphUserGroups = await graphClient.api(`/users/${graphUser.id}/memberOf`).get();

let user = new User();
user.id = graphUser.id;
user.displayName = graphUser.displayName;
// Prefer the mail property, but fall back to userPrincipalName
user.email = graphUser.mail || graphUser.userPrincipalName;

graphUserGroups.value.forEach(group => {
    user.groups.push({
        group_id: group.id,
        group_name: group.displayName
    });
});

Answer 2

（感谢stillatmylinux）

仅供参考：这是我的工作 angular 7 解决方案（为了可读性而简化）：

import { MsalService, BroadcastService } from '@azure/msal-angular';
import { Client } from '@microsoft/microsoft-graph-client';

private subscription: Subscription;
private graphClient: Client;
private memberRoles: any[];

constructor(
  readonly auth: MsalService,
  readonly broadcast: BroadcastService
) {
  // Initialize Microsoft Graph client
  this.graphClient = Client.init({
    authProvider: async (done) => {
      let token = await this.auth.acquireTokenSilent(["User.Read", "Directory.Read.All"])
        .catch((reason) => {
          done(reason, null);
        });

      if (token) {
        done(null, token);
      } else {
        done("Could not get an access token", null);
      }
    }
  });

  this.subscription = broadcast.subscribe("msal:loginSuccess",
    () => {
      //Get associated member roles
      this.graphClient.api('/me/memberOf').get()
        .then((response) => {
          this.memberRoles = response.value;
        }, (error) => {
          console.log('getMemberRoles() - error');
      });
  });
}

Answer 3

您可以更改清单以在令牌本身中传递这些信息。

示例（尽管它适用于 .NET），详细解释了这一点

Answer 4

您只需要 User.Read 权限并使用 memberof v1。 使用 import * as MicrosoftGraph from '@microsoft/microsoft-graph-client'; 修复 microsoft-graph-client 标头导出​​错误。 uniqueId 是您的 AzureAD 用户 ID。

private loginSuccess(uniqueId: string) {
     console.log('LOGIN SUCCESS ', uniqueId);
     (this.graphClient = MicrosoftGraph.Client.init({
      authProvider: async (done) => {
        let param: AuthenticationParameters = { authority:"https://login.microsoftonline.com/{TenantId}",
                                              scopes:["User.Read"]
                      };
        let response = await this.authService.acquireTokenSilent(param)
        .catch((reason) => {
          done(reason, null);
          });

        if (response) {
          done(null, response.accessToken);
        } else {
          done("Could not get an access token", null);
        }
      }
    })).api(`/users/${uniqueId}/memberOf`).get()
    .then((response)=>{
        this.groups = response.value;
        console.log("members ok", this.groups);
    },
    (error)=>{
      console.error('memberOf error');
    });

}

Answer 5

使用 MSAL-ANGULAR（当前稳定版本"@azure/msal-angular": "^1.1.2 ）您可以从身份验证响应（密钥msal.idtoken ）访问roles 。

对于现代浏览器，这可以在本地存储中找到，对于 IE，这将存储在 cookie 中。 由于msal.idtoken是 Jwt，因此解码它应该提供用户的角色。

const token = localStorage.getItem('msal.idtoken');
const payload = jwt_decode(token); // jwt_decode npm package will help you to decode the payload.
console.log(payload);

或者，您甚至可以使用https://jwt.io/手动解码数据。

Answer 6

您可以使用 MsalService 读取在 Azure 应用注册中定义并在企业应用程序中分配的用户角色：

let allAccounts = this.msalService.instance.getAllAccounts();
if (allAccounts.length > 0) {
  let account = allAccounts[0];
  let roles = account.idTokenClaims.roles;
}

MSAL 角版本：

"@azure/msal-angular": "^2.0.5",
"@azure/msal-browser": "^2.19.0",