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:
- 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
- Optionally, Google Identity Provider with Azure AD B2C
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.
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.
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.
First Facebook App
Facebook services can be used only through the Facebook applications. Next, the system will show screen to create the 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 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.
At the bottom of the page, select Add Platform, and then select Website.
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.
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.
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.
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.
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 IDvalue 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.
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.
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.
I hope this information was useful and you enjoyed the article. Let me know your thoughts.
