Joomla OAuth Client Integration with Facebook Single Sign-On (SSO)

Overview

This guide provides a comprehensive overview of setting up our Joomla OAuth Client extension to enable user login through Facebook. By following these steps, you can add a "Login with Facebook" button to your site, offering a fast and convenient way for users to register and sign in.

Integrating Facebook Login is one of the most effective ways to reduce registration friction. Since a vast number of users already have a Facebook account, this social login method allows them to access your site with a single click, without needing to create and remember a new set of credentials.

Configuration Steps

In this configuration, Facebook functions as the OAuth server, while Joomla allows users to log in with their Facebook credentials by utilizing the Joomla OAuth Client Plugin.

Step 2: Configure Facebook as OAuth Server

• Sign in to your Facebook Developer console.
• Go to My Apps.

• To build a new OAuth application, click the Create App button in the All Apps section.

• Select "What do you want your app to do?" on the Create an App section. Then click the Next button to continue.

• In the following screen, Select an app type and select Consumer, then click the Next button. (After your app is built, the app type cannot be changed.)

• 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.

• When you click the Create app button, a dialogue window will appear. For your security, you must re-enter your password to continue.

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

• Navigate to Products from the left navigation panel, then Facebook Login and Settings.

• Under the Client OAuth Settings, paste the previously copied Callback/Redirect URL into the Valid OAuth Redirect URIs text field.

Step 3: Configure Client ID & Secret

• Go to Settings -> Basic to view your App Id and App Secret (Refer to the image below).

• Copy your App ID and App Secret which is your Client ID and Client Secret and save it in your miniOrange OAuth Client Plugin.
• Go back to your Joomla Dashboard. Then go to Step 2 [Client ID & Secret].
• Paste the Client ID, Client Secret and Domain. Also Set Client Credentials In header and body then click on Save Settings. Once Settings are saved then click on Save Configuration.

• Scope & Endpoints are given below, which are required for configuring Joomla as OAuth Client plugin to configure Facebook as a custom OAuth or OIDC provider.

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
Set Client Credentials	In Header and In Body