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.
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.
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.
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
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.
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.
- Authorized domains, enter b2clogin.com and press enter.
Then click on Save button.
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
- Name, name of OAuth 2.0 client
- Authorized redirect URIs, set this to
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.
Now, login to Azure Portal and search “
Azure AD B2C” in the search box given in top navigation.
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.
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
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.
In API configurations, make sure that B2C_1_SignUpSignInMFA is being used. Full configuration file should be as below:
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.
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.