Social Login

Author: admin 343 views

Manage Social Login API Settings

Callback urls for each provider should be like below

https://www.YOUR-SITE.COM/oauth/twitter
https://www.YOUR-SITE.COM/oauth/google
https://www.YOUR-SITE.COM/oauth/facebook

1. How To Get An App ID and Secret Key From Facebook

How To Create A Simple Facebook App to Receive an App ID and Secret Key

In order to get an App ID and Secret Key from Facebook, you’ll need to register a new application. Don’t worry – its very easy, and your application doesn’t need to do anything. We only need the keys.

There are 4 simple steps to creating a Facebook App, which we’ve outlined below.

Step One: Visit The Facebook Developers Page

To start with, navigate your browser to the Facebook Developers page. You’ll need to login to your Facebook account.

Once logged in, you’ll see a screen similar to this:

Screenshot of developers.facebook.com — Click the “Add a New App” link to get started.

To begin, click the green “Add a New App” link in the top right menu.

Step Two: Input Your New App’s Information

Once you’ve clicked “Add a New App”, a box will appear asking you for your new App’s Display Name, Contact E-Mail Address, and Category. Since this App won’t be published, just pick a name that is easy for you to remember.

Screenshot of Add a New App modal. — These are the fields you will see after clicking Add a New App. They are the Display name, Contact E-Mail, and Category.

You will be asked to choose a Category for your App — choose Apps for Pages.

Screenshot of Add a New App Category drop down. — Once you’ve filled out the required fields, be sure you’ve selected Apps for Pages in the category drop down.

Step Three: Locate and Copy your App ID and Secret Key

After you’ve filled out the required fields and clicked Create a New App ID, you’ll be taken to your new App’s dashboard. From here, you’ll need to click on the Settings link to view your App ID and Secret Key.

Screenshot of new App's Dashboard. — This is the new App’s Dashboard. Click the Settings link on the left to proceed to your App ID and Secret Key.

Your Secret Key will be hidden from view until you click the Show button.

Screenshot of new App's Settings — Your Secret Key is hidden from view until you click the Show button.

Once you’ve done this, we recommend copying both fields to a text file for easy access later.

Screenshot of new App's Settings with Secret Key revealed. — After clicking Show, your Secret Key will be visible to copy.

You’re finished! That’s all there is to generating an App ID and Secret Key from Facebook. You can ignore the other settings.

Step Four: Paste these values into the App ID and Secret Key

2. How to Get Twitter API Key and Secret Key

In order for you to get the Twitter feed working you need four keys; the Consumer Key, Consumer Secret, Access Token and Access Token Secret. Below are the steps to get those 4 keys.

Go to https://apps.twitter.com/app/new and log in, if necessary.
Enter your desired Application Name, Description and your website address making sure to enter the full address including the http://. You can leave the callback URL empty.
Accept the TOS and submit the form by clicking the Create your Twitter Application.
After creating your Twitter Application click on the tab that says Keys and Access Tokens, then you have to give access to your Twitter Account to use this Application. To do this, click the Create my Access Token button.
Lastly copy the Consumer key (API key), Consumer Secret, Access Token and Access Token Secret from the screen into our plugin’s Twitter Options page and test.

That’s it, you’re all done! Now the Feed Them Social Twitter Feed should not go down anymore.

3. How to create Google OAuth Credentials (Client ID and Secret)

Steps to get Google Client ID and Client Secret

Step 1

You need to create a Project in Google Developer Console. Click here to go to the Google Search Console web page. You will be asked to log in with your Google Account, if you are not logged in already.

If you don’t have any projects already create in Google Developers Console, you will see the following screen.
Click on the “Create Project” button.

If you already have projects in your Google Developer Console, click on the project name in the top-left corner next to the Google Cloud Platform logo, a new pop-up window will open. Click on the “New Project” button to create a new project.

Step 2

