Practical Azure: Azure AD B2C and Angular

Practical Azure: Azure AD B2C and Angular

The objective of this post is to give the readers a practical understanding of Azure AD B2C by authenticating an Angular application using B2C.

The objective of this post is to give the readers a practical understanding of Azure AD B2C by authenticating an Angular application using B2C.

Image for post

Getting Started

Let’s say we are developing a single page web application and decide to add authentication support to the application. After some research, we found that there are multiple ways to do this:

  1. We can collect and store user credentials in our database and validate users against it. Here, it's our job to secure and scale our database.
  2. Outsource the authentication part of our app to a third-party identity provider like Azure Active Directory or Amazon Cognito and focus on our application rather than the authentication complexity.

Based on the complexity of authentication, we decided to go with the second option and choose Azure Active Directory as our identity provider. But when we start reading more about Azure Active Directory, we were confused to find that they offer three providers?

Image for post

What is Active Directory?

Active Directory is the directory service provided by Microsoft that helps to organize your company’s users, computers, and more. Think of an active directory as the “contacts” app on your mobile device. Your individual contacts would be the “objects”, and their address, email, and phone information for each contact would be the “values” in your active directory. The “objects” aren’t just limited to people and users, they can also contain “group objects” such as computers, printers, and so forth.

Azure AD (Azure Active Directory)

Azure AD is a directory service with the goal of serving organizations and their needs for identity management in the cloud. You develop against Azure AD, you can secure your applications with it — their users in Azure AD tenants can use it. Your application is targeted for a specific organization or multiple organizations using Azure AD (Office 365). In a nutshell, it allows organizations to grant access to their applications and services for users within their organization.

Azure AD B2B (Business 2 Business)

This allows organizations to grant access to their applications and services for users from other tenants. From your app perspective, nothing changes; it’s still the same Azure AD app. Azure AD B2B has an API that can be used to create flows for the invitation of users from another directory but is not changing your app design, etc.

Azure AD B2C (Business 2 Consumers)

Azure AD B2C is another service built on the same technology but is not the same in functionality as Azure AD. Azure AD B2C’s goal is to build a directory for consumer applications where users can register with e-mail ID or social providers like Google, FB, MSA, known as “Federation Gateway”. The goal for Azure AD B2C is to allow organizations to manage a single directory of customer identities shared among all applications (i.e. single sign-on). The advantage here is that users can use their local accounts or social accounts for identity purposes.

If you are still confused check this out.

Since we want our web application to be targeting consumers and allowing them to log in to the application using their email address or any social identity providers, we chose B2C as our identity provider. Now, with some decisions made, let’s configure our B2C.

Create an Azure AD B2C Tenant

Login to Azure portal -> (+) Resource -> search B2C

Image for post

Image for post

Now we have created our B2C Tenant, but we need to link this tenant to a subscription (that's how Microsoft can charge us).

  • Login to Azure Portal
  • Add resource and select B2C, click “Create”, and choose “Link an existing Azure AD B2C tenant to my Azure subscription”.

Image for post

Now choose the tenant we created earlier and associate it with your subscription.

Image for post

Now we have linked our tenant to a subscription and resource group. Let’s create some basic user flows.

Please note: Tenant and directory are used interchangeably. Both denote your active directory in the cloud.

Now if you check your directories you can see the new active directory created for you. In my case, there are three directories.

Image for post

Now with our B2C tenant ready, let’s go to our second step of creating user flows.

Image for post

Step 2: Create a sign-in, sign-up, and password reset user flows.

User Flows

Azure AD B2C Tenant can be considered to be like a user-pool and multiple applications can be registered in this tenant. We can create a standard user flow that all apps can share, or we can create an individual user flow for each app. Each request sent to Azure AD B2C specifies a user flow. A user flow controls the behavior of how your client application interacts with Azure AD B2C. It’s essentially the route a user takes.

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 sign-in page).

Let us start with sign-in, sign-up user flow. Ensure that you are in the newly created directory before starting this. Go to the user flows tab and click new user flow.

Image for post

In our Angular application, we are interested in providing user flows for sign-in, sign-up, and password reset.

Image for post

At first, we are going with the sign-up and sign in.

Image for post

Image for post

We are only collecting the display name attribute and returning that in the token claim. It's very easy to add custom attributes too.

Image for post

Now we are done with our sign up, let’s sign in to user flows. B2C will create the UI based on our user attributes and present it to the user.

Create a password reset user flow

Image for post

Image for post

We are not collecting nor returning claims during this flow. Now our user flows are ready. These user flows are specific to the tenant and any applications registered in this tenant can use this user flow. Please take note of the user flow names.

Image for post

Customizing the user flow dialog

You can easily add branding to your user flow. Go to the B2C directory and select “Company Branding”. Then you can supply a background image, your companies banner logo (280 X 80), and a background color.

Image for post

Once saved, go and select the user flow and select the latest page layout version.

Image for post

Now we have our B2C Tenant configured, linked, and have some basic user flows. It's time to register the application.

Image for post

Step 3: Register and configure web application in the tenant

Now in the Azure portal switch your directory to the newly created one.

Image for post

Now click the App registrations -> New.

Image for post

Redirect URI: I provided the URI of my local angular application.

Image for post

Now go to the authentication tab and select the Id and Access Token. Since this is a SPA application, we will be carrying out an implicit flow where we will have to retrieve both tokens from the Javascript.

Image for post

Now go to the API Permission tab. You can see that — by default — this application has permission to access a couple of Micrograph APIs. Ensure to grant admin consent for accounts in JitBox, as this means that your application has an implicit grant to access these API’s and no consent dialog will appear.

Image for post

At this moment we are not exposing any APIs or setting any new policies. We will do that later. Your app can now choose the identity providers it needs to support. In my case, I am sticking with the email option.

angular azure developer

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

How long does it take to develop/build an app?

This article covers A-Z about the mobile and web app development process and answers your question on how long does it take to develop/build an app.

Developer Career Path: To Become a Team Lead or Stay a Developer?

For a developer, becoming a team leader can be a trap or open up opportunities for creating software. Two years ago, when I was a developer, ... by Oleg Sklyarov, Fullstack Developer at Skyeng company

AngularJS App Development Company in USA&India |Hire Angular Developers

Biz4Solutions is a leading AngularJS App development company in USA & India and provides apps to the client with our expert team of Angular developers

Install Angular - Angular Environment Setup Process

Install Angular in easy step by step process. Firstly Install Node.js & npm, then Install Angular CLI, Create workspace and Deploy your App.

The Good and Bad of Angular Development

Today, we will gather some necessary information about Angular and know its pros and cons that can help you in deciding whether to use this framework for your next project or not.