Integrating Web App with Azure Active Directory B2C

Introduction to Azure ActiveDirectory B2C

Azure ActiveDirectory B2C (AAD B2C) is an identity management service provided by Microsoft within the Azure cloud platform. This service allows application developers to host the user store for their application in the Azure cloud. In practical terms, the effort involved in creating and managing users is offloaded to Microsoft, freeing the developer to focus on the primary functionality of the application. 

There are many articles available online that explain the benefits of using AAD B2C. In this article, we’re going to provide a step-by-step guide to creating an Azure ActiveDirectory B2C user store and a new public-facing ASP.NET Core web application that utilizes the new user store. Our implementation of B2C will allow public users to create their own accounts within the store as well as provide a “forgot password” function.

Overview

Before we jump into the details of configuring AAD B2C, here’s a high-level description of the steps we’re going to follow:

1. First, we’re assuming that you are familiar with Microsoft Azure and have an account.
2. We’re going to create and configure an Azure ActiveDirectory B2C tenant.
3. We’re going to define the “user flows.” User flows determine the user’s experience when they access certain areas of the application (e.g. creating an account, login, and password reset).
4. We’re going to register a new application that will use the newly created AAD B2C user store.
5. Finally, we’ll build an application that will use our AAD B2C as the user store.

Let’s Get Started

1. Log in to your Azure account and enable Microsoft.AzureActiveDirectory as a resource in the subscription.
   1. Select the desired subscription, then select “Resource providers.”
   2. Verify that the Microsoft.AzureActiveDirectory is registered.
      

      

   3. If Microsoft.AzureActiveDirectory is not registered, select it and click “Register.”
2. Create an AAD B2C tenant.
   1. In the Azure search bar, enter “Azure Active Directory” and select the Azure Active Directory service.
      
   2. In the Azure Active Directory blade, select “Manage tenants.”
      
   3. Select “Create” to create a new tenant.
      
   4. In the create a tenant wizard, select “Azure Active Directory (B2C).”
      
   5. Provide the organization name, domain name, and resource group.
      Remember the domain name, you'll need it later.
      
   6. Once the information has been provided, go to the next page and click “Create.”
   7. Once the tenant is created, switch to the new tenant by clicking on your account in the upper right of the portal, then selecting “Switch directory.”
      
   8. Select the “All Directories” tab, find the new tenant in the list, and click the “Switch” button.
      
   9. Once you have successfully switched to the B2C tenant, your account information (click on your username in the upper right of the page) will reflect the change.
      
3. Now we’re ready to create our “user flows.” User flows are the various account-related scenarios that a user may come across while interacting with your application.
   1. In the Azure search bar, enter “B2C” and select the “Azure AD B2C” service.
      
   2. In the B2C blade, select “User flows” from the navigation panel.
      
   3. Select “New user flow.”
      
   4. Select “Sign up and sign in.” This will create a user flow that allows users to create a new account within the user store or log in if they already have an account.
      
      
      1. Select the recommended version, then click “Create.”
         
      2. Enter a name for the user flow, e.g. SignUpSignInFlow.
      3. Select “Email signup.”
      4. Leave multifactor authentication (MFA) disabled for this example.
      5. In the “User attributes and token claims” section, click “Given Name,” “Surname,” and “Email Address” in the collect attribute column.
         1. Note: more attributes are available by clicking “Show more...” at the bottom of the section.
      6. Click “Create.”
         
   5. From the user flow blade, select “New user flow,” then select “Password reset.” This will create a user flow that allows a user to reset their password for the account.
      
      
      1. Select the recommended version, then click “Create.”
         
      2. Enter a name for the user flow (e.g. PasswordResetFlow).
      3. Select “Reset password using email address.”
      4. There are no claims needed (skip this section).
      5. Click “Create.”
         
4. Back on the main Azure AD B2C blade, select “App registrations” from the navigation menu, then select “New registration.”
   
   
   1. Enter a name for the application (e.g. My B2C Web App).
   2. In the Redirect URI section, enter “https://localhost:44385/signin-oidc” for the web option. Make a note of this value; we'll need it later. Your port number in the URI will probably be different. This will redirect back to the application after authentication is completed.
   3. Keep the default selection for all other options and click “Register.”
      
   4. Once the application is created, make of note of the application (client) ID; we'll need it below.
      
   5. Click on the “Authentication” option in navigation panel and check the “Access tokens” and “ID tokens” checkboxes. (This is also where you can edit the port number in the redirect URI if you need to change it).
   6. Click the save button at the top of the page.
      
5. Now let's build the application.
   1. Open Visual Studio and select “Create New Project.”
   2. Select “ASP.NET Core Web Application” and click “Next.”
      
   3. Name the application (e.g. MyB2CWebApp) and click “Create.”
      
   4. In the Create ASP.NET Core web application wizard, select “Web Application (Model-View-Controller).”
      
   5. Click “Change” in the authentication area. This is where everything comes together.
      1. Select “Individual User Accounts.”
      2. Select “Connect to an existing user store in the cloud” from the dropdown.
      3. Complete the remaining information as follows:
         
         
         1. DomainName ? {your_b2c_domain_name}.onmicrosoft.com
         2. Application Id ? {your application id}
         3. /callbackPath ? {your callback uri} (e.g. /signin-oidc)
         4. SignInSignUp Policy ? B2C_1_{your_signup_signin_name}
         5. PasswordReset Policy ? B2C_1_{your_password_reset_name}
         6. Click “OK” to save your authentication settings.
   6. Click “Create” to create your web application.
6. Run the application.
   1. Run the application as is. The default application will build and run without any authentication.
      
   2. Click “Sign in” in the upper right to create your account. Notice the application moves to login.microsoftonline.com.
      
   3. Provide the data to verify and create your account.
      
   4. Once you’ve created your account and logged into the application, the upper right will change to indicate that you’ve successfully logged in.
      
      

      At this point, we’re successfully connected to the new AAD B2C user store, but our application isn’t secure yet.

7. Secure the application.
   

   It's up to the developer to decide and apply the proper authentication where it is needed. There are several ways to apply authentication/authorization within the app. 

   However, here's a brief code snippet to apply authentication to all the pages within the app.

   In the ConfigureServices method in the Startup.cs file, add the highlighted code.
   
   

   After adding the code, run the application again. You should go directly to the login page (on microsoftonline.com) before your application is even displayed in the browser.

   Provide your credentials and you should be redirected back to the home page of the application.

8. Congratulations – you've created an ASP.NET Core web application that is secured with an Azure ActiveDirectory B2C user store.

There are many, many customizable options when using the B2C, but they are beyond the scope of this article. I hope this article has helped you understand the basic components used by AAD B2C and how to integrate AAD B2C into your application.

Happy coding!