Authenticating ASP.NET Core Web Application with Azure AD B2C using User Flows

13 min readMar 30, 2021

Here we will discuss what Azure AD B2C is, how to setup user flows and configuring ASP.NET Core web application with Azure AD B2C. We will built a sign in experience from the scratch and learn how to implement the Password Reset functionality.

What is Azure AD B2C?

Azure AD B2C is a identity as a service i.e. Azure hosts all the necessary components for you to build application that allows users to signup and login. Developers are not worried about the infrastructure behind it.

Features

Focused on consumer applications: It is used to build apps for the end users. With the enterprise application we already know who the users are for the app but with consumers app we do not.
Customize login experience: It allows the users to signup and sign in the app with the user name and password they create with the user account or we can use the social account such as google, facebook or twitter to login. Azure AD B2C uses industry wide standards such as OpenId, OAuth and SAML.
Secure: To provide better security Azure AD B2C provide support for MFA and other third party identification proofing companies.
Branding: It also allow us to control the branding and also what attributes we can enter.

Now lets directly jump into setting up of Azure B2C

Setup Azure B2C Tenant

First login into Azure portal and create a new resource group with following command:

az group create -l westus -n AzureADB2CDemo

Then go to the resource group in the portal and click Add:

Inside new resource search box type B2C and select Azure Active Directory B2C

After selecting Active Directory B2C click on create

It will provide 2 options either to create a new Azure AD B2C Tenant or Link an existing one. For now we will create a new tenant

To create a new tenant provide the basic details such as organization name, initial domain name and select the country/ region and the click “create”

It will take some time but once it is created we have to click the following link

Notice the new tab is opened, as B2C tenant is separate than Azure subscription tenant i.e. Azure subscription has an azure active directory tenant associated with it and this B2C tenant has its own directory and distinct from Azure subscription tenant.

For distinguishing between Azure subscription tenant and Azure AD B2C tenant, I have kept theme for Azure AD B2C tenant as default Azure theme and Azure subscription as theme as dark in the screenshots.

Lets discuss about some of the important items in B2C tenant.

App Registration: Any real world application which we like to integrate with Azure AD B2C are registered here. We can create an entry for web application, web api application and others here.

Identity Providers: It consists for all the third party identity providers that are configured to work with Azure AD B2C i.e. we can configure services such as Facebook, Amazon, Google etc. Then we can have user signin to our website using these 3rd party providers.

User Attributes:

It consists of all the meta data that is collected about users. This information is returned as claims. We can create our own custom one as well.

Users: It opens up a view where we can see and edit all users who have created accounts.

User Flows: This are the heart and soul of Azure AD B2C. It guides the users to signin, signup or password reset process.

Audit logs: It is used to view things such as the authentication of various applications or administrative events.

Linking Azure AD B2C Tenant

Again go back to the resource group in Azure subscription and add a new resource and select Azure Active Directory B2C

Click on create button.

This time select “Link an existing Azure AD B2C Tenant to my Azure Subscription”

Select the Azure AD B2C Tenant, subscription and resource group and click create button. It will make the Azure AD B2C service for us to use.

Now our B2C tenant is ready to use lets discuss how to setup application in Azure AD B2C.

Setup Azure AD B2C Application

Here we will discuss how to setup Azure AD B2C application. Go to Azure AD B2C portal and click on App Registration

Now click on New Registration and register application

Next provide the name of the application to be registered in my case I have added “TekSpry Website” (you can add your own name) and select the the default option in and shown in the screenshot below. We select the last option as the description says this is for authenticating users with Azure AD B2C.

Next we need to provide redirect url. This let the Azure AD B2C know where to send the response to after the user has authenticated. For debugging purpose enter: https://jwt.ms

As we know Azure AD B2C sends tokens formatted with JWT and jwt.ms decodes those tokens which is good for debugging and testing purpose. Once redirect uri is provided keep the other options default and click “Register”

Once the app is created we will be shown the application overview screen. .

There are lots of options in left nav which will be cover in next part of this series.

Now lets discuss about how to build the user flows

What are User Flows?

User flows are the journey that users takes while signing in our application. In other words user flows describe how users signup or sign in in your application.

User flows control the behavior of the user journey. Prominent features of Azure AD B2C User Flows are:

They control the account types the user can use such as what all social accounts types user can use to signup or sign in.
It controls the attributes to collect from the users. We can use the built in attributes or create custom ones.
It controls whether to use MFA in application or not
We can customize the interface for user experience
It control the information shared with JWT to the client application
Its not restricted to single application and can be utilized with multiple applications

There are multiple types of built in user flows but 3 of them are the common one also, we can create our own custom flows as well. Lets creates the built in user flows. Journey of the users is located under policies in left nav:

This will bring the blank screen so click “New user flow”

As mentioned above these 3 are the recommended one:

There are other user flows in preview as well. You can explore them as well.

We will stick to the recommended one as they are well tested. First is Sign up and Sign in, it will allow users to sign up or sign in into our application. Lets create it:

