Reader Documentation

Social Media Login Setup


This software allows for users to login to the system via Twitter, Facebook and Google. This guide aims to help you activate this feature. You can disable Social Logins via the Admin Panel. In order for the social login to work, you need to add the correct Social Network keys to your admin area. This guide will show you where you can obtain these keys and where they need to go. Users that login via Social Networks just have to click the Login With Twitter/Facebook/Google buttons and the System will connect to the social network to obtain their user information and log them into the system. All the user has to do is click and it allows them to use the System without having to enter lots of information on the registration page

In order to implement the Twitter Social Login, you will need to get the following information:

  • Twitter Consumer Key
  • Twitter Consumer Secret

To get this information, you need to create your own App at the Twitter Developer's website: https://dev.twitter.com/. It's free to do and easy to setup.

First you will want to head to the Twitter Developer site and login using your Twitter Account. Once your logged in, head over to https://apps.twitter.com/. Click the Create New App button in the right corner.

Next you want to fill out your App Information. In the Callback URL field, you want to enter your website URL followed by /login/twitter_login_pro; so if your website URL was http://www.patchesoft.com, the URL you would enter would be http://www.patchesoft.com/login/twitter_login_pro

Once created, click on the API tab.

On the API Tab, scroll to the bottom to find the Create My Access Token button. Click it. Your tokens will then be generated; it may take a few minutes for them to appear on the page. Just refresh every couple of minutes until you come to a page like the one below.

 

Now click on Keys And Access Tokens tab. Now you need to enter the keys from your app into the Admin Panel of your System. You can find the Twitter Settings under the Social Settings link.

Facebook

In order to implement the Facebook Social Login, you will need to get the following information:

  • Facebook APP ID
  • Facebook APP Secret

To get this information, you need to create your own Facebook App at the Facebook Developer's website: https://developers.facebook.com/

Click on the APPs tab and select Create a new app

Give your App a name. You can ignore the namespace field. Select a category and then hit the Create button.

You will also be presented with adding a product to your app. You want Facebook Login. Select setup.

 

On the above page you will be able to get your Facebook APP ID and Facebook APP Secret.

You can find this information on Settings -> Basic. The secret is hidden by default and you'll need to click the Show button and enter your Facebook password to get access to it.

Then you need to add them to the System in the Admin Panel. You can find the Facebook Keys under the Social Media Tab.

The Final Step is setting up the Facebook Login OAuth product. You should see Facebook Login under Products in your sidebar. If you don't, add Facebook Login from the products list.

Click on Settings under Facebook Login and add the following callback URL to the field: "Valid OAuth Redirect URIs"

URL to add: https://www.example.com/login/facebook_login_pro

Note: To setup Facebook login, you need to be running your site using HTTPS.

 

Google

In order to implement the Google Social Login, you will need to get the following information:

  • Google Client ID
  • Google Client Secret

To get this information, you need to create your own Google App at the Google Developer's website: https://console.developers.google.com

Click Create A Project. Give your project a name and Accept the Terms Of Use.

Next click on the API & Auths tab and then the Credentials Tab. Click on the Create Credentails button and select Oauth client ID from the dropdown menu.

You'll then be presented with a page to fill out these details. For Application type select Web Application. Give it a name to represent your project.

Under restrictions, set Authorized JavaScript Origin to the base url of your site. I.e. https://www.example.com

For Authorized redirect URIs, add the following URL:

https://www.example.com/login/google_login

Once created you will find your Client ID and Client Secret values.

The final step is to make sure the Google+ API setting is set to ON. Check out the scrrenshot below.

Now you have both keys and can add them to the System. Go to the Admin Panel and locate the Social Media Link to find the place where to insert the keys.