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

I am working on an Angular 8 application that is trying to retrieve list of all the Microsoft AD groups available to the logged in user. Previously, I was working on authenticating a user using MSAL library and was successfully able to get the following values:

• access token
• idToken
• homeIdentifier
• expiresIn

My MSAL configuration is as under:

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,
    }
  };
}

When I call getAccount().idTokenClaims['groups'] method of MSAL, it returns me the array of groups with just some identifier values which is not my requirement. I need an array of AD group names.

I implemented MicrosoftGraph Library too for getting groups using the following API:

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

The above code always results in error stating : 401 (Unauthorized)

I have tried multiple solutions from Microsoft Graph including the following:

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);});

The above code snippet returns an error too stating that :

CompactToken parsing failed with error code: 80049217

I have tried a few more solutions but nothing worked for me. I am stuck in it from yesterday.

Can someone help me find out what can be the best solution for it. Any help will be highly appreciated.

Thanks in advance.

Not quite sure about the context of your application. My code demo is based on this official Angular MSAL demo.

After you have configured this app correctly at src/app/app.module.ts, go to src/profile/profile.component.ts add the function below to get all group names:

  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)});
    })
  }

Call this function on page init:

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

Result: Access "profile" page will print all IDs and names of groups in the console.

Please make sure that you have granted your application with permission below before you call this API: