Guideline for Hosting Angular App + ASP.NET Core WebAPI with AzureAD Auth

Luca 96 Reputation points
2020-07-09T14:52:26.83+00:00

Hi,

we're trying to host an Angular App on Azure. As a REST API we're using ASP.NET Core WebAPI, also hosted on Azure. Access to these should be controlled by an Azure AD. Only Users from our company are allowed to access the app.

Currently we're roughly trying the following approach (basically just one approach of many, since we've tried numerous tutorials):
1. Create two AppServices (for client and API) and configure authentication on both

  • Login with Azure AD if not authenticated
  • Azure AD as Provider with Express Settings
    2. Configure authentication on the generated App registrations
  • Client: Configure the Redirect URI (Type Web) and Implicit grant (access tokens and ID tokens)
  • API: Configure the Redirect URI with <baseUrl>/.auth/login/aad/callback

We have the following requirements:

  • The client needs to know, who is accessing the app. We've tried MSAL.js for this and it seems to work.
  • API-Requests from client->API must be authenticated. Direct access to the API needn't to be possible. We've tried to use a Bearer token for this (via the MsalInterceptor). But MSAL isn't able to acquire a token, even though the token is saved in the localStorage. As a result, no token is sent.
  • We don't want the App to be accessible, unless the user is authenticated. So a client-side handling is not wanted.
  • We don't need to access any Microsoft APIs like Graph API. Just authenticate the user and get the username.

We've tried numerous approaches from different Microsoft tutorials but get none to work. So the question is, if there is any guideline for this case? Is there anything we're missing? Is there any guideline for a proper troubleshooting?

Some questions that arised trying to get things running:

  • What is exactly the difference between the types Web and SPA of the Redirect URI? Can I use the type Web with a SPA?
  • Is there any other solution than MSAL for accessing user information in the client? Is the use of MSAL even correct in our scenario?
  • Is our approach of using two App Services for client and API (with two App registrations) correct / recommended?

Thanks in advance.

Best regards, Luca.

Azure App Service
Azure App Service
Azure App Service is a service used to create and deploy scalable, mission-critical web apps.
6,875 questions
Microsoft Entra ID
Microsoft Entra ID
A Microsoft Entra identity service that provides identity management and access control capabilities. Replaces Azure Active Directory.
19,473 questions
0 comments
Accepted answer
  1. Luca 96 Reputation points
    2020-10-08T06:50:29.64+00:00

    We finally found a working example with Angular + ASP.NET Core WebAPI:
    https://github.com/Azure-Samples/ms-identity-javascript-angular-spa-aspnetcore-webapi

    Things we wished, we knew before:

    • Angular MSAL Wrapper currently not supporting Auth Code Flow. So Implicit Code Flow is the actual recommended flow. If you're using 3rd party libraries, that are not using the Angular HttpClient, you have to implement the token interceptor manually.
    • The "Authentication / Authorization"-Configuration within the App Service should not be set.
    • You must configure "Expose an API" within the API App Registration and set the API Permission in the client App Registration.
    • For authentication within the API you should use Microsoft.Identity.Web instead of Microsoft.AspNetCore.Authentication.AzureAD.UI
    • Microsoft made big changes in the authentication provider (Azure AD for developers -> Microsoft Identity v2) which made researching a real pain, since a lot of documentation and examples were deprecated, promoted solutions and technologies weren't even production ready and so on.

    This is a working solution but not the optimal solution we thought of. With this solution we have some drawbacks:

    • our API has to protect itself from unauthorized / unauthenticated users
    • our client code is somewhat public (minfied and compiled but theoretically can be reverse engineered)
    • we had to make changes within the client, to make this work (workarounds for the 3rd party library we're using)
    0 comments

1 additional answer

Sort by: Most helpful
Most helpful Newest Oldest
  1. Alfredo Revilla - Senior Freelance SWE, SWA, IAM 27,016 Reputation points
    2020-07-09T20:40:12.727+00:00
    1. To get an access token for an API you need to declare the API routes and scopes in the framework\protectedResourceMap configuration property.
    2. You can always take a look at the shipped Angular project template with ASP.NET Core
    3. The idea is to keep specific reply URLs for each type of application but you can use them interchangeably.
    4. You can access user information trough the MsalService.getAccount() method.
    5. App service should be enough for most scenarios. Also, it would simplify deployments. Development wise if the codebase grows too much it may make sense to split the code in 2 projects or repositories but not 2 app services.