如何使用@azure/msal-angular 获取用户的 AAD 会员资格

Question

I am using @azure/msal-angular@0.1.4 (Microsoft Authentication Library for Angular) to enable AAD authentication in my Angular 8 application. So far, I only have 1 table in my database called emp (id, fname, lname, email) and I am using .net core as my back-end.

I did create 2 app registrations one for the my SPA and the other for my API. I already exposed the API and set the User Graph delegate permission in my AD to have user.Read and user.ReadAll.

My msaluser service looks like this:

import { Injectable } from '@angular/core';
import * as Msal from 'msal';
import { environment } from 'src/environments/environment';
import { Observable } from 'rxjs';

@Injectable()
export class MsaluserService {

  private accessToken: any;
  public clientApplication: Msal.UserAgentApplication = null;
  public clientMembership: Msal.User = null;
  constructor() {
    this.clientApplication = new Msal.UserAgentApplication(
      environment.uiClienId,
      'https://login.microsoftonline.com/' + environment.tenantId,
      this.authCallback,
      {
          storeAuthStateInCookie: true,
      });
  }

  public GetAccessToken(): Observable<any> {
    if (sessionStorage.getItem('msal.idtoken') !== undefined && sessionStorage.getItem('msal.idtoken') != null) {
        this.accessToken = sessionStorage.getItem('msal.idtoken');
    }
    return this.accessToken;
  }

  public authCallback(errorDesc, token, error, tokenType) {
    if (token) {

    } else {
        console.log(error + ':' + errorDesc);
    }
  }

  public getCurrentUserFullName() {
    const user = this.clientApplication.getUser();
    alert(user.name);
  }

  public getCurrentUserEmail() {
    const user = this.clientApplication.getUser();
    alert(user.displayableId)
  }

  public getCurrentUserGroups() {
    // TO BE FETCHED
    // TO BE FETCHED
    // TO BE FETCHED
  }

  public logout() {
    this.clientApplication.logout();
  }

My app module looks like the following

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { environment } from 'src/environments/environment';
import { MsalModule, MsalInterceptor } from '@azure/msal-angular';
import { HttpClientModule, HttpClient, HTTP_INTERCEPTORS } from '@angular/common/http';
import { MsaluserService } from '../_services/msaluser.service';

export const protectedResourceMap: any =
  [
    [environment.baseUrl, environment.scopeUri]
  ];

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    MsalModule.forRoot({
      clientID: environment.uiClienId,
      authority: 'https://login.microsoftonline.com/' + environment.tenantId,
      protectedResourceMap: protectedResourceMap,
      redirectUri: environment.redirectUrl
    }),
    BrowserModule,
    AppRoutingModule,
    HttpClientModule
  ],
  providers: [
    HttpClient,
    MsaluserService,
    { provide: HTTP_INTERCEPTORS, useClass: MsalInterceptor, multi: true }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

and my routes has a canActivate: [MsalGuard]

in my component.html I am calling these services and everything seem to be working perfectly. However, I am trying to get all user's AAD memberships along in the constructor of my msaluser service so I can call this function

public getCurrentUserGroups() {
        // TO BE FETCHED
      }

from any component I want when I inject the msaluser service in. Could you show me what code I should write in the getCurrentUserGroups() so I can get the logged in user's AAD memberships?

You should know that my dev environment array is like this

export const environment = {
  production: false,
  baseUrl:'http://localhost:5000/',
  scopeUri: ['api://<API_APPLICATION_ID>/<NAME>'],
  tenantId: '<TENANT_ID>',
  uiClienId: '<SPA_APPLICATION_ID>',
  redirectUrl: 'http://localhost:4200'
};

Update

This is my method that I am trying to call but I am getting unauthorized request althought the accessToken is a valid JWT token

getCurrentUserGroups(): Observable<any[]> {
      this.httpOptions = {
          headers: new HttpHeaders({
              'Content-Type': 'application/json',
              'Authorization': 'Bearer ' + this.msalService.GetAccessToken()
          })

      };
      console.log(this.msalService.GetAccessToken());
      return this.http.get('https://graph.microsoft.com/v1.0/users/' + this.msalService.getCurrentUserId() + '/getMemberObjects', this.httpOptions)
          .pipe((response: any) => {
              return response;
          });
    }

Here is a screenshot to the decoded token, it does have the property [hasgroups] so I should be able to use my JWT token to query Microsoft Graph and get the security groups..

This token I am using to fetch employees info from my back-end repo (.net core) like the following:

getEmployees(): Observable<Emp[]> {
      this.httpOptions = {
          headers: new HttpHeaders({
              'Content-Type': 'application/json',
              'Authorization': 'Bearer ' + this.msalService.GetAccessToken()
          })

      };

      return this.http.get(this.baseUrl + 'emps/', this.httpOptions)
          .pipe((response: any) => {
              return response;
          });
    }

and it is authenticating properly and fetching the data.

Answer 1

First, your access token is for calling your web API rather than Microsoft Graph.

And based on your code, the this.accessToken seems to be id token rather than access token.

So I'm afraid we cannot modify the getCurrentUserGroups() method directly to implement your requirement.

If you want to get the user's AAD Groups, the easiest way is to include Groups claim in your token as instructed here .

You just need to modify the "groupMembershipClaims" field in application manifest of the Azure AD app:

"groupMembershipClaims": "SecurityGroup"

Then the token will contain the Ids of the groups that the use belongs to like below:

{
  "groups": ["{group id}"]
}

In the getCurrentUserGroups() method, try to use something like user.groups .

But you can only get the group id here. So you may need to associate the group id and group name through the configuration file in advance.

In fact, there is another better way which combines Groups and Roles. You can define some app roles and assign the roles to the groups. Then the users in the group will have the "roles" claim.

See another similar post here .