Calling an Azure AD secured Web API from Angular Frontend

Question

I am currently developing an Angular Frontend, which uses MSAL to authenticate users. This Frontend should call a Web-API (also hosted in Azure), which is secured by Azure Active Directory.

While I easily managed to work with Angular and MSAL, getting a Token and successfully calling Graph/me as test, I cannot get the API call to work, I'm always receiving 401's.

I'm using the following setup:

1. Angular frontend with MSAL
   I created an Application in AAD, gave it User.Read permissions for MS Graph, copied the ID into the MSAL code and using the MSAL Interceptor calling Graph API was pretty easy following the documentation.
2. Web-API
   I created a web-api with in .NET core, simply returning some demo data in the GET. I published the API to an azure Web Application (https://myappurl.azurewebsites.net/api/test, calling it from Angular or Postman was no Problem
3. Auth
   Using the Azure Portal, in the App Web settings, I activated web service authentication with Azure Active Directory. As the required application, I put the same one I used in step 1 for the Frontend.

At this point I was not able to call my API any more, always receiving 401's. I parsed the JWT Token out of the Angular code and tried postman calling with Authorization: Bearer eyJ0xxxxx headers, still 401.

I thought, that by "logging into" my frontend I should be able to use the token to identify myself for the API call aswell, since it uses the same app-id, but somehow I think I got it mixed up. I looked at a lot of documentation, but it's mostly outdated since the App registration changes in Azure Portal.

export const protectedResourceMap:[string, string[]][]=[['https://graph.microsoft.com/v1.0/me', ['user.read']] ];
MsalModule.forRoot({
      clientID: "my-client-id",
      redirectUri: "http://localhost:4200/profile",
      postLogoutRedirectUri: "http://localhost:4200/bye",
      authority: "https://login.microsoftonline.com/my-tenant-id",
      validateAuthority: true,
      cacheLocation : "localStorage",
      navigateToLoginRequestUrl: true,
      popUp: false,
      consentScopes: [ "user.read" ],
      unprotectedResources: ["https://www.microsoft.com/en-us/"],
      protectedResourceMap: protectedResourceMap,
      correlationId: '1234',
      piiLoggingEnabled: true
    }),

Do I need to add the webAPI to the protected ressources in Angular? Do I need an extra Application to secure the API and then allow my Frontend App to access the backend app? Reading through all the available articles confused me even more.

Answer 1

In your azure registration app go to "expose an api", copy the scope url and set this value as a scope in your loginRequest

var loginRequest = {
                   scopes: ["api://aa059cdd-1f53-4707-82a8-fdf7bd6c2859/Test"] 
               };


msalInstance.loginPopup(loginRequest)
.then(response => {
    // handle response
})
.catch(err => {
    // handle error
});