How to setup Active Directory B2C in Microsoft Azure

Step by step guide to setting up Active Directory B2C in Microsoft Azure

Just a note from me. This is a series of blog posts on How to integrate Azure B2c into and Angular 6 Application. This is number 2 of 4 in the series. If you would like to read the first post click here

What is Azure Active Directory B2C

Azure Active Directory B2C is a cloud-based identity and access management solution for your consumer-facing web and mobile applications.

It is a highly-available global service that scales to hundreds of millions of consumer identities. Its designed to extend a typical Azure Active Directory instance to allow for external customer registration via local account (email) or delegate to a range of social accounts (Facebook, Twitter etc.)

Still confused???

You’ve got a web app / mobile app and you need a simple way to let users create accounts for your application, login to your application and also manage their own accounts.

You don’t want to worry about security, scalability and ease of use. You want something that with a few click-iddy clicks will get you set up and running.

The following post will hopefully get you set up.

How much is it going to cost me?

Azure Active Directory (Azure AD) B2C usage will be billed monthly based on the total number of both:

• Stored users : Users stored in the Azure AD B2C directory
• Authentications : Tokens issued either in response to a sign-in request initiated by a user, or initiated by an application on behalf of a user (e.g. token refresh, where the refresh interval is configurable).

A separate fee will apply if you choose to provide higher levels of assurance using the per application Multi-Factor Authentication for Azure AD B2C option.

Getting set up

Before you get stuck in I’m assuming you have already created your own Microsoft Azure account??

If not click here: create your azure account

Step 1 : Open up the azure portal and login

link: Azure Portal

Once logged in you should see the following screen:

Step 2: Make sure that you are using the directory that contains your subscription

You can do this by clicking the Directory and subscription filter in the top menu and choosing the directory that contains it. This is a different directory than the one that will contain your Azure AD B2C tenant.

Step 3 : Create the Active Directory B2C service

1. Choose Create a resource in the top-left corner of the Azure portal.
2. Search for and select Active Directory B2C
3. Click create
4. Choose Create a new Azure AD B2C Tenant, enter an organisation name and initial domain name, which is used in the tenant name, select the country (it can’t be changed later), and then click Create.

Note: You might need to refresh your browser in order for your new B2C tenant subscription to appear in the azure portal.

WOOP WOOP… You have now successfully created a new Azure AD B2C Tenant all on your own. Pat yourself on the back. You did good.

If you’re interested, open up your B2C service panel in the portal and navigate to the users tab. You will notice that you are the only user registered.

Now we need a way to let your users create an account. To do that you will need to create two applications and a sign up user flow.

What is an application?

You configure an application registered with Azure AD B2C to take care of many identity management tasks. Some examples are:

• Enable a customer to sign up to use your registered application
• Enable a signed-up customer to sign in and start using your application
• Enable a signed-up customer to edit their profile
• Enable multi-factor authentication in your application
• Enable the customer to sign up and sign in with specific identity providers

If you want to learn more about what the application does (highly recommended) and why you need it have a read here: what is an application?

What is a B2C user flow (also known as B2C policy)?

Since writing this post Microsoft has kindly removed policies from B2C and replaced them with user flows. They are very similar just better named.

Each request that is sent to Azure AD B2C specifies a user flow. A user flow controls the behaviour of how your client application interacts with Azure AD B2C. It’s essentially the route a user takes.

Example:

When a user clicks the register button on a website homepage. This would be configured to trigger the sign up user flow. This user flow will then redirect the user to the sign up page provided by B2C. However if your user clicked on your login button, this would be configured to trigger a login user flow. Which then directs them to the login page (Don’t worry it will all make sense after this blog — I hope)

Step 4 (Optional) : Linking your subscription

This may not apply to you but if you have clicked into your azure B2C service pane you may notice this warning banner.

In order to fix this you need to go into your Default Directory and link up your new B2C subscription

You now need to carry out the following again:

1. Choose Create a resource in the top-left corner of the Azure portal.
2. Search for and select Active Directory B2C
3. Click create
4. This time however select
   ‘Link an existing Azure AD B2C Tenant to my Azure Subscription’

5. Complete the Azure AD linking process by linking your default subscription with your new B2C tenant subscription.

That step is a little confusing.

The reason it needs to be linked is because your default subscription is what Microsoft use to bill you on the cloud. This subscription is linked to your bank account.

Because you just created a new B2C service which had no subscription linked to it — If for example you became a big dog and built up a user base of over 50,000. Microsoft wouldn't know how to bill you and take your moneys .

Wanna know more about Microsoft subscriptions click here.

Note: Don’t worry, calm yourself. You wont be charged for anything in this tutorial, B2C is free.

