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://docs.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']]
      ],

pixelbits pixelbits · Accepted Answer · 2020-12-04T07:31:46

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']]
  ];

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

2 Answers