Search Results :

×

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.


Pre-requisite: Download and Installation 


  • Download the module:
    Composer require 'drupal/miniorange_oauth_client'
  • Navigate to Extend menu on your Drupal admin console and search for miniOrange OAuth Client Configuration using the search box.
  • Enable the module by checking the checkbox and click on the Install button.
  • You can configure the module at:
    {BaseURL}/admin/config/people/miniorange_oauth_client/config_clc
  • Install the module:
    drush en drupal/miniorange_oauth_client
  • Clear the cache:
     drush cr
  • You can configure the module at:
    {BaseURL}/admin/config/people/miniorange_oauth_client/config_clc
  • Navigate to Extend menu on your Drupal admin console and click on Install new module.
  • Install the Drupal OAuth & OpenID Connect Login - OAuth2 Client SSO Login module either by downloading the zip or from the URL of the package (tar/zip).
  • Click on Enable newly added modules.
  • Enable this module by checking the checkbox and click on install button.
  • You can configure the module at:
    {BaseURL}/admin/config/people/miniorange_oauth_client/config_clc

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.
  • Drupal OAuth Client - Configuration tab and select miniorange oauth client module
  • 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
  • Drupal OAuth Client - Configure OAuth tab Select Facebook and copy the Callback URL

2. Configure SSO Application in Facebook

  • First of all, Login/ Signup in Facebook developer console at https://developers.facebook.com/
  • Drupal OAuth/OpenID/OIDC Single Sign On (SSO) Facebook SSO developer console
  • Go to My apps .
  • Facebook SSO add new app
  • Select "Which use case do you want to add your app?" from Create an App panel then click on Next button.
  • Facebook SSO create new app - Which use case do you want to add app?
  • 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.)
  • Facebook SSO create new app - What do you need your app do?
  • 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.
  • Drupal OAuth/OpenID/OIDC Single Sign On (SSO) Facebook SSO create new app
  • In the Add product to your app screen, click on the Set up button in the Facebook Login card.
  • Facebook SSO - Add product to your app
  • Navigate to PRODUCT from the left side.
  • Click on the Settings under Facebook Login.
  • Facebook - Click on 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.

    Facebook - Paste copied callback into valid oauth redirect uris field
  • From the left side menu, click on Settings and then Basic.
  • Facebook SSO login - from left side click on settings 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.
  •  Facebook SSO Login
  • You can switch the App Mode from Development to live by clicking on toggle button.
  • Change App mode as Development in facebook

3. Integrating Drupal with Facebook

  • Go to the Facebook Development App.
  • Copy the App ID from Basic under Settings tab.
  • Facebook SSO login Copy App ID
  • In Drupal’s Configure OAuth tab paste the copied App ID into the Client ID text field.
  • Drupal OAuth Client - Paste App ID into CLient ID
  • From the left side Basic tab, click on Show button then copy the App secret .
  • Facebook Login - 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.
  • Drupal OAuth Client - Paste App secret into CLient Secret
  • 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.
  • Facebook sso login with drupal OAuth OpenID Single Single On test Configuration
  • 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.
  • Facebook sso login with drupal OAuth OpenID Single Single On test Configuration successfully
  • 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.
  • Facebook sso login with drupal OAuth OpenID Single Single On Select Username Attribut

    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 :
  • Facebook sso login with drupal OAuth OpenID Single Single On

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

Our Other modules

Hello there!

Need Help? We are right here!

support
Contact miniOrange Support
success

Thanks for your inquiry.

If you dont hear from us within 24 hours, please feel free to send a follow up email to info@xecurify.com