Azure AD B2C can be used for authenticating the user identity. Azure AD B2C has concept of identity providers. The identity providers are used for validating the user identities.

Azure AD B2C supports almost all of the well known identity providers (e.g. facebook, google, linkedin, twitter, amazon, GitHub, etc). These identity providers can be enabled on Azure AD B2C instance level.

The sign up and sign in policies are defined in the form of user flows. The identity providers can be configured during creation of user flows.

Let’s see how Google identity provider can be enabled.

Prerequisites

For following all steps in this article, we will need Azure Subscription. If you don’t have an Azure subscription, create a free account before you begin.

We will also need instance of Azure AD B2C instance. We will also need API and Angular App already registered in that instance.

Below is the list of those posts which explains all the steps to get there:

• Create Azure AD B2C instance
• Create user flows in Azure AD B2C
• Protecting Web API using Azure Azure AD B2C and MSAL
• Protecting Angular Web Application using Azure AD B2C and MSAL
• Angular App with Protected Web APIs using MSAL
• Optionally, Azure AD B2C – Enable Multi Factor Authentication

If you followed all the steps, you will have a complete setup of protected angular application calling protected APIs.

Google Developer Console

Almost everyone of us might already have a google account which we use to access common google services e.g. gmail, google drive, youtube, etc.

If you don’t already have a Google account you can sign up at https://accounts.google.com/SignUp.

We will have to enable the google developer account. You can enable it using any of your google account. If you want to create a separate account for the development activities, you can create a new account and then follow next steps.

Google OAuth Client Creation

Sign in to the Google Developers Console with your Google account credentials. After sign in, a popup will be displayed asking to agree the terms of service. Check the first check box to agree the terms and then click on Agree and Continue button.

Create Project

We have just created the dev console account. So, there will be no project existing. As soon as we login to dev console, an empty dashboard will be shown.

On dashboard, you can click on New Project. On new project popup, enter the project name (e.g. First Project) and then click on Create button.

OAuth Consent Screen

Once the project is created, the project will open. From the left side navigation, select OAuth Consent screen. As we are working on consumer application, we will have to select External option and then click on Create.

Once the screen is created, a new form will open. This form will ask various inputs, two of them we intend to fill for this demo:

• Name, display name for the application. e.g. first application
• Authorized domains, enter b2clogin.com and press enter.

Then click on Save button.

Credentials

Now, click on the Credentials option from the left side navigation. On the new panel, select the OAuth client ID option from dropdown as shown in below snapshot. It will show panel to create new credentials.

On the new panel, we need to specify below inputs:

• Application Type, select this to be Web Application
• Name, name of OAuth 2.0 client
• Authorized JavaScript origins, set this to https://your-tenant.b2clogin.com.
• Authorized redirect URIs, set this to https://your-tenant.b2clogin.com/your-tenant.onmicrosoft.com/oauth2/authresp.

Even if azure AD B2C tenant name has some upper case letters, make sure to specify tenant name in small letters only.

After entering these details, click on Create button. The system will show a popup with options to copy Client ID and Client Secret. Copy them and keep them in safe place. We will need these while configuring identity provider in Azure.

Azure Portal

Now, login to Azure Portal and search “Azure AD B2C” in the search box given in top navigation.

Identity Providers

From Azure AD B2C panel, select Identity providers and then Google.

Below inputs are required:

• Name, this is the display name of identity provider. This is the name which will be displayed on the login screen.
• Client ID, copied from the Google OAuth client credentials
• Client Secret, copied from the Google OAuth client credentials

After inputting this information, hit Save button.

User Flows

Now, select User Flows. From this point, if we don’t have any user flow, we can create one. Please refer my previous blog post on how to create a user flow and test it using https://jwt.ms application.

If you have followed all the steps in prerequisites, then you will have an angular web app and web API both using a user flow with name B2C_1_SignUpSignInMFA.

Let’s open this existing flow and edit the identity provider settings. Enable the newly added Google provider and hit the Save button.

API Configurations

In API configurations, make sure that B2C_1_SignUpSignInMFA is being used. Full configuration file should be as below:

Angular Configurations

Similarly in Angular application too, make sure that B2C_1_SignUpSignInMFA is being used. The app-config.ts should be as shown below,

Run and Verify

Now, if you run application, and hit the login button, the users will be redirected to login screen. And on login screen, we can see a new social login button with text “Google”. This is the name we provided in Google identity provider configuration.

Click on Google sign in button will redirect user to Google authority and user can enter Google account details (e.g. someone@gmail.com).

If user is signing in for the very first time, then user will be redirected to the Azure Sign up page after successful validation of google credentials. User can confirm the details and then continue to the application.

If you click on Fetch Data menu option from the Angular application’s top navigation menu, the application should be able to receive data from the API.

I hope you enjoyed this article. Let me know your thoughts.