MSAL Angular HTTP interceptor for localhost not attaching token

Question

I'm trying to call a localhost API and to attach the bearer token on the header. It should be done by msal-angular automatically. For now, I have added the localhost API route to the protectedResourceMap but there is no bearer token inside the header. Tried to add jsonplaceholder and graph.microsoft to make an HTTP post call to it and it works. The only issue is when I try to make an HTTP call to localhost API.

I'm using:

@azure/[email protected]
@azure/[email protected]

I have used factory providers for the interceptors in the app.module.ts.

export function MSALInterceptorConfigFactory(): MsalInterceptorConfiguration {
  const protectedResourceMap = new Map<string, Array<string>>();
   protectedResourceMap.set('https://graph.microsoft.com/v1.0/me', [
     'user.read',
   ]);

  protectedResourceMap.set('http://localhost:5000/api/add', [
    'api://custom api consent'
  ]);

   protectedResourceMap.set('https://jsonplaceholder.typicode.com/', [
     'api://custom api consent'
   ]);

  return {
    interactionType: InteractionType.Redirect,
    protectedResourceMap,
  };
}

It is also registered in the app.module.ts:

    providers: [
        {
          provide: HTTP_INTERCEPTORS,
          useClass: MsalInterceptor,
          multi: true,
        },
        {
          provide: MSAL_INSTANCE,
          useFactory: MSALInstanceFactory,
        },
        {
          provide: MSAL_GUARD_CONFIG,
          useFactory: MSALGuardConfigFactory,
        },
        {
          provide: MSAL_INTERCEPTOR_CONFIG,
          useFactory: MSALInterceptorConfigFactory,
        },
        MsalService,
        MsalGuard,
        Msal,
        BroadcastService,
  ],

Any suggestions?

Artemas

Answer 1

If you're having trouble with a similar issue, I found a solution that may help. It turns out that using the protectedResourceMap function more dynamically and providing a relative URL works better. The problem was caused by using the full route, including the domain name and port number, such as "http://localhost:4200/api/add". The solution was simply to add "/api/" to the protectedResourceMap like this:

protectedResourceMap.set('/api/', [
'api://custom api consent'
]);

Artemas

What is custom api consent? Can you share an example? – Graves

It is ability to provide scope for the user, example new Map([ ['Enter_the_Graph_Endpoint_Here/v1.0/me', ['user.read']] ]). Please read this documentation: learn.microsoft.com/en-us/azure/active-directory/develop/… – Artemas

If user can see the token from the request header, is it safe? – Graves

Thanks for this, I was struggling with this for a couple of days and this answer helped me. – Fantan

Answer 2

We were struggling with @Bozhinvski's answer above; specifically what api://custom api consent meant.

This value needs to be aligned with the Application ID URI, which by convention is in the format of api://<Application (client) ID> where the Application (client) ID is usually the GUID generated for you by Azure. However this is not a hard requirement (but is the default when generated and what is recommended). This can be controlled in the Azure Active Directory Portal under the Application Registration Page -> Expose an API and can be changed if you wish:

Antetype

Answer 3

Similar to SETI At Home's answer, here's how to do it without calling add on the protectedResourceMap. It's actually a lot easier overall.

  protectedResourceMap: new Map([
    ['https://graph.microsoft.com/v1.0/me', ['user.read']],
    ['/api/', ["api://your-app-guide-would-be-here/And.The.Claim"]],
  ])

Using /api/ seems to authenticate any requests with api in them, which in my case, works really well. I was previously specifying the full http://appsite.local/api, which was causing the problem.

Bloodred

hey, what is this part, specifcally? your-app-guide-would-be-here? I have an Angular app and a .net webapi and I'm trying to configure the MSAL library to always send the auth token, because I need the user id on the back end. this is the configuration I have so far: protectedResourceMap: new Map([ ['/api/', ['api://mytenantdomain.onmicrosoft.com/myapi-api/api.readwrite']] ]) Is there anything I'm missing out? – Archibaldo

It's a typo, it's supposed to be your application GUID, not guide, whoops. I'm not in this space right now but its the object ID of your app in Azure. – Bloodred

I used the app id uri and it did not work. From the Expose an API menu, I set the uri as in the comment above yours, and it looks like the example in my previous comment. The problem is that the token is not attached at all. I was expecting it to be attached to every request the Angular app sends to my web api. – Archibaldo