Serving Industries Worldwide

Innovative Ways - Satisfied Clientele

Integration of Azure AD B2C with .NET web app

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

Create an Azure AD B2C Tenant

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

Integration of Azure ad B2C with Dotnet Web Apps

  • 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.

Integration of Azure ad B2C with ASP Dotnet Web App

  • 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.)

Azure ad B2C with .Net Web App Integration


3. How to register your application?

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

Azure ad B2C with Net Web App Integration

  • Click +Add at the top of the blade.

Integration of Azure ad B2C with Net Web App

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

Integration of Azure Ad B2C with ASP Dot Net Web App

  • 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.

Integration Method of Azure Ad B2C with Web App


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:

Integration of Azure ad B2C with Aspdotnet Web App

  • 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:

Integration of Azure Ad B2C with .Net Web App


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:


Integration of Azure ad B2C with Net Web Apps

  • 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


Integration of Azure Ad B2C with Dot Net Web Apps


Integration of Azure Ad B2C with .Net Web Apps


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.

Integration Method of Azure ad B2C with .Net Web 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.

Integration of Azure Ad B2C with Dot Net Web App


Step 5 : Call the Azure B2C Policies

  • Now need to configure out Web App to invoke the policies we created, so we need to add a new controller named “AccountController. When a user selectsSign upSign in, or Edit profile in the web app, the associated action is invoked in Controllers\AccountController.cs. In each case, we can use built-in OWIN methods to trigger the correct policy:

Integration Method of Azure ad B2C with .Net Web Apps

  • Use an [Authorize] tag in controllers that requires the execution of a certain policy if the user is not signed in. Open Controllers\HomeController.cs and add the [Authorize] tag to the claims action. OWIN will select the last policy configured to execute when the Authorize tag is invoked.

Integration of Azure Ad B2C with ASP.Net Web App

  • Also use OWIN to sign out the user from the app. In Controllers\AccountController.cs

Azure Ad B2C with ASP.Net Web App Integration

  • Now let’s add a partial view which renders the links to call those actions, so add a new partial view named “_LoginPartial.cshtml” under the “Shared” folder and paste the code below:

Integration of Azure ad B2C with Dotnet Web App

  • Now call _LoginPartial.cshtml partial view to _Layout.cshtml file

Integration of Azure Ad B2C with ASP Net Web App


Step 6 : Now run the application


Integration of Azure ad B2C with ASP Dotnet Web Apps

  • Now press sign in link, it redirects to the Azure AD B2C tenant where we can enter the app local credential

Integration of Azure Ad B2C with Aspdotnet Web Apps

  • If the credentials provided are valid then a successful authentication will take place and a token will be obtained and stored in the claims identity for the authenticated user and navigate to RedirectUri (https://localhost:63722/)

Integration of Azure Ad B2C with ASP.Net Web Apps


5. Conclusion

By using Azure Active Directory (Azure AD) B2C, software development companies can add powerful self-service identity management features to web application. This article will discuss

how to create a .NET Model-View-Controller (MVC) web application

that includes user sign-up, sign-in, and profile management. The application will include support for sign-up and sign-in by using a user name or email, and by using social accounts such as Facebook and Google.