You are currently viewing Facebook Identity Provider with Azure AD B2C

Facebook Identity Provider with Azure AD B2C

Azure AD B2C can support variety of identity providers, which can authenticate users. Suppose you have Angular application which calls the Web APIs and both are protected using Azure AD B2C. Let’s see how to configure Facebook social login with this web application.

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:

If you followed all the steps, you will have a complete setup of protected angular application calling protected APIs. Users can sign in to this application with default Email sign up identity provider or Google identity provider.

Facebook for Developers

We will need Facebook account for logging in the Facebook for Developers. Facebook for Developers offers set of services (e.g. login, analytics, etc), that can be used with our business applications.

 If you don’t already have a Facebook account, you can sign up at https://www.facebook.com/.

Sign in to Facebook for developers with your Facebook account credentials and a screen like below will be shown. Accept the terms and then click on Next button.

Facebook for Developers

Next step, the system will ask to validate the account. The account can be validated by using phone number, or it can also be validated by providing the credit card details.

Below screen shows the verification screen using phone number. Once we enter valid phone number, a text message will be sent on that number. The confirmation code from that text message can be entered in the last text box to complete the verification.

Facebook for Developers – Verify Account

If you are logging in for the first time, the below screen will be shown to ask about your role. I selected Developer to proceed ahead.

Facebook for developers – Select your role

First Facebook App

Facebook services can be used only through the Facebook applications. Next, the system will show screen to create the application.

Facebook for developers – Create first application

To continue, we will have to create an application in Facebook. Let’s enter some display name for this application and the contact email as shown in below snapshot and then click on Create App ID.

Facebook for Developers – Creating the application

Facebook App Settings

Now, select the Settings from left navigation and then select Basic, a new panel as shown below will open. Choose a Category, for example Business and Pages. This value is required by Facebook, but not used for Azure AD B2C.

Facebook for Developers – Basic Settings

At the bottom of the page, select Add Platform, and then select Website.

Facebook for developers – Add a platform

In Site URL, enter  https://samplead.b2clogin.com/  replacing samplead with the name of our tenant.

Enter a URL for the Privacy Policy URL, for example  http://www.contoso.com. The policy URL is a page you maintain to provide privacy information for your application. Then hit Save Changes button.

Please note that this input is necessary to make this application live.

Facebook for Developers – Website URL

At the top of the page, copy the value of App ID.

Select Show and copy the value of App Secret. You use both of them to configure Facebook as an identity provider in your tenant. App Secret is an important security credential.

No need to Save now as we have not made any modifications.

Facebook for Developers – App ID and App Secret

Add Facebook Login

Now, lets click on the plus sign near the Products option from left navigation. Select Facebook login from the products collection and click on Setup.

In Valid OAuth redirect URIs, enter  https://samplead.b2clogin.com/samplead.onmicrosoft.com/oauth2/authresp. Replace samplead with the name of your tenant. Select Save Changes at the bottom of the page.

Facebook for Developers – Add Facebook Login

Make it Live

On the top navigation, you can find the “In Development” toggle button. Switch it on to make this Facebook application live. By live, it means the application will be available to Azure AD B2C.

The toggle will show a popup as shown below. Hit Switch mode button on it.

And our fist Facebook App is live.

Facebook for Developers – Make it Five

Azure Portal

Two important things are required to be done in Azure Portal:

  • Configure Facebook identity provider in Azure AD B2C tenant
  • Update user flow to use the Facebook identity provider.

So, login to Azure Portal and make sure we have selected appropriate Azure AD B2C tenant. Then search for “Azure AD B2C” in the search box in top navigation bar.

Configure Facebook Provider

On the newly opened panel, select Identity Providers from left navigation. On the identity providers screen, many commonly used providers are listed. We can also add a new Open ID Connect provider by using the plus button above the identity providers list.

Select Facebook from the list and it should open new configuration panel on right.

On new panel, enter below details:

  • Name, this name will be displayed on the button on Sign in page
  • Client ID, paste the App ID value copied from the Facebook App
  • Client Secret, paste the App Secret value from the Facebook App

Then hit the Save button to save the configurations.

Azure Portal – Update Identity Provider

Update User Flow

On User flows, select the Sign up and Sign in user flow which we already have created. It will open the Edit user flow panel. On this panel, go to identity providers collection and select the newly added Facebook provider.

Azure Portal – Update User Flow

Application Configurations

Make sure that the user flow where we have added Facebook provider is used in the API configurations and Angular web app configurations.

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, users can see 3 options

  • Login with username and password
  • Google Login
  • Facebook Login

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 Facebook 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.

Azure AD B2C Login Screen

I hope this information was useful and you enjoyed the article. Let me know your thoughts.

Leave a Reply