Search Results :

×

SSO Login into Drupal using Facebook as OAuth / OpenID Connect Provider


Drupal OAuth/OpenID Connect SSO integration enables SSO between the Drupal site and Facebook. This setup guide helps in configuring Single Sign-On (SSO) between the Drupal site and Facebook using the OAuth/OpenID Connect module. When you incorporate the OAuth/OpenID Connect module with the Drupal site, you can log into the Drupal site seamlessly with Facebook credentials. This module is compatible with Drupal 7, Drupal 8, Drupal 9, and Drupal 10.

Installation Steps:


  • 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

Set up Drupal as OAuth Client:

  • After installing the module, navigate to the Configuration -> miniOrange OAuth Client Configuration -> Configure OAuth tab.
  • Drupal OAuth Client - Configuration tab and select miniorange oauth client module
  • Select Facebook from the Select Application drop-down.
  • Copy the Callback/Redirect URL and keep it handy.
  • Note: If your provider only supports HTTPS Callback/Redirect URLs and you have an HTTP site, please make sure to enable the 'Enforce HTTPS Callback URL' checkbox at the bottom of the tab.

  • Enter a Display Name of your choice, such as Facebook.
  • Drupal OAuth Client - Configure OAuth tab Select Facebook and copy the Callback URL

Create OAuth SSO Application in Facebook (Meta):

  • Sign in or sign up at the Facebook Developer console and go to the My Apps.
  • Drupal OAuth/OpenID/OIDC Single Sign On (SSO) Facebook SSO developer console
  • Navigate to the All Apps section and click on the Create App button to build a new OAuth application.
  • Facebook SSO add new app
  • Select the option as your need to create an App and click on the Next button.
  • Facebook SSO create new app - Which use case do you want to add app?
  • Select an app type and click the Next button. (After your app is built, the app type cannot be changed.)
  • Facebook SSO create new app - What do you need your app do?
  • In the Details section, enter the Application name in the Add an app name text field and the App contact email (the default is your Facebook account email), then click the Create app button.
  • Drupal OAuth/OpenID/OIDC Single Sign On (SSO) Facebook SSO  - Provide required details
  • After clicking the Create app button, a dialogue box will display. For your security, you must re-enter your password and click on Submit.
  • Facebook SSO - Enter Password to verify your identity
  • In the Add product to your app section, click on the Set up button of the Facebook Login card.
  • Facebook SSO - Add product to your app
  • Navigate to the Products -> Facebook Login -> Settings from the left navigation panel.
  • Facebook - Click on Settings under Facebook Login
  • Go to the Client OAuth Settings and paste the Callback/Redirect URL into the Valid OAuth Redirect URIs text field.

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

  • Facebook - Paste copied callback into valid oauth redirect uris field
  • Click on Save changes button.
  • Navigate to Settings -> Basic from the left navigation panel.
  • Facebook SSO login - from left side click on settings then basic

Integrating Drupal with Facebook:

  • Navigate to Facebook's developer console.
  • Copy the App ID.
  • Click on the Show button of the App secret and copy the App secret.
  • Facebook SSO login Copy App ID and App secret
  • Go to Drupal's Configure OAuth tab and paste the copied App ID and App Secret into the Client ID and Client Secret text fields respectively.
  • Facebook Login - Paste the copied App ID and App secret into respective fields
  • Check the Scope and Endpoints, and then click on the Save Configuration button.
  • Drupal OAuth Client - verify Scope and Endpoints then click Save Configuration button

You can also refer to the Facebook Endpoints and scope from 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

Test connection between Drupal and Facebook:

  • Click the Perform Test Configuration button to check the OAuth SSO connection between Drupal and Facebook (Meta).
  • Facebook sso login with drupal OAuth OpenID Single Single On test Configuration
  • On a Test Configuration popup, if you don't have any active session in Facebook on the same browser, you will be asked to log into the Facebook account. Once you are successfully logged into the Facebook account, you will be provided with a list of the attributes that are received from 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
  • After clicking on the Done button, you will be redirected to the Attribute & Role Mapping tab. Here, you can also choose the Username Attribute from the dropdown and click on the 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 Single Sign-On.

Congratulations! You have successfully configured Facebook (Meta) as OAuth/OpenID Provider and Drupal as an OAuth Client.

How to perform the SSO?

  • Now, open a new browser/private window and go to your Drupal site login page.
  • Click on the Login using the Facebook link to initiate the SSO from Drupal.
  • If you want to add the SSO link to other pages as well, please follow the steps given in the image below:
  • Drupal OAuth OpenID Single Single-On - Add login link into different page of the Drupal site

Need Assistance?

If you face any issues during the configuration or if you want some additional features, please contact us at drupalsupport@xecurify.com.

Additional Features:

Troubleshooting:

Getting error: ‘Username not received. Check your Attribute Mapping configuration.’ OR Getting Error: ‘Email not received. Check your Attribute Mapping configuration.’
 

Follow the steps mentioned HERE

I am getting “Client Credentials were not found in the headers or body” when I try to perform test configuration
 

Follow the steps mentioned HERE

After I click on the logout in Drupal, it sends me back to the Drupal homepage. However, when I try to login with other user, it doesn’t ask me to login but automatically logs me in with same user
 

The logout functionality you’ve mentioned here is the default behavior of a module. It’s logging you out of Drupal but not from your Application/Provider. To allow the module to logout from your provider/application account (what you are looking for), you need to make the below configurations: [know more]

I purchased the paid Drupal module and replaced it with the free module, but still I am not able to use paid features.
 

As you have upgraded to one of our paid versions of the Drupal module and replaced the free module with the paid one, you must first activate the paid module. Please refer to the below steps. [Know more]

Frequently Asked Questions (FAQ)
 

[Know more]

 Case Studies
miniOrange has successfully catered to the use cases of 400+ trusted customers with its highly flexible/customizable Drupal solutions. Feel free to check out some of our unique case studies using this link.
 Other Solutions
Feel free to explore other Drupal solutions that we offer here. The popular solutions used by our trusted customers include Two Factor Authentication - 2FA, Website Security, REST & JSON API Authentication, User Provisioning and Sync. 
  24*7 Active Support
The Drupal developers at miniOrange offer quick and active support for your queries. We can assist you from choosing the best solution for your use case to deploying and maintaining the solution.
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