MSAL Consent Problem in a multi tier app registration (Angular + .NetCore WebApi)

Question

I'm Building an Angular 9 + Asp.Net Core WebApi App using Azure active directory for the authentication in a multitenant context. The WebApi Component have to call some MS Graph Api. So following the documentation, I created two apps on the portal (one for each component). In the web Api app i did the following operation:

added the authorizazion needed for the graph calls
added the ID of the client app in the knownClientApplications section of the manifest
Defined a scope in the "expose Api" Section

On the client app I added the scope definided at point three below.

On the Angular App I configured as follow the MSal library:

   MsalModule.forRoot({
        auth: {
          clientId: 'CLIENT APP ID', // This is your client ID
          authority: 'https://login.microsoftonline.com/common', // This is your tenant info
          redirectUri: 'http://localhost:4200' // This is your redirect URI
        },
        cache: {
          cacheLocation: 'localStorage',
          storeAuthStateInCookie: true, // Set to true for Internet Explorer 11
        },
      },
      {
        popUp: true,
        consentScopes: [
          'user.read',
          'openid',
          'profile',
          'api://xxxxxxxxxxxxxxxxxx/.default'
        ],
        unprotectedResources: ['http://localhost:4200'],
        protectedResourceMap: [
          ['https://localhost:44351', ['api://xxxxxxxxxxxxxxx/api_usage']]
        ],
        extraQueryParameters: {}
      })

The problem is : When i login, the only consent prompted are like "user read information" and "user save information". The consent for the the web api are not reported, so the web api service principal in the customer tenant for web api is not created, lately the following calls from web api to graph fails for absence of permits.

For testing purpouse i tried to put other scopes (like calendar.read or place.read in the consentScopes of Msal configuration but the result is the same: the only consent requested is the two above.

Anyone can help me?

Joy Wang-MSFT Joy Wang-MSFT · Accepted Answer · 2020-06-02T02:44:00

The code uses the Implicit grant flow, you could not specify the Microsoft Graph permissions together with your own web api permission in the consentScopes, you could just specify the consentScopes with the permissions of one API.

In your case, it should be like below:

 consentScopes: [
          'api://xxxxxxxxxxxxxxxxxx/.default'
        ]

MSAL Consent Problem in a multi tier app registration (Angular + .NetCore WebApi)

1 Answers