Social Login

Created by Phailee Ram Ram Sharma, Modified on Tue, 9 Jun, 2020 at 3:16 PM by Phailee Ram Ram Sharma

Twitter App Setup

To allow users to login to your site with their Twitter account you need to create a Twitter app. To create a new Twitter app please do the following:

Go to the Twitter application management site: https://developer.twitter.com/apps
Click the “Create New App” button
Enter the details for the application
Do not forget to add Callback URLs
https://yoursiteURL/login/ e.g. https://worksuite-saas.com/callback/twitter
Read and agree to the terms and click the “Create your Twitter application” button
After the app is created you will be redirected to your application and you will see the following page:

Keys & access tokens

On this page you will find the consumer key (API key) and consumer secret (API secret). You need to copy both of these and add them to your site on the Twitter tab on settings page.

Permissions

Access should be left on the default setting which is “read and wro only”.

Establish a connection between Twitter and your app

In a separate tab or window, login in your application by super-admin login details and open settings >Social Login and facebook app id and secret there

Facebook app setup:-

Step 1: Enroll as a Facebook Developer

In order to create a Facebook app, open Facebook developers and login to your account. If you are not already enrolled, create a new account. After log-in, select Add new app option from the drop-down menu in the upper right corner.

Step 2: Create a new App ID

After clicking Add new app option, a pop window will appear requiring Display name and Contact e-mail details. Enter the details and create App ID.

As you click on Create App ID, Facebook will ask for a security check as shown in the snapshot below:

Step 3: Set up Facebook Login

Now it’s time to set up Facebook login after completing the security check. This is the landing page for the Facebook application to which we will add a Facebook login product. The Facebook Login is just one of the many products that can be added to your Facebook app.

Once the App ID is created, Add a Product webpage opens. Click set up option under Facebook login.

Now, it’s time to choose the type of your application. Select the platform of your application.

Once you have chosen the platform, download the latest Facebook SDK file if you haven’t already installed it.

Step 4: Configure the Redirect URI

You’ll find Settings option appearing on the left side of the screen under Facebook Login. Select this option.

Enter the following URL in the redirect URIs field: https://your-domain/callback/facebook and save the changes. (Domain name should be correct)

Note: If your domain name is not displayed above, log in to the dashboard to find your tenant name in the top right corner. It is the domain name.

Step 5: Make your App public

Now, from the left navigation bar, click App review option. After this, on the top of the page,’ Make (Your App Name) App public?’ will appear. Toggle the button to enable it

Step 6: Retrieve the Facebook App Credentials

Open basic settings from the left navigation bar. On this web page, you can retrieve your App ID and App Secret. Click show to reveal the App Secret (you may be asked to re-enter your Facebook password).

All right! Now is the time for the final step.

Step 7: Establish a connection between Facebook and your app

In a separate tab or window, login in your application by super-admin login details and open settings >Social Login and facebook app id and secret there

LinkedIn App Setup : -

Creating a new app

To allow users to login to your site with their LinkedIn account you need to create a LinkedIn app. To create a new LinkedIn app please do the following:

Go to the LinkedIn developer site: https://developer.linkedin.com/
Click the “Create App” link in the header menu and login
To correctly create the application please fill in the sections of the application which are explained below

Create an app

Application Name – Enter a name for your application.
LinkedIn Page – Find the the company page
Privacy policy URL – Enter a privacy-policy page url
App logo – Upload your app logo
Legal terms - Read the terms of service and check the box to confirm that you have read and agree to the terms.

Auth

Go to the Auth section and add Redirect URLs

Products

Go to the Products section and add select "Sign In with LinkedIn"

Establish a connection between Linkedin and your app

In a separate tab or window, login in your application by super-admin login details and open settings >Social Login and linkedin app id and secret there

Google App Setup : -
To allow users to login to your site with their Google+ account you need to create a Google+ project and enable Google+ API. To enable API and create new Google+ project please do the following:

1. Login with your Google account and go to the developer console website: https://console.developers.google.com/apis/library/plus.googleapis.com?authuser=1
2. Create or Choose a Project
2. Click on the “Enable" button.
3. After Enabling the API, you will be redirected to the APIs & Services page of your project. Click on the "Configure Consent Screen" button.
4. Choose the "External" in the options.
5. Fill in OAuth consent fields and then Click on "Save" button.
6. Click on the "Credentials" and select "OAuth Client ID"
7. Fill in the required fields and then click on "Save" button.
Enter your site URL details into pop-up (leave application type set to web application) and click the “Create client ID” button. Important: You should also add the following URIs in the Authorized redirect URIs field: https://www.yoursitedomain.com/callback/google

8. After the client ID is created you will see some information appear on the page Copy and paste the Client ID and Client Secret into the Google+ tab on the Ultimate Member > Settings > Social Connect page to connect your site to your App
A. Edit the created OAuth 2.0 Client IDs "UM Social Login"

B. Copy the Client ID & Client Secret

9.Establish a connection between Google app and your app
In a separate tab or window, login in your application by super-admin login details and open settings >Social Login and google app id and secret there