0

Followed countless tutorials regarding this scenario.

https://learn.microsoft.com/en-us/azure/active-directory/develop/scenario-spa-app-registration

https://learn.microsoft.com/en-us/samples/azure-samples/ms-identity-ciam-javascript-tutorial/ms-identity-ciam-javascript-tutorial-2-call-api-angular/

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?

Simon
  • 1,412
  • 4
  • 20
  • 48
  • Sounds like that you need to pass your token to back-end and back-end should sent it to Azure for validation. Do you have capabilities to send toke for validation to your Azure? – Jivopis Aug 17 '23 at 20:45
  • @Scotty13 this is exactly what we want to do. but i cant for the life of me find out how this is done / samples – Simon Aug 18 '23 at 17:50
  • Do you have a way how to validate the token with the first Azure instance? – Jivopis Aug 18 '23 at 18:45

2 Answers2

0

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

Shiraz Bhaiji
  • 64,065
  • 34
  • 143
  • 252
0

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've written up my rationale and a code walkthrough. These are for React, but the same principles apply.

Arvind Suthar
  • 71
  • 8