So please keep following on…

Step 5: Creating application #1

1. Open up the B2C service and click Applications in the left hand blade

2. Click create

3. Configure your application in the following way.

Make sure your reply url is the url you are running your client side application on. If you are using the angular template from my first tutorial, your reply url will be http://localhost:4200/

Step 6: Creating application #2

1. Open up the B2C service and click Applications in the left hand blade

Once that application has been created you will need to go back into your first application (Sample Web App) and configure the API access.

2. Open up your first application (Sample Web App)

3. On the left hand blade select API access.

4. Click the Add button

5. On the right hand blade titles API access. Select your second application (access-api) from the dropdown

6. Click Ok

7. It should now look something like this

Creating the second application gives your first application permission to read the user signed in claims (information).

Step 7: Create your client password

Azure AD B2C uses OAuth2 authorisation for client application. Web apps are a confidential client and require a client ID or application ID and a client secret, client password, or application key.

1. Select the first application (Sample Web App)
2. Select the Keys option from the left hand blade
3. Click Generate Key
4. Click Save to display the app key

The key is displayed only once in the portal so don’t lose it.

It’s important to copy and save the key value. You need this value for configuring your client app. Keep the key secure. Don’t share the key publicly with anyone — not even your dog.

WOOP WOOP… You have now set up your B2C tenant and the B2C applications to process your auth. You’re basically nearly there. I hope you are still awake. Keep reading… it will be worth it.

Step 8: Creating the sign up user flow

1. Go back to your B2C settings panel and select User Flows from the left hand blade

2. Click new user flow

3. Select All from the menu, then click Sign Up V2

4. Give the user flow a sensible name e.g. signup

5. The identity provider will be Email SignUp

What is an identity provider?

It basically decides how your user is going to create an account. Are they going to use their generic email? or maybe they want to use Facebook, Google or LinkedIn to sign up to your client application.

If my amazing description didn’t make sense then click here. hopefully Microsoft can explain what identity providers are in a little more detail.

5. Configure the user attributes and claims. These will be the information about each user once signed up. So in order to create an account you might want each user to provide a postcode, surname, displayname, email and date of birth. These properties must therefore be selected in sign up attributes.

Why do I need to specify sign up attributes?

So when you sign up or sign into your client application using B2C. B2C will provide your client application with an access token. This access token contains all the information about your user. Without this access token you cant be confident that the person looking at your client application, browsing your pages is authenticated .

Still confused?

The user logs into your client application, fills in the login form and successfully redirects to the Homepage. Your client Application homepage has a ‘Welcome (name of the person who’s just logged in)’ on the home page.

How does your client application get the name of the person who’s just logged in? Where is it getting this information from?

It uses the access token.

So if you wanted your client application to display the users surname, postcode and date of birth on a My Details page for example. You must select those attributes in the Sign Up attributes section

Have a read about Access Tokens... it will be useful (click here)

6. Once you have set up your user flow click create and your user flow will appear in the B2C settings panel.

Step 9: Testing your sign up user flow

1. Select your user flow from the B2C settings panel.

Notice how the application used will be application #1. The reply url should be the reply url of your client application (make sure its running).

2. Click run now and fill in the form provided

3. Once you complete the sign up form successfully you will be directly to your application.

You should have just created a user in your B2C tenant. You can check this by going back into your B2C Settings pane and selecting users.

Step 10: Create and test your sign in user flow

So just to recap you should now have a B2C tenant up and running, which has two applications and one sign up user flow to allow users to create accounts.

All you need to do now is create a sign in user flow which will let your users… you guessed it…. sign in to your application.

1. Go back into your B2C panel and select user flows
2. Click new user flow
3. Name your user flow something sensible e.g. sign in
4. The identity provider will be Email SignUp
5. IMPORTANT : Your application claims should match that of your sign up user flow
6. Click create
7. Your user flow should now appear in the B2C settings panel
8. Select your user flow and click run user flow

Recap

So…

You’ve just been bombarded with a lot of information so I’ll try and recap it all in a few bullet points.

• Azure B2C is a service that lets you manage user accounts on your client application
• Azure B2C is free to use until you amass a user base of over 50,000
• In order to create an Azure B2C service you need to remember to link up your default billing subscription
• Once your B2C service is set up you need to create your applications which will look after all your identity management tasks
• You then need to create the user flows for you client application
• User flows determine the route a user can take when navigating your application e.g. Sign up user flow is the route a user takes when signing up to your application

Conclusion

You should now have a fully functioning azure B2C service which lets your users sign up and sign into their accounts.

In the next post we will be integrating your B2C service into your Angular 6 application using MSAL.

If you liked this article please gimme a clap, it makes my day that little bit better.