Integration of Azure AD B2C with .NET web app

1. Introduction 2. How to create an Azure AD B2C Directory? 3. How to register your application? 4.

1. Introduction

Azure Active Directory B2C is a cloud identity management solution for consumer-facing web and mobile applications recommended by software companies in India. Its highly available global service that scales to hundreds of millions consumer identities. It is built on an enterprise-grade secure platform, Azure Active Directory B2C keeps your applications, your business, and your consumers protected.

It offers a better way to integrate consumer identity management into their applications with the help of a secure, standards-based platform and a rich set of extensible policies.

Using Azure Active Directory B2C, consumers can sign up for applications by using their existing social accounts (Facebook, Google, Amazon, LinkedIn) or by creating new credentials (email address and password, or username and password).

This supports authentication for a various modern application architectures. All of them are based on the industry standard protocols OAuth 2.0 or OpenID Connect. It also helps to understand the high-level scenarios before starting build an applications.

In this blog, let us understand how to integrate Azure AD B2C with .NET web app with an example.

 

2. How to create an Azure AD B2C Directory?

Step 1 : Create an Azure AD B2C tenant

  • Sign in to the Azure classic portal as the Subscription Administrator. This is the same work or the same Microsoft account that you used to sign up for Azure.
  • Click  New > App Services > Active Directory > Directory > Custom Create

 

 

  • Enter the NameDomain Name and Country or Region for your tenant.
  • Check the option that says This is a B2C directory.

 

 

  • Click the check mark to complete the action.
  • Your tenant is now created and will appear in the Active Directory extension. You are also made a Global Administrator of the tenant. You can add other Global Administrators as required.

Step 2 : Navigate to the B2C features blade on the Azure portal

  • Navigate to the Active Directory extension on the navigation bar on the left side.
  • Find your tenant under the Directory tab and click it.
  • Click the Configure tab.
  • Click the Manage B2C settings link in the B2C administration section.

 

 

  • The Azure portal with the B2C features blade showing will open in a new browser tab or window.
  • Pin this blade to your Startboard for easy access. (The Pin tool is marked in red at the upper-right corner of the features blade.)

 

3. How to register your application?

  • On the B2C features blade on the Azure portal, click Applications.

 

 

  • Click +Add at the top of the blade.

 

  • Enter a Name for the application that will describe your application to consumers. For example, you could enter "IfourTestApp".

 

 

  • If we are writing a web-based application, toggle the Include web app / web API switch to Yes. The Reply URLs are endpoints where Azure AD B2C will return any tokens that your application requests. For example, enter https://localhost:63722/.
  • If you are writing a mobile application, toggle the Include native client switch to Yes. Copy down the default Redirect URI that is automatically created for you.
  • Click OK to register your application.
  • Click the application that you just created and copy down the globally unique Application Client ID that you'll use later in web application.

 

 

4. Build a ASp.NET Web App

Step 1 : Creating MVC Web App Project

  • Add a new ASP.NET Web application named "AzureADB2CApp", then add new MVC ASP.NET Web application, the selected template for the project will be "MVC", and do not forget to change the "Authentication Mode" to "No Authentication" check the image below:

 

 

  • Once the project has been created, click on its properties and set SSL Enabled to True, copy the "SSL URL" value and right lick on project, select Properties, then select the Web tab from the left side and paste the "SSL URL" value in the Project Url text field and click Save. We need to allow https scheme locally once we debug the application. Check the image below:

 

 

Step 2 : Install the needed NuGet Packages to Configure the MVC App

We need to add bunch of NuGet packages, so Open NuGet Package Manager Console and install the below packages:

  • Install-Package Microsoft.Owin.Security.OpenIdConnect -Version 3.0.1
  • Install-Package Microsoft.Owin.Security.Cookies -Version 3.0.1
  • Install-Package Microsoft.Owin.Host.SystemWeb -Version 3.0.1
  • Update-package Microsoft.IdentityModel.Protocol.Extensions

 

Step 3 : Configure Web App to use Azure AD B2C tenant IDs and Policies

Now we need to modify the web.config for our MVC App by adding the below keys, so open Web.config and add the below AppSettings keys:

 

 

  • ida:RedirectUri value contains Reply URL from Registered application
  • ida:AadInstance value contains the metadata discovery endpoint for each policy, this endpoint will be used internally by the middle-wares which we will add in the next steps to validate the JWT tokens.
  • ida:Tenant value contains the URL for our Azure AD B2C tenant we have already defined in the previous post.
  • ida:ClientId value contains the App client Id we have already registered with our Azure AD B2C tenant.
  • ida:SignUpPolicyId value contains the name of the signup policy we already created.
  • ida:SignInPolicyId value contains the name of the Signin policy we already created.
  • ida:UserProfilePolicyId value contains the name of the Create profile policy we already created.

 

See below images for above key values

 

 

 

 

Step 4 : Add Owin Statrup class

  • Add an OWIN startup class to the project called Startup.cs. Right-click on the project, select Add and New Item, and then Search for "OWIN." Make sure to change the class declaration to public partial class Startup. We implemented part of this class for you in another file. The OWIN middleware will invoke the Configuration() method when your app starts. In this method, make a call to ConfigureAuth(), where you set up authentication for your app.

 

 

  • Open the file App_Start\Startup.Auth.cs and implement the ConfigureAuth() method. The parameters you provide in OpenIdConnectAuthenticationOptions serve as coordinates for web app to communicate with Azure AD. Also need to set up cookie authentication. OpenID Connect middleware uses cookies to maintain user sessions, among other things.