First we will provide the name which we will use in our application as well i.e. “SignUpIn”.

In second step we need to provide the Identity Provider, currently we have only option of Email Signup i.e. local account that means user will use its email address and password. If we have selected any other identity provider such as Google or Facebook it will show up here.

Next is MFA i.e. Multi Factor Authentication keep it disabled for the time being

In user attributes select Given name, surname and city. It will setup the policy that when the user signup to the application collect these 3 attributes.For return claim select surname and city. These values will be returned in JWT token once the user is successfully authenticated.

There are other attributes which can be selected by clicking “Show more…”. Select Display name as user attribute and click Ok and then hit “Create”.

Next we will do the same steps for Profile Editing. Go to Add User Flow → Profile Editing

Then provide the name as “ProfileEdit”. Then select “Local Account Signin” and then select City as user attributes which a user is allowed to change. Then hit “Create” button.

And At last lets do password reset. Add user Flow → Password Reset

Then provide a name as “PasswordReset”. Select Email for signin and then select Name, Surname and City as return claim.

Now we have all the 3 flows create in Azure AD B2C

Now lets see how to test the user flows we created

Click on “B2C_1_SignUpIn” link. It will display the following screen. From here we can edit application claims, user attributes or other settings if we want.

Create New User

What we want now is to run and test it.

Next click “Run user flow”. It will open the window on the right. Now here we can specify which application we want the user flow to run. This reflects the fact that user flow can be used across several applications. It will automatically pick if there is return URL.

Now just click “Run User Flow”, It will open the login page.

Since there are no login accounts created yet so signup first. This is the default Signup screen available. Now first enter an email address and we get a verification code

This is the sample email we will received in our mail box:

We will provide this code and click “Verify code”

Once the code is verified it will ask to provide password

Now enter and confirm the password. Also fill the next 4 fields which are same selected as user attributes. Fill all the details and click “Create”.

New user is created in Azure AD B2C and we can check that in User Tab:

As we can see a new user with email id gagan1983@gmail.com is created.

Configure Web Application

So Azure AD B2C is ready, now we will configure our web application to setup authentication and authorization. The underline protocol is OpenID Connect. We will outsource all authentication work to Azure AD B2C. Flow of authentication process will be as follows:

User click on Sign in and application will redirect it to B2C.
User will complete all the policy steps which are served and managed by Azure AD B2C.
Then the Id token is returned to the browser. This token comes from Azure AD B2C
Browser post the Id token to the return url as specified during the configuration
Then the web page validate the token and set the session cookie.
Finally the secure page is sent to the user.

So, the first thing we need to do here is to setup the return url for our application. For that we need to go to Azure Ad B2C → App Registrations.

Then click on the name of the website i.e. TekSpry Website.

Next go to the Authentication menu in left nav and configure a new Redirect URIs. Since I am testing on my local machine so I have given the url as localhost. We have to configure it as per the environment our application is deployed.

Now go back to the Overview tab and copy the application id as we need it in some time:

When we click on Endpoints link we can see the endpoints that out client app may call in order to communicate with Azure AD B2C. There are oAuth, OpenId and SAML

Note here that each endpoint need to be invoked by passing <policy-name>. Now if we see above we have created 3 policies (B2C_1_SignUp, B2C_1_ProfileEdit, B2C_1_PasswordReset) as user flows we need to pass then in query string.

Now lets move to our application which is build on Asp.Net core MVC. First change we will make in appsettings.json file

Note here that Instance variable is set to “https://tekspry.b2clogin.com” and domain variable is set to “tekspry.onmicrosoft.com”. Next we will add application id we copied as client id. Notice that callback path and all the policies entered as same as configured in portal.

Next go to the startup.cs and add following configuration to “configureservice” method of Startup.cs file.

Next we will add Authentication and Authorization in middleware i.e. “Configure” method

Next is add packages “Microsoft.AspNetCore.Authentication.Cookies” and “Microsoft.AspNetCore.Authentication.OpenIdConnect”

Controller containing the SignIn method issues the challenge response as shown in below image. This challenge response kicks off the Azure AD B2C Authentication process flow.

In razor page we have to setup the signin configuration to call the Signin Action method

SignIn Action

Now lets see all this in action. Run the application in visual studio or visual studio code.

Now click on Sign in link, which issues the challenge and kick start sign in workflow.

When we login for the first time we end up getting error:

On further investigation we will find following error message:

Error Message

This error is because by default Implicit flow is not set to true in Azure AD B2C. So lets go to TekSpry Website in App Registrations and fix this problem.

Go to Manifest tab and set “oauth2AllowImplicitFlow” to true and save the settings. For more information at it please refer link.

Now when we try again we will be redirected to Azure AD B2C page.

Once we provide our credentials and click Sign in button, it will validate our credentials issues a token and send us back to the website

And finally we are logged with our user name in to the application. When we sign out it will take us back to the landing page.

That’s it in this article, we will discuss about configuring Azure AD B2C for WebAPIs and customizing the user interface for Azure AD B2C login page in our next discussion.