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

JAL 571 Reputation points
2022-08-29T21:26:47.557+00:00

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.

Microsoft Entra ID
Microsoft Entra ID
A Microsoft Entra identity service that provides identity management and access control capabilities. Replaces Azure Active Directory.
19,311 questions
0 comments No comments
{count} votes

Accepted answer
  1. 2022-08-30T03:33:28.38+00:00

    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.


0 additional answers

Sort by: Most helpful