Difference between revisions of "Configuring Sign-In using Facebook"

From WHMCS Documentation

(DOCS-6836)
Line 17: Line 17:
 
===Creating a Facebook App===
 
===Creating a Facebook App===
  
Facebook Sign In Integration requires a Facebook App. You can create this using your existing Facebook account. Users will only see the App Name you define and not see anything relating to the account you use to create the app.
+
Facebook Sign In Integration requires a Facebook App. You can create this using your existing Facebook account. Users will only see the App Name you define and not see anything relating to the account you use to create the app.
  
 
<div class="docs-alert-warning">Be aware that the Facebook account under which you create the app can not be changed without requiring users to re-authenticate and re-link their accounts so it is important to set the app up under an account that you will always have access to.</div>
 
<div class="docs-alert-warning">Be aware that the Facebook account under which you create the app can not be changed without requiring users to re-authenticate and re-link their accounts so it is important to set the app up under an account that you will always have access to.</div>
Line 24: Line 24:
 
2. If not logged in, login to your Facebook account <br>
 
2. If not logged in, login to your Facebook account <br>
  
[[File:Facebooksignin1.png]]
+
3. Click "My Apps" and then click '''Add a New App'''
  
3. Click '''Add a New App'''
+
[[File:Fb1.png]]
 +
 
 +
4. Enter a Display Name - this is the name people will see when authorizing your app - we recommend using your Company Name here<br>
  
 
[[File:Facebooksignin2.png]]
 
[[File:Facebooksignin2.png]]
  
4. Enter a Display Name - this is the name people will see when authorizing your app - we recommend using your Company Name here<br>
 
 
5. Enter a Contact Email - this email will be used for important communication about your app<br>
 
5. Enter a Contact Email - this email will be used for important communication about your app<br>
 
6. Click '''Create App ID'''<br><br>
 
6. Click '''Create App ID'''<br><br>
7. Next you will be asked to '''Select a product'''. Locate the '''Facebook Login''' product and click '''Set Up'''
+
7. Next you will be asked to '''Select a Scenario'''. Locate the '''Integrate Facebook Login''' option, select it and click '''Confirm'''
  
[[File:Facebooksignin3.png]]
+
[[File:Fb-2.png]]
  
8. On the '''Platform''' screen choose '''Web'''
+
8. You are now presented with your app "Dashboard". Click '''Finish Quickstart'''.
  
[[File:Facebooksignin4.png]]
+
[[File:Fb3.png]]
  
9. Now you will be asked to provide the URL of your website. Here you should enter the full URL to the root domain of your website. In the example above, we have entered https://demo.whmcs.com/
+
9. Select '''Web''' when asked which Platform you require.
  
[[File:Facebooksignin5.png]]
+
[[File:Fb4.png]]
  
10. Hit Save and then click Continue
+
10. Provide the URL of your website. You must enter the full URL to the root domain of your website. In the example below, we have entered https://demo.whmcs.com/
 +
 
 +
[[File:Fb5.png]]
 +
 
 +
11. Hit Save and then click Continue
  
 
<div class="docs-alert-info">The remaining steps provide information intended for developers who are integrating Facebook Login for the first time. We've done the integration work so you can skip all of this.</div>
 
<div class="docs-alert-info">The remaining steps provide information intended for developers who are integrating Facebook Login for the first time. We've done the integration work so you can skip all of this.</div>
  
11. Select the '''App Review''' tab
+
12. Select the '''Settings''' menu. Select '''Basic'''.
 +
 
 +
[[File:Fb6.png]]
 +
 
 +
13. Provide your "App Domain". This must be the same domain you provided in Step 10.
 +
 
 +
14. Provide a '''Privacy Policy URL'''.
 +
 
 +
15. Provide a '''Terms of Service URL'''.
 +
 
 +
16. Provide a '''Category'''. Typically, this would be '''Business and Pages'''.
 +
 
 +
[[File:Fb7.png]]
 +
 
 +
17. Save the changes
 +
 
 +
18. Toggle the '''Off''' switch in the top right corner to '''On'''
 +
 
 +
[[File:Fb8.png]]
  
[[File:Facebooksignin7.png]]
+
19. Confirm you'd like to make your App public.
  
12. Toggle the Yes/No toggle under the '''Make Public''' heading. You will be asked to provide a category for your app. We recommend selecting the category that most closely matches your business.
+
[[File:Fb9.png]]
  
 
====Permissions====
 
====Permissions====
Line 59: Line 82:
 
