primary integrating web app with azure active directory b2c

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.

      Registered Azure Active Directory

    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.
      Azure Active Directory service
    2. In the Azure Active Directory blade, select “Manage tenants.”
    3. Select “Create” to create a new tenant.
      Create Tenant
    4. In the create a tenant wizard, select “Azure Active Directory (B2C).”
      Select Azure Active Directory (B2C)
    5. Provide the organization name, domain name, and resource group.
      Remember the domain name, you'll need it later.
      Provide the organization name, domain name, and resource group
    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.
      Select the All Directories tab
    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.
      Confirm you have switched to a new tenant
  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.
      Azure AD B2C service
    2. In the B2C blade, select “User flows” from the navigation panel.
    3. Select “New user flow.”
      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.
      Select Sign Up and Sign In
      1. Select the recommended version, then click “Create.”
        Select the recommended version
      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.”
        Create the sign up and sign in user flow
    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.
      Create password reset flow
      1. Select the recommended version, then click “Create.”
        Select the recommended version
      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.”
        Password reset configuration
  4. Back on the main Azure AD B2C blade, select “App registrations” from the navigation menu, then select “New registration.”
    New application 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.”
      Register an application
    4. Once the application is created, make of note of the application (client) ID; we'll need it below.
      Make note of the new application client ID
    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.
      Save the application authentication
  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.”
      Add a new ASP.NET Core Web Application project in Visual Studio
    3. Name the application (e.g. MyB2CWebApp) and click “Create.”
      Name the new application
    4. In the Create ASP.NET Core web application wizard, select “Web Application (Model-View-Controller).”
      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:
        Configure the authentication area
        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.
      Sign in to create your account
    3. Provide the data to verify and create your account.
      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.

    Add code to secure the application with authentication

    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!

We're Hiring!

Come work with our award winning team. Check out our careers page for current openings and send us your resume today!

Jeff Achesinski
Jeff AchesinskiCore Contributor
Senior IT Consultant

Jeff Achesinski is a Solution Architect at Marathon Consulting and a Microsoft Certified Solutions Developer (MCSD). He has been working as a software developer in Virginia Beach for over 30 years. Jeff also spent 15 years as a volunteer scuba diver at the Virginia Aquarium and served on the Board of Directors for Kempsville Volunteer Rescue Squad. He lives in Virginia Beach with his wife, April.

Let's Talk About Your Project.

We are a full-service IT and digital marketing firm. We believe that successful projects are the result of working collaboratively and transparently with our clients. Are you looking for a better user experience for your website or application? Need an experienced database architect or business analyst? Let’s talk!

X