I ran into a previous co-work a while back and they were talking about using Azure’s B2C for authentication on their apps. It sounded like a good solution. This blog post is going to cover getting the Azure B2C setup and will cover creating a sample application that will use B2C for authorization.
Create Azure Active Directory B2C
This all assumes you already have an Azure account. If you don’t you can sign up for a free trial (not an affiliate link). After you are signed up head to the Azure Portal.
Note: you can skip this section if you want to use the default Active Directory that is on your Azure account.
In the upper left click the Create a resource link.
In the search box look for Azure Active Directory B2C.
After selecting Azure Active Directory B2C more information will load to the right in a new panel. Click the Create button to continue.
Next, select if you want to create a new B2C tenant or use an existing one. I don’t have an existing one so the following flow will be for creating a new tenant.
On the next panel, you will need to enter an organization name and initial domain name. After entering valid values click the create button.
Switch Active Directory
Now that the new directory has been created we need to switch to the new directory in the Azure Portal. In the left panel click Azure Active Directory.
Click the Switch directory link.
A new panel will show on the right side of the screen with a list of directories you have available. Select the one you created in the steps above or an existing one you would like to use.
Using the search box in the top middle of the portal find Azure AD B2C.
Sample Application
Before moving forward on the Azure side we are going to create our sample client application. This little detour will make it easier for me to point out what values in Azure need to go where in the application configuration.
To create a new web application already set up to use Azure B2C use the following .NET CLI command from a command prompt. There is also a Visual Studio template if you prefer that route.
dotnet new webapp --auth IndividualB2C
In the resulting application, your appsettings.json will have the following section for AzureAdB2C.
"AzureAdB2C": {
"Instance": "https://login.microsoftonline.com/tfp/",
"ClientId": "11111111-1111-1111-11111111111111111",
"CallbackPath": "/signin-oidc",
"Domain": "qualified.domain.name",
"SignUpSignInPolicyId": "",
"ResetPasswordPolicyId": "",
"EditProfilePolicyId": ""
}
Azure AD B2C Setup
Back to the Azure portal and the Azure AD B2C service page. In the Overview page, the first thing we need to make note of and use to set some configuration values in our application for is the Domain name.
In your appsettings.json file use this value for your Domain value.
"Domain": "TestingOrg3.onmicrosoft.com"
The subdomain is also used to build the Instance like the following.
"Instance": "https://TestingOrg3.b2clogin.com/tfp/"
On the panel that loads hit the Add button. On the new Application panel, we need to give the application a Name, select the type of clients which is Web App / Web API in our case. Next, is the Reply URL which with default setup is your base url/sigin-oidc. I messed this value up in the beginning and got some really strange errors. Finally hit the Create button.
After the creation process is complete copy the value in the Application ID field and use it as ClientId in your appsettings.json file.
Back in Azure select the User flows (policies) option.
At the top of the panel that loads click the New user flow button. The next panel shows a selection of flows that can be added. The application we are making will use both the Sign up and sign in flow and the Password rest flow. I’m only going to walk through the first one, but the second one is very smiliar. Click on the Sign up and sign in like.
In the creation process you will need to set a Name for the flow and select the Identity providers that are valid for the flow. You also have the choice of fields to collect with this flow and which ones should be returned with the claim. After those options are set click the Create button.
The Name form this screen will need to be entered in your appsettings.json file for the SignUpSignInPolicyId value. Here is what I ended up with in my settings file with the Sign Up and Reset Password policies.
"SignUpSignInPolicyId": "B2C_1_SignInOut", "ResetPasswordPolicyId": "B2C_1_PasswordReset"
Run the sample
At this point, you can run your sample application and click the Sign in link and you will see a page similar to the following which is coming from Azure B2C.
There are ways to customize the pages users will see under the associated flow in Azure.
Wrapping Up
I hit quite a few issues getting Azure B2C setup. I hope this post will help you all bypass some of the issues I hit.