Integration of Azure AD B2C with .NET web app
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 Name, Domain 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.
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 up, Sign 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:
- 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.
- Also use OWIN to sign out the user from the app. In Controllers\AccountController.cs
- 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:
- Now call _LoginPartial.cshtml partial view to _Layout.cshtml file
Step 6 : Now run the application
- Now press sign in link, it redirects to the Azure AD B2C tenant where we can enter the app local credential
- 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/)
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.