Authenticating to ASP.NET Core Web Application Using Azure AD B2C

Azure Active Directory B2C enables users to authenticate themselves to applications using local accounts or social accounts such as Google, Facebook or LinkedIn.

The applications leveraging the Azure AD B2C, don’t have to maintain the authentication mechanism. All of that complexity will be handled by Azure AD B2C.

In this post we will see how to configure Azure AD B2C from scratch for ASP.NET Core applications.

We will go through the following topics:

• Creating a new Azure AD B2C Tenant
• App registration in Azure AD B2C Tenant
• Configuring User Flows
• Creating ASP.NET Core Web application Using Visual Studio 2019 and Configuring Azure AD B2C
• Creating ASP.NET Core Web application Using .NET CLI and Configuring Azure AD B2C

To configure the Azure AD B2C for the applications first we need to create the Azure AD B2C tenant. Let’s create a new Azure AD B2C tenant.

Creating a New Azure AD B2C Tenant

To create a new Azure AD B2C tenant, login to your Azure portal and click on Create a resource.

In Create a resource page search for Azure Active Directory B2C in the search box, and select the first option available as shown below.

You will be navigated to Azure Active Directory B2C resource page.

Click on Create to create the Azure AD B2C tenant. This will create a separate tenant from your Azure AD tenant.

In the next screen you will be presented with following two options:

• Create a new Azure AD B2C Tenant.
• Link an existing Azure AD B2C Tenant to my Azure subscription.

Let’s choose Create a new Azure AD B2C Tenant to create a new tenant.

Next enter the following details for the new tenant.

• Organization name: provide an organization name.
• Initial domain name: provide a unique initial subdomain name.
  • Note down this initial domain name, we will need this to update in ASP.NET appsettings.json.
• Country/Region: Select the country/region closest to your customers.
• Subscription: Select subscription for your Azure AD B2C tenant.
  • Resource group: Choose resource group to contain Azure AD B2C tenant.

Then click on Review + Create

Validation screen will be presented.

Click on Create

You may encounter the following error.

The subscription is not registered to use namespace ‘Microsoft.AzureActiveDirectory’. See https://aka.ms/rps-not-found for how to register subscriptions. 

If you get this error then check the following post how to fix this error and then continue from here.

The subscription is not registered to use namespace ‘Microsoft.AzureActiveDirectory’

After fixing the error try creating Azure AD B2C Tenant again, and should be successful this time. You should be able to see the status under notifications.

Go to your newly created Azure AD B2C Demo tenant.

App Registration

Any application which needs to authenticate using Azure AD B2C, requires app registration in Azure.

Let’s register an app for our ASP.NET core application.

Click on New registration button inside the App registrations under our newly created Azure AD B2C tenant.

Fill in the details for the app registration

• The display name: Enter any display name to easily identify the app.
• Supported account types: choose “Accounts in any identity provider or organizational directory (for authenticating users with user flows)”
• Redirect URI: Select Web in dropdown and enter following url in text box

https://localhost:5001/signin-oidc

Note the port no. we have provided 5001, you may need to update according to your application port no., we will see later in this post where in ASP.NET core application port can be configured.

Register the application.

In few seconds the app will be registered and you will be redirected to your App.

Note down the Application (client) ID, we will need this to update in ASP.NET core web application’s appsettings.json file.

Authentication options

Next we need to configure the authentications options.

Select the Authentication blade from left menu in registered app and check the two authentication options as shown below and click on Save.

We have successfully configured the app now.

Next we need to configure the User Flows for Sign up/ Sign in forms.

Configuring User Flows

User flows defines the sign up / sign in process for the applications but managed in Azure AD B2C. We can configure what data will be collected from the user and passed to the application.

To configure the User Flows, go back to the Azure AD B2C tenant and click on User Flows in left navigation.

Then click on New user flow

Selecting User Flow Type

In the new User Flow we get multiple options to configure, such as Sign up, Sign in, Profile editing.

Select the Sign up and sign in for this tutorial, this will enable the sign up and sign in experience for our web application.

On selecting Sign up and Sign in, it will enable another two options. Keep default and Click on Create

In the next screen provide a name for the User Flow and select email signup.

We can configure the Multifactor authentication as well, but leave default for now.

Scroll down a bit and select Show more…

On clicking show more, multiple fields will be presented to choose from in two columns Collect Column and Return Column.

Collect Column: Collect column shows what data will be collected from the user.

Return Claim: Return claim show what claims will be passed back to the application.

Select following options for our application and then click OK.

Note we have selected Display Name in collect attribute, during sign up user will be asked for Display Name.

Click on Create.

User Flow will be created and will be available under User flows.

Creating ASP.NET Core Web Application Using Visual Studio 2019 and Configuring Azure AD B2C

Let’s create an ASP.NET core application, and then we will configure it for Azure AD B2C authentication.

Open Visual Studio and select on Create a new project.

Select ASP.NET Core Web App (Model-View-Controller) for this example and click on next.

Provide project name and location, and select Next.

Select Microsoft Identity Platform from Authentication Type and click on create.

You may be presented with following screen to install required components (dotnet msidentity pool), select Finish to install.

ASP.NET application will be created.

Updating Azure AD B2C configurations

Open the appsettings.json you will see the following configurations.

{
/*
The following identity settings need to be configured
before the project can be successfully executed.
For more info see https://aka.ms/dotnet-template-ms-identity-platform 
*/
  "AzureAd": {
    "Instance": "https://login.microsoftonline.com/",
    "Domain": "qualified.domain.name",
    "TenantId": "22222222-2222-2222-2222-222222222222",
    "ClientId": "11111111-1111-1111-11111111111111111",
    "CallbackPath": "/signin-oidc"
  },
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft": "Warning",
      "Microsoft.Hosting.Lifetime": "Information"
    }
  },
  "AllowedHosts": "*"
}

Replace it with following and replace {Initial Domain Name} and {Application (Client) Id} with values we noted earlier.

{
/*
The following identity settings need to be configured
before the project can be successfully executed.
For more info see https://aka.ms/dotnet-template-ms-identity-platform 
*/
  "AzureAd": {
    "Instance": "https://{Initial Domain Name}.b2clogin.com/",
    "ClientId": "{Application (Client) Id}",
    "Domain": "{Initial Domain name}.onmicrosoft.com",
    "SignedOutCallbackPath": "/signout/B2C_1_susi",
    "SignUpSignInPolicyId": "b2c_1_susi",
    "ResetPasswordPolicyId": "b2c_1_reset",
    "EditProfilePolicyId": "b2c_1_edit_profile",
    "CallbackPath": "/signin-oidc"
  },
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft": "Warning",
      "Microsoft.Hosting.Lifetime": "Information"
    }
  },
  "AllowedHosts": "*"
}

Updating application Port no.

Remember earlier we specified port no. 5001 in Azure for callback Url?

Let’s update this in our ASP.NET project.

Open Properties > launchSettings.json

Update sslPort no. to 5001.

 "sslPort": 5001

If you want to keep another port no. then make sure you update in Azure AD B2C app registration too.

Testing Azure AD B2C

Press F5 and you will be redirected to {orgname}.b2clogin.com for authentication, If not then click on Sign in link on web portal.

Click on Sign up, and you will be asked for sing up details along with Display name we configured earlier in User Flow.

Creating ASP.NET Core Web application Using .NET CLI and Configuring Azure AD B2C

Open command prompt.

Create a directory for the web application.

mkdir AzureADB2CCodeDemo

Switch to the directory just created.

cd AzureADB2CCodeDemo

Create new dotnet mvc application project with Azure AD B2C option, i.e. IndividualB2C

dotnet new mvc --auth IndividualB2C

Open the project with Visual Studio Code.

Code .

Open appsettings.json, you will see similar options as we saw previously with Visual Studio 2019.

{
  "AzureAdB2C": {
    "Instance": "https://login.microsoftonline.com/tfp/",
    "ClientId": "11111111-1111-1111-11111111111111111",
    "Domain": "qualified.domain.name",
    "SignedOutCallbackPath": "/signout/B2C_1_susi",
    "SignUpSignInPolicyId": "b2c_1_susi",
    "ResetPasswordPolicyId": "b2c_1_reset",
    "EditProfilePolicyId": "b2c_1_edit_profile",
    "CallbackPath": "/signin-oidc"
  },
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft": "Warning",
      "Microsoft.Hosting.Lifetime": "Information"
    }
  },
  "AllowedHosts": "*"
}

Replace it with following and replace {Initial Domain Name} and {Application (Client) Id} with values we noted earlier.

{
/*
The following identity settings need to be configured
before the project can be successfully executed.
For more info see https://aka.ms/dotnet-template-ms-identity-platform 
*/
  "AzureAd": {
    "Instance": "https://{Initial Domain Name}.b2clogin.com/",
    "ClientId": "{Application (Client) Id}",
    "Domain": "{Initial Domain name}.onmicrosoft.com",
    "SignedOutCallbackPath": "/signout/B2C_1_susi",
    "SignUpSignInPolicyId": "b2c_1_susi",
    "ResetPasswordPolicyId": "b2c_1_reset",
    "EditProfilePolicyId": "b2c_1_edit_profile",
    "CallbackPath": "/signin-oidc"
  },
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft": "Warning",
      "Microsoft.Hosting.Lifetime": "Information"
    }
  },
  "AllowedHosts": "*"
}

Updating application Port no.

Let’s update the port for project generated from .NET CLI.

Open Properties > launchSettings.json

Update sslPort no. to 5001. as highlighted below.

{
  "iisSettings": {
    "windowsAuthentication": false,
    "anonymousAuthentication": true,
    "iisExpress": {
      "applicationUrl": "http://localhost:51430",
      "sslPort": 44315
    }
  },
  "profiles": {
    "AzureADB2CCodeDemo": {
      "commandName": "Project",
      "dotnetRunMessages": true,
      "launchBrowser": true,
      "applicationUrl": "https://localhost:5001;http://localhost:5000",
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      }
    },
    "IIS Express": {
      "commandName": "IISExpress",
      "launchBrowser": true,
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      }
    }
  }
}

Run project

dotnet run

And you should see following from b2clogin.com

Conclusion

In this post we learned how to configure Azure AD B2C for ASP.NET Core applications to allow users to authenticate themselves leveraging Azure AD B2C capabilities. Azure AD B2C let’s users to use local account or social accounts such as Google, Facebook or LinkedIn for authentication.

We started by setting up the new Azure AD B2C tenant and registered app for ASP.NET core application. Then we configured User Flow for Sign up and Sign In. Next we configured Azure AD B2C settings in ASP.NET core applications created using Visual Studio 2019 UI and .NET CLI.

Please leave your feedback or any queries you have.

Thanks!