Question

因此，我已经按照msal-angular中的说明成功地将Azure AD身份验证集成到了我的角度站点中，现在我正要定义和利用角色和权限来提供更精细的控制用户可以做什么和不能做什么。

根据我的判断，我可以按照以下说明（https://docs.microsoft.com/en-us/azure/architecture/multitenant-identity/app-roles）来定义角色，但msal-angular在登录时似乎没有公开它-或至少我没有'尚未找到有关如何执行此操作的说明。

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

Answer 1

（感谢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 2

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

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 3

您可以更改清单以将其传递到令牌本身中。

sample（虽然适用于.NET）对此进行了详细说明

Answer 4

您只需要User.Read权限并使用memberof v1。使用import *作为来自'@ microsoft / microsoft-graph-client'的MicrosoftGraph；修复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）您可以从身份验证响应（密钥 roles）访问 msal.idtoken。

对于现代浏览器，这可以在本地存储中找到，对于 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/ 手动解码数据。

您如何使用MSAL-ANGULAR

5 个答案: