UPME Social Login and Registration

Introduction to Social Login

UPME Social login and registration allows users to login/register with 1-click using popular social netwroks without worrying about remembering usernames and passwords. Currently, UPME support social login with Facebook, Twitter, LinkedIn and Google Plus.

Configure and Setup Social Login

Social login is disabled by default. You need to enable it from the UPME Settings section. Go to UPME Settings -> Modules -> Social to configure the settings for social login. Following screenshot previews the default settings screen for social login.

First, you need to decide which networks you want to use. Use the Enabled Social Networks setting to enable the networks you want to use. Then you can add a message(header) about social login buttons using the Social Login Message setting. Finally, you need to assign the application keys for enabled social networks. Each social network will have 2 keys for application key and secret. You need to create developer applications for each site before configuring UPME Settings. We will cover application creation for each network later.

Once applications keys and secrets are assigned, you are ready to use social login. Go to login/registration form and you will find the social login buttons as shown in the following screenshot.

How it Works

Users can click on the login buttons of any of the social networks to log into the site. Once clicked, users will be redirected to respective websites for login and authentication. Users will have to authenticate the application in the first time. Then, user will be redirected back to the site. If user already exists, user will be logged in automatically. If user doesnt exist, user will be registered as a new user and automatically logged into the site.

If user is logged into one of social networks and already authenticated the application for the first time, its just 1-click to login to the site. UPME only captures most basic information such as email and names. Username for the account will be generated based on the name. If the name already exists, UPME will add dynamic random string to end of the name to make a unique username. In case, email is not available, UPME will assign a dynamic email based on username. User can change the email later.

Creating a Facebook Application for UPME

• First, you have to log into https://developers.facebook.com using your Facebook account and you will a get a screen similar to the following screenshot.

  

• Click Add a New App link to create a new application. You will get a screen similar to the following screenshot.

  

• Click on the Website icon to create the application for a website. You will get a screen similar to the following screenshot.

  

• Add a unique name to your application and click Create New Facebook App Id button and you will get a screen as shown in the following screenshot.

  

• Select your prefered caegory and click Create APP Id to get the screen as shown in the following screenshot.

  

• Now, add your site URL and click Next button to get a screen similar to following screenshot.
  

  Now you have completed the creation of application. This is the dashboard of your application where you find App ID and App Secret.

• Click on the Settings tab to get a screen similar to following screenshot. You can assign the App Domains and Site URL as shown in the screenshot. Also make sure to add a contact email to your application.
  
• Finally, click on the Status and Review tab and make your application as public. Now you can get App Id and App Secret and insert into UPME Settings section to enable social login with Facebook.

Creating a LinkedIn Application for UPME

• First, you have to log into https://www.linkedin.com/developer/apps/new using your LinkedIn account and you will a get a screen similar to the following screenshot.

  

• Complete the requested details for app creation. Make sure to include the correct URL of your site. Then click Submit button to get a screen similar to the following screenshot.

  

• Enable r_basicprofile and r_emailaddress as the permission for the application. Add your site URL as Authorized Redirect URL’s and click Update to complete the app creation. Finally, you can grab Client ID and Client Secret from this screen and add it to UPME Settings to to enable social login with LinkedIn.

Creating a Twitter Application for UPME

• First, you have to log into https://apps.twitter.com/app/new using your Twitter account and you will a get a screen similar to the following screenshot.

  

  Complete the requested details to create the application. Make sure to use the correct Website and Callback URL. If your application is located in a sub folder/path, you should include it for the Callback URL. Click the Create your Twitter Application button to complete the app creation.

• Click on the Keys and Access Tokens section to generate and get the app keys as shown in the following screenshot.
  

  Finally, you can grab Consumer Key and Consumer Secret from this screen and add it to UPME Settings to to enable social login with Twitter.

Creating a GooglePlus Application for UPME

• First, you have to log into https://console.developers.google.com/project using your Google account and you will a get a screen similar to the following screenshot.

  

• Click on the Create Project button to start the app creation. You will get a screen similar to the following screenshot.
  

• Enter a unique name for your project and click the Create button to get a screen similar to the following screenshot.
  

• Click on Create new Client ID button to get a screen similar to the following screenshot.
  
• Choose Web Application and click the Configure Consent Screen button to get a screen similar to the following screenshot.

  

• Complete the requested Product Name, email and other necessary details and save the details. Go to Credentials section and you will find client Id. Edit the details as shown in the following screenshot. If you don’t have a Client ID, make sure to create a new one.

  

  It’s important that you use the same syntax for Authorized Redirect URI’s section. Replace profileplugin.com with your own domain and correct path. Once settings are saved, it will take some time to use the updated settings. Finally, you can grab Google Client ID and Google Client Secret from this screen and add it to UPME Settings to to enable social login with GooglePlus.