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

JAL 526 Reputation points

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.

Azure Active Directory
Azure Active Directory
An Azure enterprise identity service that provides single sign-on and multi-factor authentication.
13,547 questions
No comments
{count} votes

Accepted answer
  1. Alfredo Revilla (MSFT) 17,016 Reputation points Microsoft Employee

    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';  
           declarations: [  
           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', ['']]  
           providers: [  
                   provide: HTTP_INTERCEPTORS, // Provides as HTTP Interceptor  
                   useClass: MsalInterceptor,  
                   multi: true  
           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