The default process for creating an App at Facebook includes permissions for email, public profile and user friends list.
 
The default process for creating an App at Facebook includes permissions for email, public profile and user friends list.
  
WHMCS only requires the email and public profile permissions. The user friends list permission is not requested and users will not be asked to grant this permission when associating their account with WHMCS.
+
WHMCS only requires the email and public profile permissions. The user friends list permission is not requested and users will not be asked to grant this permission when associating their account with WHMCS.
  
 
===Retrieving the App Credentials===
 
===Retrieving the App Credentials===
Line 66: Line 89:
  
 
1. Navigate to the Dashboard<br>
 
1. Navigate to the Dashboard<br>
2. The App ID is displayed here<br>
+
2. Select the '''Settings''' menu and select '''Basic'''<br>
3. The App Secret is masked by default. Click the ''Show'' button to reveal it.<br>
+
3. The App ID and Secret are shown here. The App Secret is masked by default. Click the ''Show'' button to reveal it.<br>
  
[[File:Facebooksignin6.png]]
+
[[File:Fb10.png]]
  
 
===Activating within WHMCS===
 
===Activating within WHMCS===

Revision as of 13:16, 18 June 2019

This article is part of the Sign-In Integrations feature.

Purpose

Enabling the Facebook Sign In Integration enables visitors and customers to register, sign in and connect their Facebook accounts with your WHMCS installation for faster sign-up and automatic sign-in.

Signinintegrationslogin.png

Configuring Sign-In with Facebook

There are 3 steps required to setup Sign-In with Facebook:

  1. Create a Facebook App
  2. Retrieve the App Credentials
  3. Activate within WHMCS

Creating a Facebook App

Facebook Sign In Integration requires a Facebook App. You can create this using your existing Facebook account. Users will only see the App Name you define and not see anything relating to the account you use to create the app.

Be aware that the Facebook account under which you create the app can not be changed without requiring users to re-authenticate and re-link their accounts so it is important to set the app up under an account that you will always have access to.

1. Visit https://developers.facebook.com/apps/
2. If not logged in, login to your Facebook account

3. Click "My Apps" and then click Add a New App

Fb1.png

4. Enter a Display Name - this is the name people will see when authorizing your app - we recommend using your Company Name here

Facebooksignin2.png

5. Enter a Contact Email - this email will be used for important communication about your app
6. Click Create App ID

7. Next you will be asked to Select a Scenario. Locate the Integrate Facebook Login option, select it and click Confirm

Fb-2.png

8. You are now presented with your app "Dashboard". Click Finish Quickstart.

Fb3.png

9. Select Web when asked which Platform you require.

Fb4.png

10. Provide the URL of your website. You must enter the full URL to the root domain of your website. In the example below, we have entered https://demo.whmcs.com/

Fb5.png

11. Hit Save and then click Continue

The remaining steps provide information intended for developers who are integrating Facebook Login for the first time. We've done the integration work so you can skip all of this.

12. Select the Settings menu. Select Basic.

Fb6.png

13. Provide your "App Domain". This must be the same domain you provided in Step 10.

14. Provide a Privacy Policy URL.

15. Provide a Terms of Service URL.

16. Provide a Category. Typically, this would be Business and Pages.

Fb7.png

17. Save the changes

18. Toggle the Off switch in the top right corner to On

Fb8.png

19. Confirm you'd like to make your App public.

Fb9.png

Permissions

The default process for creating an App at Facebook includes permissions for email, public profile and user friends list.

WHMCS only requires the email and public profile permissions. The user friends list permission is not requested and users will not be asked to grant this permission when associating their account with WHMCS.

Retrieving the App Credentials

To retrieve the credentials for the app you just created, follow the steps below.

1. Navigate to the Dashboard
2. Select the Settings menu and select Basic
3. The App ID and Secret are shown here. The App Secret is masked by default. Click the Show button to reveal it.

Fb10.png

Activating within WHMCS

  1. Login to the WHMCS Admin Area
  2. Navigate to Setup > Sign-In Integrations
  3. Select Activate under the Facebook heading
  4. Enter your Facebook App ID and your Facebook App Secret where requested
  5. Click Save & Activate

WHMCS will attempt to validate and test the details you have entered. Assuming the App ID and Secret are valid and successfully authenticate with the Facebook API, the values will be saved and the modal will close.

Congratulations! Facebook Sign In is now enabled.

Troubleshooting

For troubleshooting help, please refer to Troubleshooting Sign-In using Facebook