In either case, you will be redirected to the “New Project” page, where you will be asked to enter your “Project Name”, which will help you recognize your project in the console.
Add an appropriate name and click on the “Create” button.

Wait a couple of seconds while your project get created. You will see a notification when your project is ready.

Click on the “Select Project” link to enter the dashboard for the project you just created.

Step 3

Now, you need to add two libraries to your project.

“Google Analytics API” for analytics configuration.
“Google Analytics Reporting API” for accessing reporting data.

In the navigation menu on left, hover over “APIs & Services” and click “Library”.

Search for “Google Analytics”. You should see the following results.
First, we will add the “Google Analytics API” library, so click on the “Google Analytics API” to go to the API page.

Click “Enable” to enable the API.

When enabled, you will be redirected to the Dashboard of the “Google Analytics API” library.

Step 4

Now you have to add the “Google Analytics Reporting API” liberary. Click on the “Hamburger” menu to open the navigation menu. Hover over “APIs & Services” and click “Library” to go back to the library search page.

Again search for “Google Analytics” and click on “Google Analytics Reporting API”.

Just like before, click on the “ENABLE” button. when enabled, you will be redirected to the Dashboard of “Google Analytics Reporting API”.

Step 5

This project need to be accessible externally. Click on the “Hamburger” menu to open the navigation menu. Hover over “APIs & Services” and click “OAuth consent screen”.

Set the “User Type” to “External” and click “Create”.

You will be redirected to the “App Registration” page. Add the following information:

App name (you can just put ‘My Analytify Keys’)
User support email (select your email from the list)
Email Address (Under “Developer contact information”, near the bottom. You can just put your own email here.)

Click “SAVE AND CONTINUE”.

Note: The information under “App domain” is not required. If you leave it empty, your App will be “unverified” and you will see an “Unverified App” alert when you will try to login from this app. If you add the information under (Application home page, Application privacy policy link, Application terms of server link), Google (in some time) will verify the App.

After clicking “SAVE AND CONTINUE”, you will be taken to the “Scopes” page, you don’t need to change anything here. Just click “SAVE AND CONTINUE”.

Now you will see the “Test User” page, you don’t need to change anything here as well. Just click “SAVE AND CONTINUE”.

And finally, just click on “BACK TO DASHBOARD” to return to the “OAuth consent screen” dashboard.

Step 6

You app is build but now it needs to be “Published”. To publish the app just click on the “PUBLISH APP” button.
A popup will ask for confirmation, just click “CONFIRM”. Your app is now published.

Step 7

Analytify needs credentials to be able to access this app. From the left menu, click on “Credentials”.

Once you are on the “Credentials” page, click “CREATE CREDENTIALS” and then on “OAuth client ID”.

You will be redirected to the “Create OAuth click ID” page.

The “Setup Custom API keys” should be set to “Yes”.
You can see the URL next to “Redirect URL”. Copy it, you will need it later.

Now back to the Google Console tab. Set the “Application type” to “Web Application”. In the “Name” field, you can just put “Analytify” and under “Authorized redirect URIs”, click the “ADD URI” button and add the URL from Analytify’s Advance Setting page (that you just copied).

Click “CREATE”.

Your credentials have now been created.

On the Social Login page, put the “Click ID” and “Client Secret” that you got from Google into their respective fields. The “Redirect URL” will be the URL you see written below. Just copy and paste from there and “Save Settings”.

After clicking on “Log in with your Google Analytics Account” you will be redirected to Google Accounts Authentication page, you have to select your Google Account that is associated with your Google Analytics account.

In the next step, you will be asked to Allow the permissions. You have to click on the “Allow” button.

App Verification Alert

You may will get the “This app isn’t verified” alert during the authentication of your Google account. You can continue without app verification by clicking on the “Advanced” option and on the “Go to *YOURDOMAINNAME* (unsafe)” link.

Although you can continue using an “Unverified App”, but if you like to get your app verified, click here and follow the steps.