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

From WHMCS Documentation

(Activate Twitter Sign In within WHMCS)
(Configuring Sign-In with Twitter)
Line 11: Line 11:
 
<html><a href="https://vimeo.com/231458433" class="docs-video-tutorial"><em>Watch the video tutorial for this feature</em><span>&nbsp;<img src="https://assets.whmcs.com/icons/youtube.png">&nbsp;</span></a></html>
 
<html><a href="https://vimeo.com/231458433" class="docs-video-tutorial"><em>Watch the video tutorial for this feature</em><span>&nbsp;<img src="https://assets.whmcs.com/icons/youtube.png">&nbsp;</span></a></html>
  
There are 2 steps required to setup Sign-In with Twitter:
+
There are 2 steps required to set up Sign-In with Twitter:
  
# Create a Twitter App and Retrieve API Credentials
+
# [[Configuring_Sign-In_using_Twitter#Create a Twitter App and Retrieve API Credentials|Create a Twitter App and Retrieve API Credentials]]
# Activate Twitter Sign In within WHMCS
+
# [[Configuring_Sign-In_using_Twitter#Activate Twitter Sign In within WHMCS|Activate Twitter Sign In within WHMCS]]
  
 
===Create a Twitter App and Retrieve API Credentials===
 
===Create a Twitter App and Retrieve API Credentials===
Line 20: Line 20:
 
Twitter Sign In Integration requires a Twitter App and API Credential Set.  You can create this using your existing Twitter account. Users will only see the App Name you define and not see anything relating to the account you use to create the project.
 
Twitter Sign In Integration requires a Twitter App and API Credential Set.  You can create this using your existing Twitter account. Users will only see the App Name you define and not see anything relating to the account you use to create the project.
  
<div class="docs-alert-warning">Be aware that the Twitter 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 Twitter account under which you create the app cannot 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>
  
1. Visit https://developer.twitter.com/en/apps/ <br>
+
1. Visit https://developer.twitter.com/en/portal/dashboard <br>
2. If not logged in, login to your Twitter account <br>
+
2. If not logged in, log in to your Twitter account <br>
3. Click the '''Create New App''' button
+
3. Click the '''Create Project''' button <br>
 +
4. Select a project name. This can be anything such as "WHMCS Login"<br>
 +
5. Select an app name. This can be anything such as "WHMCS Client Area Login"<br>
  
[[File:Twittersign1revised.png]]
+
[[File:Screenshot-3.png|thumb]]
  
4. Enter a Name, Description and Website URL for your App.
+
6. You will now be presented with your API keys. You should take note of the '''API Key''' and '''API secret key'''<br>
 +
7. Go to app settings and scroll down and click '''Edit''' on Authentication Settings section<br>
 +
8. Enable '''3-legged OAuth'''<br>
 +
9. Enter your WHMCS Client area URL for the callback URLs and Website URL and click '''Save'''<br>
  
 
You must also enter a valid URL in the Callback URL fields. The URL you enter here is not used, but the valid URL of the callback file must be defined to enable WHMCS to utilize callbacks.  
 
You must also enter a valid URL in the Callback URL fields. The URL you enter here is not used, but the valid URL of the callback file must be defined to enable WHMCS to utilize callbacks.  
  
Because there are three possible callback URLs depending upon the Friendly URLs feature setting, we suggest adding all three:
+
Because there are three possible callback URLs depending upon the '''Friendly URLs''' feature settings, we suggest adding all three:
  
 
* http://demo.whmcs.com/whmcs/index.php
 
* http://demo.whmcs.com/whmcs/index.php
Line 40: Line 45:
 
Replace <i><nowiki>http://demo.whmcs.com/whmcs/</nowiki></i> with the actual URL of your WHMCS installation
 
Replace <i><nowiki>http://demo.whmcs.com/whmcs/</nowiki></i> with the actual URL of your WHMCS installation
  
<div class="docs-alert-warning">Ensure that the "WHMCS System URL" in WHMCS, Twitter "Website" and Twitter "Callback URLs" either all contain www subdomain or not, or matching subdomain. Failing to do so will result in an Invalid Details error when trying to activate the Twitter sign-in integration in WHMCS. </div>
+
<div class="docs-alert-warning">Ensure that the '''WHMCS System URL''' in WHMCS, Twitter "Website" and Twitter "Callback URLs" either all contain www subdomain or not, or matching subdomain. Failing to do so will result in an Invalid Details error when trying to activate the Twitter sign-in integration in WHMCS. </div>
 
 
[[File:Twittersign2revised.png]]
 
 
 
5. Tick the "Enable sign in with Twitter" box, fill out the box explaining what the app will be used for (sign in integration from WHMCS) and click "Create".
 
 
 
