Integration of Facebook SSO Login with OAuth Client | Drupal Facebook Login

Drupal Facebook SSO integration will allow you to configure Single Sign-On ( SSO ) login between your Drupal site and Facebook using OAuth/OpenID protocol. Drupal OAuth 2.0/OpenID connect module gives the ability to enable login using OAuth 2.0/OIDC Single Sign-On to Drupal Site. We provide the Drupal OAuth/OpenID Client module for Drupal 7, Drupal 8, Drupal 9 and Drupal 10.
Here we will go through a guide to configure the SSO login between Drupal and Facebook. By following these steps, users of Facebook will be able to log into the Drupal site using their Facebook credentials.

If you have any queries or if you need any sort of assistance in configuring the module, you can contact us at drupalsupport@xecurify.com. If you want, we can also schedule an online meeting to help you configure the Drupal OAuth & OpenID Connect Login – OAuth2 Client SSO Login module.

How to integrate Facebook Single Sign-on with Drupal OAuth/OpenID Client

1. Setup Drupal as OAuth Client

• After installing the module, go to the Configuration tab and click on miniOrange OAuth Client Configuration module link.

• In the Configure OAuth tab, select Facebook from the Select Application dropdown list.
• Copy the Callback/Redirect URL and keep it handy.
• Enter the application name in the Display Name text field. For example, Facebook

2. Configure SSO Application in Facebook

• First of all, Login/ Signup in Facebook developer console at https://developers.facebook.com/

• Go to My apps .

• Select "Which use case do you want to add your app?" from Create an App panel then click on Next button.

• Select "What do you need your app to do?" from Create an App and click on Next button. (The app type can't be changed after your app is created.)

• In the next screen, enter the name of application in Add an app name text field.
• Then, click on Create app button and enter your Facebook password.

• In the Add product to your app screen, click on the Set up button in the Facebook Login card.

• Navigate to PRODUCT from the left side.
• Click on the Settings under Facebook Login.

• Paste the previously copied Callback/Redirect URL into the Valid OAuth Redirect URIs text field. Then, click on Save changes button.

Please Note: If your provider only supports HTTPS Callback/Redirect URL and you have an HTTP site, just save your base site URL in the Sign In Settings tab with HTTPS.


• From the left side menu, click on Settings and then Basic.

• In the Privacy Policy URL text field, enter your Policy URL.
• Next, select the Data deletion instructions URL from the User data deletion dropdown list.
• Select the Category from the dropdown. (The Category will define the type of apps that our users will build.)
• Click on Save changes button.

• You can switch the App Mode from Development to live by clicking on toggle button.

3. Integrating Drupal with Facebook

• Go to the Facebook Development App.
• Copy the App ID from Basic under Settings tab.

• In Drupal’s Configure OAuth tab paste the copied App ID into the Client ID text field.

• From the left side Basic tab, click on Show button then copy the App secret .

• In Drupal’s Configure OAuth tab paste the copied App secret into the Client Secret text field.
• Check the Scope and Endpoints then click on Save Configuration button.

• You can find the Facebook App Scope and Endpoints in the table below:

Scope:	public_profile email
Authorize Endpoint:	https://www.facebook.com/dialog/oauth
Access Token Endpoint:	https://graph.facebook.com/v2.8/oauth/access_token
Get User Info Endpoint:	https://graph.facebook.com/me/?fields=id,name,email,age_range,first_name,gender,last_name,link

4. Test Configuration of Drupal with Facebook

• After successfully saving the configurations, click on the Perform Test Configuration button to test the connection between Drupal and Facebook.

• On a Test Configuration popup, if you don't have any active sessions on the same browser, you will be requested to login into the Facebook. After successfully logging into the Facebook, you will be provided a list of attributes received from the Facebook.
• Select the Email Attribute from the dropdown menu in which the user's email ID is obtained and click on the Done button.

• Once clicked on Done button, you will be redirected to the Attribute & Role Mapping tab, in which you can select the Username Attribute from the dropdown list and click on Save Configuration button.


Please note: Mapping the Email Attribute is mandatory for your login to work.

• Now log out and go to your Drupal site’s login page. You will automatically find a Login with Facebook link there. If you want to add the SSO link to other pages as well, please follow the steps given in the image below :

---

24*7 Active Support

If you face any issues or if you have any questions, please feel free to reach out to us at drupalsupport@xecurify.com. In case you want some additional features to be included in the module, please get in touch with us, and we can get that custom-made for you. Also, If you want, we can also schedule an online meeting to help you configure the Drupal OAuth/OpenID Single Sign On module.

Additional Resources

• What is OAuth 2.0?
• What is OpenID Connect?
• What is OAuth 2.0 Authorization Code Grant?
• What is OAuth 2.0 Impicit Grant?
• What is OAuth 2.0 Password Grant?
• Frequently Asked Questions (FAQs)

Our Other modules