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
– Michael Kang

2020-12-04 07:34:48 +00:00
Commented Dec 4, 2020 at 7:34 — Michael Kang
– Michael Kang, Commented Dec 4, 2020 at 7:34

Michael Kang · Accepted Answer · 2020-12-04 07:31:46Z

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 4, 2020 at 7:31

Michael Kang

53k16 gold badges108 silver badges138 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user14761301 Over a year ago

That is an issue for my case. Thanks!

Nikheel Over a year ago

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

Michael Kang Over a year ago

maybe this: stackoverflow.com/questions/52769462/… and dev.to/czmiel24/…

Aileron79 Over a year ago

I had troubles configuring the protectedResourceMap the way shown above. This is how it worked: const protectedResourceMap = new Map<string, Array<string>>(); protectedResourceMap.set("https://graph.microsoft.com/v1.0/me", ["user.read"]);

Chauncy Zhou · Accepted Answer · 2020-12-04 07:31:47Z

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 4, 2020 at 7:31

Chauncy Zhou

1,0751 gold badge7 silver badges10 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related