• Matt Burrell

How To Use Azure AD B2C to Authenticate Users in an ASP.NET Core Web App

Updated: Jan 14



Transcript


In this video I’ll show you how to create an ASP.NET Core web app that authenticates against an Azure B2C directory.


We’ll create the Azure B2C tenant from scratch so you can see how to set it up for yourself.

I’ll be using Visual Studio to create the application, but you can use Visual Studio Code if you prefer.


You’ll need the latest version of dotnet core installed on your machine, which at the time of recording is version 3.


You will of course need a Microsoft Azure account so if you don’t already have one, head over to the Microsoft Azure website and sign up.


I’ll assume you’ve logged into the Azure portal and can see a dashboard similar to this one.

To create a new Azure B2C Directory click on Create a New Resource and then search for B2C. Click on Azure Active Directory B2C. And then click Create.


Before you can link an existing tenant to your subscription you need to first create a new tenant. Azure uses tenant and directory interchangeably and you can think of a tenant as a directory of users that will have access to your app as well as a set of policies that define how and what access is available.


Click on create a new tenant and enter an Organisation name. In this demo, I’ll be creating a B2C directory for a fictional company called Travel Pigeon.


You need to choose a globally unique domain name for your directory. You can change this to a custom domain if you like once the tenant is created.


Choose a country or region for your directory. This can’t be changed once the directory is created and it will define which data centre is used to hold your user data.


Click create and Azure will begin to create your tenant.


Once it’s complete, don’t click the link at the bottom to go to the new directory. Instead, click the breadcrumb link at the top, to head back to the create page. Before you can manage the directory, you need to link it to your subscription.


Select the B2C tenant you just created from the drop-down box. Next I’m going to create a new Resource Group and choose a geographical location for it.


Once your B2C tenant is linked to your subscription and has been deployed, it’s time to set it up as an identity provider.


Under notifications you’ll see a link to the B2C tenant that’s just been created. Click on it and then click on Azure AD B2C Settings.


This will open up a new window showing all the services under your new tenant. Note that you can easily switch between this tenant and your normal tenant by clicking on the Directories icon in the tool bar.


Now let’s register the ASP.NET Core app that we’re going to create. To do this click on App Registrations in the menu bar.


Click on New Registration and then give it a name. Under the supported account types, leave the default option selected as this is the one required to authenticate users when using Azure B2C. The other options are for restricting user access to specific directories or tenants.


Scroll down and click Register. This will create a new App registration in your B2C directory that will represent the web app we’ll be building.


Once the registration process has finished, it’s time to configure the authentication settings. Click on Authentication. This section registers the redirect URLs that are available for your app to use and controls whether the Implicit grant authorization flow is allowed. Leave the redirect urls empty for now.


We want to enable the Implicit grant flow and configure our authorization service to return both Access and ID tokens to our application. This flow is used by the ASP.NET Core authentication middleware.


Enabling this Implicit grant flow also means you could use your tenant to return tokens to any single page application that you create.


Click Save. Now that we’ve registered the application we’re going to create and enabled the Implicit grant flow, it’s time to configure the authentication policies that our tenant will support.


Navigate to the User flows section and click on New User Flow. A User Flow defines a set of authentication pages that your users will use to sign up, sign in and change their password amongst other things. You can fully customize these pages using your own html and css but for this demo we’ll use the standard ones that Microsoft provides.


First create a Sign up and sign In flow. We need to give each flow a unique name that will be referenced in our web app. In this example, we’ll only use the Email signup identity provider but it’s really easy to set up social identity providers like Facebook and LinkedIn.


Before saving, we need to select which user attributes we collect either during sign up or from a third-party social identity provider. These will be serialised into Claims that are returned to our web app in the token.


Let’s select a couple and then click Create.


Next we need to create a password reset policy. The SignUpSignIn flow and the password reset flow are both required. The profile editing flow is optional and we won’t be using it in this demo.


Again let’s give the flow a unique name and choose the email identity provider since that’s the only provider we’ve registered. We don’t need to collect any claims for this flow so we can just click Create.


That’s all the setup needed for our B2C tenant so now it’s time to head over to Visual Studio and create our web app.


Open Visual Studio and Create a brand new project.


Choose an ASP.NET Core Web Application and give it a name.


I’m going to create an MVC application so I’ll leave the default selection as it is. To set up the web app to authenticate using your new B2C tenant, you need to click on the link labelled Change in the Authentication section.


Select Individual User Accounts from the options list and select ‘Connect to an existing user store in the cloud’ from the drop down list. Visual Studio will prompt you for some details so that it can pre-populate some values for you.


You can find these values if you head back over to the Azure portal.

Copy the domain name and paste it into the domain name field.


And copy the application or client id and paste that into the Application Id field.


Copy the reply URL that Visual Studio has generated. We’re going to add this to the list of Redirect urls on the app registration page, under the Authentication section. I’m also going to register a localhost:5001 url so I can run my app using both local addresses. This means I can run the web app using either IIS Express or as a stand-alone console app in Visual Studio.


The final thing to do is to copy the ‘sign up or sign in’ policy name and paste it into the Visual Studio prompt.


And do the same for the password reset flow.


Click Ok and Create the web app.


You’ll be able to see that Visual Studio has transferred the values you just pasted into the appsettings.json file. These are used by ASP.NET Core when the authentication middleware is registered in the Startup.cs class.


You’re now ready to run the app. I’m running in IIS Express here which is configured to use port 44388. The Visual Studio template provides a simple Sign in link at the top of the page that we can use to test the login process.


If you click this, you’ll be redirected to the sign in page that is defined by the user flow sign in policy you created earlier. If you were to create a custom sign in flow, your custom page will appear instead.


Let’s register a new user. We need to enter an email address as that’s the identity provider we configured in the B2C tenant. Azure automatically sends a verification email for us and prompts the user to enter a verification code.


Let’s choose a password and enter a name and surname as you might remember we configured the sign in policy to collect and return these attributes. These values will be returned as Claims in the authorization token that’s returned to the web app after successful sign in.


Once you’re signed in you can use the Chrome dev tools to inspect the cookie that the authentication middleware has set.


If you sign out, you can see that the cookie correctly disappears and you’re no longer authenticated.


I hope you enjoyed this video. I’ll be creating many more tutorials like this so be sure to subscribe to this channel and I look forward to sharing more videos with you.

Contact

Connect

+44(0)7889908061

©2020 by Solid Code Solutions Ltd. All rights reserved.

Registered number: 08750436. Registered office: 20 - 22 Wenlock Road, London, England, N1 7GU