在 Angular 8 中使用 MSAL 库获取 Microsoft Azure AD 组名称列表

Question

我正在开发一个 Angular 8 应用程序，该应用程序试图检索已登录用户可用的所有 Microsoft AD 组的列表。以前，我正在使用 MSAL 库对用户进行身份验证，并成功获得以下值：

访问令牌
idToken
家庭标识符
过期时间

我的 MSAL 配置如下：

export function MSALAngularConfigFactory(): MsalAngularConfiguration {
  var isIE = window.navigator.userAgent.indexOf("MSIE ") > -1 ||
    window.navigator.userAgent.indexOf("Trident/") > -1;
  return {
    popUp: !isIE,
    consentScopes: [
      'user.read',
      'openid',
      'profile',
      'group.Read.All'
    ],
    unprotectedResources: ['https://www.microsoft.com/en-us/'],
    protectedResourceMap: [
      ['https://graph.microsoft.com/v1.0/me', ['user.read']],
      ['https://graph.microsoft.com/v1.0/groups', ['group.read.all']]
    ]
  };
}

export function MSALConfigFactory(): Configuration {
  var isIE = window.navigator.userAgent.indexOf("MSIE ") > -1 ||
    window.navigator.userAgent.indexOf("Trident/") > -1;
  return {
    auth: {
      clientId: environment.clientId,
      authority: environment.authority,
      validateAuthority: true,
      redirectUri: environment.redirectUrl,
      postLogoutRedirectUri: environment.redirectUrl,
      navigateToLoginRequestUrl: true,
    },
    cache: {
      cacheLocation: 'localStorage',
      storeAuthStateInCookie: isIE,
    }
  };
}

当我调用 MSAL 的 getAccount().idTokenClaims['groups'] 方法时，它 returns 我只得到一些标识符值的组数组这不是我的要求。我需要一组 AD 组名称。

我也实现了 MicrosoftGraph 库以使用以下 API:

获取组

fetch('https://graph.microsoft.com/v1.0/groups', {
     headers: {
         'Authorization': 'Bearer ' + {access_token},
         'Content-Type': 'application/json',
     }
 }).then(res => { console.log(res); });

以上代码总是导致错误说明： 401（未授权）

我尝试了 Microsoft Graph 的多种解决方案，包括以下内容：

const msalConfig = {
      auth: {
        clientId: clientId, // Client Id of the registered application
        redirectUri: "https://localhost:4200",
      }
 };
 const graphScopes = ["user.read", "group.read.all"]; // An array of graph scopes
 const msalApplication = new UserAgentApplication(msalConfig);
 const options = new MSALAuthenticationProviderOptions(graphScopes);
 const authProvider = new ImplicitMSALAuthenticationProvider(msalApplication, options);

 this.subscription1 = broadcast.subscribe("msal:loginSuccess",
      (result) => {
        //The result has accessToken as null.
        fetch('https://graph.microsoft.com/v1.0/groups', {
          headers: {
            'Authorization': 'Bearer ' + {accessToken},
            'Content-Type': 'application/json',
          }
        }).then(response => { console.log(response);});

上面的代码片段 returns 也有一个错误：

CompactToken 解析失败，错误代码：80049217

我尝试了更多的解决方案，但没有任何效果。我从昨天就卡在里面了。

谁能帮我找出最好的解决方案。任何帮助将不胜感激。

提前致谢。

Answer 1

不太确定您的应用程序的上下文。我的代码演示基于 this official Angular MSAL demo.

在 src/app/app.module.ts 正确配置此应用程序后，转到 src/profile/profile.component.ts 添加下面的函数以获取所有组名：

  getAccessTokenAndCallGraphAPI(){

    this.authService.acquireTokenSilent({
      scopes: ['group.Read.All']
    }).then(result=>{
      const httpOptions = {
        headers: new HttpHeaders({
          'Content-Type':  'application/json',
          Authorization: 'Bearer '+result.accessToken
        })}

      this.http.get("https://graph.microsoft.com/v1.0/groups?$select=id,displayName",httpOptions).toPromise().then(result=>{console.log(result)});
    })
  }

在页面初始化时调用此函数：

 ngOnInit() {
    this.getProfile();
    this.getAccessTokenAndCallGraphAPI();
  }

结果：访问“配置文件”页面将在控制台中打印所有组的 ID 和名称。

请确保您在调用此 API 之前已授予您的应用程序以下权限：

在 Angular 8 中使用 MSAL 库获取 Microsoft Azure AD 组名称列表

Get list of Microsoft Azure AD group names using MSAL library in Angular 8

usergroups

azure-active-directory

msal

angular8

microsoft-graph-api