6. If you do not yet have a phone number defined inside your Twitter account, you will see the following error upon submitting. To create an App, Twitter requires that you have a valid phone number registered in your account with them. You must do this before continuing.
 
 
 
[[File:Twittersign3.png]]
 
 
 
7. After submitting the App Creation form, you should see a success confirmation page that looks as follows.
 
 
 
[[File:Twittersign4revised.png]]
 
 
 
8. Select the '''Permissions''' tab.  WHMCS only requires Read permissions so you can click the "Edit" button, change the default Access permission level to ''Read-only''. Then hit '''Save'''.
 
 
 
[[File:Twittersign5revised.png]]
 
 
 
9. Now select the '''Keys and tokens''' tab. Your API Key and Secret will then be displayed. These are the values you will need to activate Twitter Sign In within WHMCS so store these in a safe place.
 
 
 
[[File:Twittersign6revised.png]]
 
  
 
You can now proceed to Activate Twitter Sign In within WHMCS.
 
You can now proceed to Activate Twitter Sign In within WHMCS.
Line 66: Line 51:
 
===Activate Twitter Sign In within WHMCS===
 
===Activate Twitter Sign In within WHMCS===
  
# Login to the WHMCS Admin Area
+
# Log in to the WHMCS Admin Area
 
# Navigate to '''Configuration (<i class="fa fa-wrench" aria-hidden="true"></i>) > System Settings > Sign-In Integration''' or, prior to WHMCS 8.0, '''Setup > Sign-In Integrations'''.
 
# Navigate to '''Configuration (<i class="fa fa-wrench" aria-hidden="true"></i>) > System Settings > Sign-In Integration''' or, prior to WHMCS 8.0, '''Setup > Sign-In Integrations'''.
# Select Activate under the Twitter heading
+
# Select '''Activate''' under the Twitter heading
# Enter your Twitter API Key and API Secret where requested
+
# Enter your Twitter '''API Key''' in to the '''ConsumerKey''' field and the '''API Secret''' into the '''ConsumerSecret''' field
# Click Save & Activate
+
# Click '''Save & Activate'''
  
 
WHMCS will attempt to validate and test the details you have entered. If the API Key and Secret are valid and successfully authenticate with the Twitter API, the values will be saved and the modal will close.
 
WHMCS will attempt to validate and test the details you have entered. If the API Key and Secret are valid and successfully authenticate with the Twitter API, the values will be saved and the modal will close.

Revision as of 12:20, 4 May 2021

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

Purpose

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

Signinintegrationslogin.png

Configuring Sign-In with Twitter

Watch the video tutorial for this feature  

There are 2 steps required to set up Sign-In with Twitter:

  1. Create a Twitter App and Retrieve API Credentials
  2. Activate Twitter Sign In within WHMCS

Create a Twitter App and Retrieve API Credentials

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

Be aware that the Twitter account under which you create the app cannot 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://developer.twitter.com/en/portal/dashboard
2. If not logged in, log in to your Twitter account
3. Click the Create Project button
4. Select a project name. This can be anything such as "WHMCS Login"
5. Select an app name. This can be anything such as "WHMCS Client Area Login"

Screenshot-3.png

6. You will now be presented with your API keys. You should take note of the API Key and API secret key
7. Go to app settings and scroll down and click Edit on Authentication Settings section
8. Enable 3-legged OAuth
9. Enter your WHMCS Client area URL for the callback URLs and Website URL and click Save

You must also enter a valid URL in the Callback URL fields. The URL you enter here is not used, but the valid URL of the callback file must be defined to enable WHMCS to utilize callbacks.

Because there are three possible callback URLs depending upon the Friendly URLs feature settings, we suggest adding all three:

Replace http://demo.whmcs.com/whmcs/ with the actual URL of your WHMCS installation

Ensure that the WHMCS System URL in WHMCS, Twitter "Website" and Twitter "Callback URLs" either all contain www subdomain or not, or matching subdomain. Failing to do so will result in an Invalid Details error when trying to activate the Twitter sign-in integration in WHMCS.

You can now proceed to Activate Twitter Sign In within WHMCS.

Activate Twitter Sign In within WHMCS

  1. Log in to the WHMCS Admin Area
  2. Navigate to Configuration () > System Settings > Sign-In Integration or, prior to WHMCS 8.0, Setup > Sign-In Integrations.
  3. Select Activate under the Twitter heading
  4. Enter your Twitter API Key in to the ConsumerKey field and the API Secret into the ConsumerSecret field
  5. Click Save & Activate

WHMCS will attempt to validate and test the details you have entered. If the API Key and Secret are valid and successfully authenticate with the Twitter API, the values will be saved and the modal will close.

Congratulations! Twitter Sign In is now enabled.

Troubleshooting

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