Question 104260 in Azure Question posted in
The official documentation to get you started can be found here.

What is the flow of Azure AD based authentication in a project having SPA and web api?

I have a front end SPA (single page application) and back end api.

Each event in the SPA (like button click) invokes the respective api endpoint, and displays the result in the SPA.

I want to implement Azure AD based authentication so that only my Azure Tenant users are able to use the SPA/api.

Is the following flow correct approach to implementing such a feature:

  1. User opens the SPA
  2. User clicks on login button which opens Microsoft login popup
  3. User enters Microsoft credentials in the popup, and if credentials are correct then user gets the JWT token
  4. For every subsequent api request, the JWT token is placed in the bearer header
  5. The endpoint validates the JWT token using Azure public key and rejects the request if token is missing or validation fails.

Is this flow correct and what is such a flow called?

Tags:

2

Answers


  1. 0

    There are several implementation steps that needs to be performed before you will have the flow that you have described:

    • User flow needs to be configured (Azure AD) – e.g. selfsignup allowed?
    • Backend and frontend applications needs to be registered (Azure AD)
    • Permissions and scopes needs to be added (Azure AD)
    • Backend API needs to be configured (e.g. API management) in order to validate the JWT token

    I highly recommend to configure one of the Azure sample implementations end2end to get and idea of all the needed tasks: https://learn.microsoft.com/en-us/azure/active-directory-b2c/configure-authentication-sample-spa-app

    Login or Signup to reply.
  2. 0

    The steps you outlined are correct.

    An OAuth 2.0 "flow" outlines the steps to acquire a token from an Identity Provider (IdP). Since you are using a SPA, there are some restrictions on which flows you can use. A SPA can’t act as a "Confidential Client" which is required for some flows. (Basically – the Client Secret required for the other flows would be visible in the browser network trace, so it’s not "confidential".) The "Implicit Flow" used to be recommended for SPAs but it’s less secure, so now the "Authorization code flow (with PKCE)" is recommended. Steps 2 & 3 in the question above are when you are executing the flow to acquire a token.

    The authentication flow doesn’t really address how you save and send the token to the API (#4 in the question), but the Microsoft Authentication Library (MSAL) helps with that – More information here – https://learn.microsoft.com/en-us/azure/active-directory/develop/scenario-spa-overview

    In Azure AD, you’ll want 2 App Registrations – one for your SPA and one for your API. The API App Registration will need to "Expose an API" which really means to define a scope. Your SPA App Registration will need to Add an "API Permission" to the scope you defined from your API App Registration. (It will show up in My APIs.) This relationship is how #5 in the question is enforced.

    Many of the steps for setting up authentication in Azure AD and Azure B2C are similar but Azure AD is designed for authenticating users that are part of your organization. Azure B2C allows you to build a set of users that aren’t members of a particular Azure AD organization.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search