Facebook Login Add-On

Link: https://support.brilliantdirectories.com/support/solutions/articles/12000036273-facebook-login-add-on

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

  1. Websites with the VIP Add-Ons Club automatically have this add-on available: Join The VIP Add-Ons Club
  2. 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/ 


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


        https://www.facebook.com


2.  Once logged in please click on Go to Docs:




3. Go to the App section of Facebook for Developers:




4. Click on create an app:

       



5. In the next pop up please select Allow people to log in with their Facebook account and click Next:





6. Provide the app details (Add an app name, App contact email) and click on Create App:




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




8. Click on the Go to Quickstart button:



9. Select the Web option:



10. Enter the site URL, click on Save and Go Back.



11. Next go to Settings > Basics to add the website's information. The App ID and The App secret key are added automatically.





12. 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:




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




14. Once those steps are completed, please go to App Review click on Request Permissions or Features.



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




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




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



18. 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!):




19. Save the changes.



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




21.  Start the verification process or go back to the dashboard.




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




23. 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 Use:


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:




2. Click on Member's Dashboard Tab and make sure this is set to YES:




3. Make sure to Save.


Once this is set to Yes the login form will contain this option:




If it's set to No, they will not have the ability to use the Facebook login but they will be able to use their Facebook account to sign up.


Also, if there isn't a key in the field, this option will never show up on the login form. 


Additional Information:


» Using Facebook Login