Angular single page application to access multiple protected Web API through Azure Active Directory

Question

I am new to Angular and authentication through Azure Active Directory. I would like to setup and configure an Angular single-page application (SPA) so it can sign in users and call multiple protected Web API using MSAL.

I followed the quick start from https://learn.microsoft.com/en-us/azure/active-directory/develop/quickstart-v2-angular

I was able to get calling Microsoft graph with user profile works. But when I add my own web api which is protected in Azure Active Directory it always get 401 error (if I remove the [Authorize] attribute from controller in web api, it works).

Here are the code to setup addition web api

consentScopes: [
        'user.read',
        'openid',
        'profile',
        'api://d5179ea0-d0f2-42e1-ac8e-5be86d0d5980/gis.readupdate'
      ],
protectedResourceMap: [       
        ['https://localhost:44367/api/', ['api://d5179ea0-d0f2-42e1-ac8e-5be86d0d5980/gis.readupdate']],
        ['https://graph.microsoft.com/v1.0/me', ['user.read']]
      ],

is your JWT token being added to the API call? – Michael Kang Dec 04 '20 at 07:34 — Michael Kang, Dec 04 '20 at 07:34

score 3 · Accepted Answer · answered Dec 04 '20 at 07:31

3

I assume you've added a MsalGuard to protect your route.

Since you're getting a 401, its likely that your protected resource map is not recognizing your API call as protected.

Try this:

  const protectedResourceMap: [string, string[]][] = [
    ['https://graph.microsoft.com/v1.0/me', ['user.read']],
    ['https://localhost:44367/api/', ['d5179ea0-d0f2-42e1-ac8e-5be86d0d5980']]
  ];

answered Dec 04 '20 at 07:31

Michael Kang

52,003
16
103
135

That is an issue for my case. Thanks! – user14761301 Dec 05 '20 at 05:59
Can you please tell what exactly are we supposed to pass as second parameter when registering web api endpoint? 'api://d5179ea0-d0f2-42e1-ac8e-5be86d0d5980/gis.readupdate' was replaced with d5179ea0-d0f2-42e1-ac8e-5be86d0d5980 this solves the issues but what does it really mean? Any article link you can share will be helpful – Nikheel May 10 '21 at 13:45
maybe this: https://stackoverflow.com/questions/52769462/how-do-i-configure-msal-in-angular and https://dev.to/czmiel24/configuring-scopes-in-azure-active-directory-part-1-3bio – Michael Kang May 10 '21 at 22:22
I had troubles configuring the protectedResourceMap the way shown above. This is how it worked: ```const protectedResourceMap = new Map>();``` ```protectedResourceMap.set("https://graph.microsoft.com/v1.0/me", ["user.read"]);``` – Aileron79 Apr 01 '22 at 14:29

score 0 · Answer 2 · answered Dec 04 '20 at 07:31

0

Get the token in a request with both scope graph and your own api. That's not going to work.A token can only access one api.

answered Dec 04 '20 at 07:31

Chauncy Zhou

1,010
1
5
10

Angular single page application to access multiple protected Web API through Azure Active Directory

2 Answers2