Facebook Login Add-On

Link: https://support.brilliantdirectories.com/support/solutions/articles/12000036273

The One-Click Facebook Login add-on gives users the ability to easily register and login to the website using their existing Facebook account. This seamlessly integrates with the default login and registration system. Existing users can add or remove their linked Facebook account at any time from within their member dashboard on the website.

How To Get This Add-On

Websites with the VIP Add-Ons Club automatically have this add-on available: Join The VIP Add-Ons Club
Purchase Individually: One-Click Facebook Login Add-On

Overview

In this article, we'll go over the process of setting up the One-Click Facebook Login Add-On. By following the outlined instructions, the admin will be able to integrate the Facebook Login Add-On into the platform, allowing users to utilize this login method.

Requirements

SSL Certificate: Facebook requires the website to have an SSL Certificate installed for security precautions.
Facebook Developer Account: Estimated Setup Time – 5 minutes. Learn More

Configuration Steps

Before the admin is able to use this great tool on the website, first create a Developer's account on Facebook. Please follow these steps in order to continue. Make sure to visit this link to get started:

Create Facebook Developer Account

https://developers.facebook.com/products/facebook-login/

Make sure to be logged in to a Facebook account, otherwise, it will ask to create an account.

https://www.facebook.com

Once logged in please click on My Apps:

Click On Create App

In the next pop up click on Create app:

Add a name for the app:

For Use Cases select: Authenticate and request data from users with Facebook login

Select the business portfolio do you want to connect to this app, if you do not have one to use yet choose I don't want to connect a business portfolio yet, very important that in order for this app to work, you will eventually need a business portfolio:

Finalize and go to the Dashboard:

After the app has been created, it will be redirected to the Dashboard. Click on the Use Cases option:

Click on the CUSTOMIZE button:

And select "Quickstart":

Select the Web option:

Enter the site URL, click on Save.

Next go to APP SETTINGS > BASIC to add the website's information.

The App ID and The App secret key are added automatically.

Add the App Domains that will be using the App ID, website's Privacy Policy URL and Terms of Service URL.

For the User data deletions select Data deletions callback URL and add the domain /unsync-fb, as shown in the image below and be sure to select the best category that describes the website and click on Save Changes:

Scroll down, and make sure to complete the Data Protection Officer Contact Information if it applies to the website and save these changes.

Once those steps are completed, please go to App Review click on Edit.

The system will redirect to the Use cases page. Look for Authentication and account creation and click on Customize:

Confirm the advanced access for both public_profile and email, if any is missing click on Add:

Once the advanced access is requested, a message will appear at the bottom. Facebook now requires a Facebook Business Verification to be completed in order to get the Advanced access.

On the Uses Cases page click again on the Go to Settings button:

Make sure to turn on the option to Login with the Javascript SDK, also make sure to add the domain in the Allowed Domains for the JavaScript SDK field (very important!):

Save the changes.

Once all is ready, you can click on Go Live. In the Business verification section, click on Start Verification:

Start the verification process or go back to the dashboard.

Go to App Settings - Basic Settings and copy the App ID and App secret key:

Paste the App ID in the Facebook App ID field (1) and the App Secret ID in the Facebook App Secret ID (2) :

NOTE: The Facebook App Secret ID is now required by Facebook for data deletion request callback.

Frontend

The admin also has the option to Enable the Facebook Login per membership plan.

These next steps are to activate the Facebook Login per plan:

1. Once the setup has been completed, the admin will need to go to Finance - Membership Plans and edit the plan that will have the Facebook Login option enabled: