msal.js 2.0 Token needed for internal API and Graph API

Question

Angular App using msal.js 2.0. Backend is .net core.

• Front end clientID signs in the user. The audience/scope is the clientID for the backend API.
• So the audience/scope in the (front-end) token is the backend clientID.

But the FRONT end is calling graph api. Apparently graph Api is responding, "Invalid audience/scope".

Do I need to get a separate token to call graph API? How do I do that, given the user has already signed in and acquired a token for my backend API?

I'm lost here.

Answer 1

Hello @JAL , that's correct. In order to call another API you need to obtain an access token issued to that particular API/resource, in this case MS Graph. The easiest way using MSAL v2 for Angular is to register the MS Graph endpoints and corresponding scopes in the protectedResourceMap element of the MSAL Interceptor configuration during application bootstrapping:

   import { NgModule } from '@angular/core';  
   import { HTTP_INTERCEPTORS, HttpClientModule } from "@angular/common/http";  
   import { AppComponent } from './app.component';  
   import { MsalModule, MsalRedirectComponent, MsalGuard, MsalInterceptor } from '@azure/msal-angular'; // Import MsalInterceptor  
   import { InteractionType, PublicClientApplication } from '@azure/msal-browser';  
     
   @NgModule({  
       declarations: [  
           AppComponent,  
       ],  
       imports: [  
           MsalModule.forRoot( new PublicClientApplication({  
               // MSAL Configuration  
           }), {  
               // MSAL Guard Configuration  
           }, {  
               // MSAL Interceptor Configurations  
               interactionType: InteractionType.Redirect,  
               protectedResourceMap: new Map([   
                   ['Enter_the_Graph_Endpoint_Here/v1.0/me', ['user.read']]  
               ])  
           })  
       ],  
       providers: [  
           {  
               provide: HTTP_INTERCEPTORS, // Provides as HTTP Interceptor  
               useClass: MsalInterceptor,  
               multi: true  
           },  
           MsalGuard  
       ],  
       bootstrap: [AppComponent, MsalRedirectComponent]  
   })  
   export class AppModule { }  

For more information take a look to Single-page application: Acquire a token to call an API.

Let us know if you need additional assistance. If the answer was helpful, please accept it and complete the quality survey so that others can find a solution.