In last article, we have seen how to setup the federation between Google and Azure AD B2B. In this article, let’s have a look at how to setup federation with Facebook login.
Prerequisites
We can quickly create a test application, lets say angular application which calls the web API, both secured by Azure AD.
Refer my previous blog for detailed steps on this.
Facebook for Developers
Sign in to Facebook for developers with your Facebook account credentials.
If you have not already done so, you need to register as a Facebook developer. To do this, select Get Started on the upper-right corner of the page, accept Facebook’s policies, and complete the registration steps.
Create App
Click on My Apps available on top right corner, you can see list of available apps. Let’s create a new app by clicking on Create App.
On Create App screen, enter a valid Display name for the App (e.g. B2B Federation
) and Contact Email and then hit Create App ID.
App Settings
After creation, the App will open. Select Settings -> Basic from the left navigation. Select some Category on the settings screen. This value is not used by Azure AD. I have set Category to Business and Pages
.
Also enter some value for Privacy Policy URL input (e.g. https://www.contoso.com
). This is for the page where you maintain privacy information for your application.
At the bottom, click on Add Platform button and select Website from the popup.
This selection will add Site URL input on this form. Enter https://login.microsoftonline.com.
Then click on Save Changes. This will save all the settings which have been modified on this page.
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://login.microsoftonline.com/te/<tenant-id>/oauth2/authresp
. Replace <tenant-id>
with the directory ID
(aka tenant ID
) of your tenant. Select Save Changes at the bottom of the page.
Copy App ID and App Secret
Now from the Settings -> Basic panel, copy the App ID and App Secret values and keep them with you. These two values would be required while configuring Facebook provider in the Azure Portal.
Make App 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.
The toggle will show a popup as shown below. Hit Switch mode button on it. And our B2B Federation
Facebook App is live.
Azure AD Configurations
Login to Azure Portal and go to the Azure Active Directory B2B tenant.
Unlike Google provider, the Facebook provider needs the self service sign up enabled on Azure AD. We cannot invite the Facebook users, they need to signup instead.
Enable Self Service Signup
Go to External Identities and select External collaboration settings option. On this screen, turn the toggle on for Enable guest self-service sign up via user flows (Preview). Then click on Save button to save the changes.
Add Facebook Provider
Then select External identities option from left navigation and then click on All identity providers. Select Facebook option and a new panel will open on right side.
On this new panel, enter the App ID
and App Secret
values copied from the Facebook for Developers.
Create User Flow
Then click on User flows from left navigation and then New user flow.
Provide name for the user flow and select the identity providers. The Azure AD Provider is already selected and disabled. I have configured both Google and Facebook providers in my Azure AD, so I am checking both of them.
Then select the user attributes to be collected on Sign up. Then click on Create button.
Application Assignment
After user flow is created, the applications can be assigned to it by opening the user flow. Then click on Applications and Add application. On new screen, select the application (web app and API, one at a time) which should be used for test.
No Need to Invite User
Because we have enabled sign up flow, the external users does not need to be invited.
Run and Verify
When external user tries to access application URI, the user will be redirected to Azure AD’s sign in page. On that page, there is link for sign in options. If user clicks on that link, users can see options to sign in via Facebook.
User can enter the credentials. If user is signing in for first time, the Azure AD’s sign up page will be shown. This sign up page will ask the user attributes which we have checked while creating the user flow.
The Facebook user can then provide consent and continue to the application.
The whole flow is shown on below slide.
I hope you enjoyed this article. Let me know your thoughts.