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, and Drupal 9.
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.

Features and Pricing

Know more about Drupal OAuth/OpenID Single Sign On from here.

Pre-requisites: Download

You can download the Drupal OAuth/OpenID Single Sign On module from here.

Steps to configure Facebook Single Sign-on ( SSO ) login integration with Drupal OAuth / OpenID Providers:

1. Setup Drupal as OAuth Client

  • Login in your Drupal site’s admin console and click on Extend from the top navigation bar.
  • Select the Install new module option to install a new module on your Drupal site.
  • Drupal OAuth & OpenID Connect - Click on Install new module
  • Upload the downloaded zip file of the Module and click on the Install button to continue.
  • Drupal OAuth & OpenID Connect - Click on Upload
  • Select Enable newly added modules.
  • Drupal OAuth & OpenID Connect - Click Enable newly added modules
  • Scroll down till you find miniOrange OAuth Client. Click on the checkbox next to it and click on the Install button to enable the module.
  • Drupal OAuth & OpenID Connect - Scroll down to find miniOrange OAuth Client and enable the module
  • Click on Configuration from the top navigation bar and Select Drupal OAuth Client Configuration.
  • Drupal OAuth & OpenID Connect - Click on Configuration and select Drupal OAuth Client Configuration
  • In the Configure OAuth tab, select Facebook from the Select Application dropdown.
  • Drupal OAuth & OpenID Connect - In Configure OAuth tab , Select keycloak from Select Application dropdown
  • Copy the callback URL from the Callback / Redirect URL text field and keep it handy.
  • Drupal OAuth & OpenID Connect - In Configure OAuth tab, Copy the callback URL from Callback/Redirect URL

    Please note: A few of the popular service providers like Azure AD, Azure B2C, Facebook etc. support only HTTPS Callback URL (However, HTTP URL will work in the case of localhost). So, currently, if your site is HTTP, you can change it to HTTPS by following the steps listed down below :

  • Go to the Sign In Settings tab.
  • In the Base /Site URL text field, enter your Drupal site’s base/root URL with HTTPS ( For eg. if your site is http://abc.com, you will need to save this value: https://abc.com ).
  • Click on the Update button.
  • Drupal OAuth & OpenID Connect - base 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 .
  • Drupal OAuth/OpenID/OIDC Single Sign On (SSO) Facebook SSO add new app
  • Click on Create app to create a new app.
  • Drupal OAuth/OpenID/OIDC Single Sign On (SSO) Facebook SSO create new app
  • Select what your app is going to work for.
  • Drupal OAuth/OpenID/OIDC Single Sign On (SSO) Facebook SSO select app
  • Enter the required details and click on create app.
  • Drupal OAuth/OpenID/OIDC Single Sign On (SSO) Facebook SSO fill details
  • Complete the security check and click on Submit button.
  • Drupal OAuth/OpenID/OIDC Single Sign On (SSO) Facebook SSO security check
  • Select Facebook Login by clicking on the set up button .
  • Drupal OAuth/OpenID/OIDC Single Sign On (SSO) Facebook SSO login setup
  • Select Facebook Login -> Settings under Products option in the navigation bar .
  • Drupal OAuth/OpenID/OIDC Single Sign On (SSO) Facebook SSO login setting
  • Under Client OAuth Settings, enter the Callback/Redirect URL (from your miniOrange Oauth Client module) in the Valid OAuth Redirect URIs field. Click on the Save button to save your configurations.
    Note: Most importantly, your Callback/Redirect URI should be https and not http. It is mandatory while configuring Facebook as an OAuth Server.
  • Drupal OAuth/OpenID/OIDC Single Sign On (SSO) Facebook SSO client oauth setting
  • Go to Settings -> Basic to view your App Id ( Client ID ) and App Secret ( Client Secret ) Refer to the image below.
  • Drupal OAuth/OpenID/OIDC Single Sign On (SSO) Facebook SSO client oauth basic setting
  • Enter your Privacy Policy URL in the Privacy Policy URL field and choose a category from the dropdown in the Category field. Then, click on Save Changes button to save your configurations.

3. Integrating Drupal with Facebook

  • Facebook assigns a unique Application ID to your application. Copy the App Id ( Client ID ) and App Secret ( Client Secret ) key and keep it handy.
  • Drupal OAuth/OpenID/OIDC Single Sign On (SSO) Facebook SSO app id app secret
  • In Drupal’s Configure OAuth tab and paste the copied Client ID and Client Secret (copied from the Facebook Portal) in the Client ID and Client Secret text-field.
  • Facebook - Client Credentials
  • Change you app status from In Development to Live by clicking on OFF as shown in the image below. Then, click on confirm to confirm your change of status.
  • Drupal OAuth/OpenID/OIDC Single Sign On (SSO) Facebook SSO change status
  • You have successfully completed your Facebook App OAuth Server side configurations.
  • Client ID : Click Here
    Client Secret : Click Here
    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, please click on the Test Configuration button to test the connection between Drupal and Facebook.
  • Facebook sso login with drupal OAuth OpenID Single Single On test Configuration
  • This Test Configuration window will provide you with a list of the attributes that are coming 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
  • Now, in the Attribute & Role Mapping tab, 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 test Configuration successfully

    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 test Configuration successfully

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