Followed countless tutorials regarding this scenario.
https://learn.microsoft.com/en-us/azure/active-directory/develop/scenario-spa-app-registration
We have an Angular front end, talking to a .net core API.
We have set up the application in Azure as an SPA, created roles, and assigned users to those roles.
We have installed MSAL for angular, and implemented pop up authentication. All working, and a custom guard to protect against different roles with different access..
The issue comes when accessing the API, as we would like to
1.secure the API
2.use the same token with the same roles etc as the angular application
The samples above all suggested creating a secondary application within Azure, but these will have different roles and not relate to the front end
Surly there must be a simple way to implement this?
2
Answers
You need a token for each API that you wish to call.
You can use the acquireTokenSilent method. This will use the existing active session with Azure Active Directory to get a token.
https://learn.microsoft.com/en-us/azure/active-directory/develop/scenario-spa-acquire-token?tabs=javascript2
I prefer the backend-for-frontend (BFF) model, which is also used by the SPA templates in ASP.NET Core. These result in one app registration for both your Angular code and your .NET Core API.
The BFF link above mentions that the session between the BFF Proxy (your API) and the browser based app (your Angular app) can be secured with a browser cookie.
The BFF Proxy then keeps the access token and refresh token stored internally, and creates a separate session with the browser-based app via a traditional browser cookie.
I am honestly a little uncomfortable with this and so (for now) the only communication that my SPA React app does with ASP.NET process is to perform authentication to get a spa code to be retrieved for an access token through the msal-react library.
I’ve written up my rationale and a code walkthrough. These are for React, but the same principles apply.