Azure B2C Active Directory Authentication in ASP.NET MVC

Share this
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  

In this article, you will learn to implement Azure B2C Active Directory Authentication in ASP.NET MVC application.

Azure Active Directory B2C is a cloud identity service allowing you to connect to any customer. It is a directory service that leverages identity stores outside of your company. More specifically, it is an authentication service for publicly facing applications. It integrates with other third-party identity providers such as Google+, Facebook, Amazon, or LinkedIn to provide a one-stop shop for authentication. It acts as an alternative to the burden of having to manage authentication and account details yourself.

This tutorial will show you how to create an ASP.NET MVC application that is configured for sign-on with Azure Active Directory B2C.

Complete source code for the application is available on my GitHub repo : https://github.com/sudipta-chaudhari/Azure_AD_B2C_MVC_Authentication

Step 1 : Create ASP.NET MVC Project

I have used Visual Studio 2017 Enterprise edition. Open Visual Studio, go to File -> New -> Project -> ASP.NET Application (.NET Framework) -> Select ‘MVC’ template.

Azure_AD_B2C_MVC_Step1

Enable SSL for the project by selecting the project in Visual Studio and clicking ‘F4’. This will bring up the Project Properties. Set “SSL Enabled” to “True”, copy the “SSL URL” as shown in the below screenshot.

Azure_AD_B2C_MVC_Step1_1

Right click on project, select “Properties” and paste the copied SSL URL in the “Project Url” textbox as shown in the screenshot below and save the changes by clicking ‘Save’ button.

Azure_AD_B2C_MVC_Step1_2

Step 2 : Install/Update NuGet Packages

Install below mentioned NuGet packages.

  • Microsoft.Owin.Security.OpenIdConnect
  • Microsoft.Owin.Security.Cookies
  • Microsoft.Owin.Host.SystemWeb

Update the below mentioned NuGet package.

  • Microsoft.IdentityModel.Protocol.Extensions.dll

This is needed else a HTTP 404 error is thrown when trying to login.

Microsoft.Owin.Security.OpenIdConnect is middleware to protect web apps with OpenId Connect.

OpenID Connect is a simple identity layer on top of the OAuth 2.0 protocol, which allows computing clients to verify the identity of an end-user based on the authentication performed by an authorization server, as well as to obtain basic profile information about the end-user in an interoperable and REST-like manner.

Microsoft.IdentityModel.Protocol.Extension contains classes which extends .NET Framework with base constructs from the OpenId Connect and WS-Federation protocols.

Microsoft.Owin.Security.Cookiesmiddleware enables an application to use cookie based authentication, similar to ASP.NET’s forms authentication. This middleware will be used to create a cookie based session after obtaining a valid token from our Azure AD B2C tenant. This cookie will be sent from the browser to the server with each subsequent request and get validated by cookie middleware.

Step 3 : Create application in Azure B2C Active Directory

Open the old Azure Portal https://manage.windowsazure.com Go to ‘Active Directory’ section. This will list all the active directories. Click on the name of your Azure AD which you intend to use and then from the AD home screen, click on “Manage B2C settings”.

Azure_AD_B2C_MVC_Step3_1

This will redirect you to the new Azure portal https://portal.azure.com and take you to the “Azure AD B2C Settings” screen as shown below.

AzureAD_B2C_MVC_Step3_2

On this screen, click the “Applications” section and click the Add button to register your ASP.NET MVC web app.

AzureAD_B2C_MVC_Step3_3

Under ‘Name’ textbox, enter the name for your application. Set ‘Web App/Web API’ to true, ‘Allow implicit flow’ to true and in the ‘Reply URL’ textbox, enter the SSL URL obtained from Step 1 and click ‘Save’. This will generate the ‘Application ID’.

Now the application configuration in Azure B2C AD is complete.

Step 4 : Add Owin Startup class

Add a OWIN Startup class to the project by right clicking the project, select ‘Add New Item’ and select ‘OWIN Startup class’. The code for OWIN Startup class is as shown below:-

This class configures the OWIN OpenId Connect middleware. Configuration method accepts parameter of type IAppBuilder which will be supplied by the host at run-time.app parameter is an interface of type IAppBuilder which will be used to compose the application for our Owin server.

The application keys read in the above class which need to be added to web.config file are as below:-

Step 5 : MVC View/Controller with SignIn and SignOut button

Create a new MVC Controller named AccountController and add the below code for the SignIn and SignOut buttons.

Add a partial view named _LoginPartial.cshtml which will call the SignIn and SignOut controller actions. The code for the partial view is as below.

This partial view will be referenced in the “_Layout.cshtml” as shown follows.

Now,  we are ready to run the application. On running the application, the application home page is as shown in the below screenshot where the ‘Sign In’ button can be seen.

AzureAD_B2C_MVC_HomePage

On clicking the ‘Sign In’ button, The application takes us to the Azure B2C AD Sign In page as shown in the below screenshot.

As can be seen in the above screenshot, I am signing into the Azure B2C AD with my Gmail Id and not my organizational mail id. This is the feature of Business to Consumer Azure Active Directory which supports external users other than the organizational users.

After providing my credentials, I am redirected back to the application’s home page (which is the same as configured in the ‘Reply Url’ in Step 3 while registering the application in the Azure B2C AD).

AzureAD_B2C_MVC_LoggedInPage

In the above screenshot, you can see my profile name preceding the ‘Sign out’ link.

The following diagram shows what happens when the user signs in, at a high level.

auth-flow

  1. The user clicks the “sign in” button in the app. This action is handled by an MVC controller.
  2. The MVC controller returns a ChallengeResult action.
  3. The middleware intercepts the ChallengeResult and creates a 302 response, which redirects the user to the Azure AD sign-in page.
  4. The user authenticates with Azure AD.
  5. Azure AD sends an ID token to the application.
  6. The middleware validates the ID token. At this point, the user is now authenticated inside the application.
  7. The middleware redirects the user back to application.

The following diagram shows the authentication process flow.

sign-in-flow

* IDP – Identity Provider

  1. The user clicks the “Sign in” button, and the browser sends a GET request. For example: GET /Account/SignIn/.
  2. The account controller returns a ChallengeResult.
  3. The OIDC middleware returns an HTTP 302 response, redirecting to Azure AD.
  4. The browser sends the authentication request to Azure AD
  5. The user signs in to Azure AD, and Azure AD sends back an authentication response.
  6. The OIDC middleware creates a claims principal and passes it to the Cookie Authentication middleware.
  7. The cookie middleware serializes the claims principal and sets a cookie.
  8. The OIDC middleware redirects to the application’s callback URL.
  9. The browser follows the redirect, sending the cookie in the request.
  10. The cookie middleware deserializes the cookie to a claims principal and sets HttpContext.User equal to the claims principal. The request is routed to an MVC controller.

I hope you followed the article. If you have any comments, questions or suggestions, leave a message and I will try to respond at my earliest.


Share this
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  

2 thoughts on “Azure B2C Active Directory Authentication in ASP.NET MVC”

  1. Hi, You have not provided steps to configure / create the sign-in policy in AD B2C. can you provide that? The sample is not working/.

    1. Hi. This article is about Azure B2C Active Directory Authentication in ASP.NET MVC using C#. The sample works fine as demonstrated by the screenshots provided in the article. This article doesn’t cover steps to create or configure sign-in policy in Azure B2B AD.

Leave a Reply