LinkedIn has over 300 million members world wide. You can leverage one of the most popular social networks to dramatically simplify your website's user login experience by adding LinkedIn social login to your website. Social login has been shown to increase user engagement, customer conversion rates, and reduce sign-up resistence for websites . As mentioned in my previous blog post How to simplify website registration and login social login is a very popular authentication mechanism that is safe and secure. In this post I will talk about how to connect LinkedIn Login to your website with the help of Stitchz Social Login.
Create a Stitchz Social Login App
The first thing you'll need to do is create a Stitchz Social Login account. Go to the login page, https://login.stitchz.net/ and sign in with the social identity of your choice, Figure 1.
Once logged in, create a new application by clicking "Login" at the top, then click the Create link, Figure 2.
Figure 2 - Create a new Stitchz application
In the new Stitchz application page, Figure 3, the fields marked with a red asterisk are required. So begin by entering an application name. It must be unqiue, it only accepts letters and numbers and it cannot contain spaces, so I recommended to use your base domain name. The application name will become your "App Url" and you'll use it when setting up your Authentication with LinkedIn Login. For now write it down, or copy it to a safe place, we'll talk about this in a minute.
Next, enter the description of your website and your domain. Your Domain is exactly as it sounds, your website's root domain name, i.e. example.com, without the "http" or "www" in front of it.
The Return Url is an end point or page on your website that is ready to accept a POST request from Stitchz containing a one-time unique code or "token", i.e. https://www.yourdomain.com/Read/Token/from/Stitchz. If you're using one of our CMS plug-ins (i.e. Drupal, Wordpress, etc.) the Url is simple, usually "https://www.yourwebsite.com/stitchz_social_login/auth", otherwise make sure your website is ready to accept a POST request from Stitchz and enter that full Url. Check the "Web Site Set Up" page for your application for more details.
Next, enter the Url to your website's privacy page and the domain(s) you will be sending your authentication request from in the Privacy Url and Whitelist Domains fields respectively. The domain(s) in the Whitelist Domains field can be a comma separated list of domains and it is very important as Stitchz Social Login will only accept requests from one of the domains listed, i.e. "localhost, yourdomain.com".
Once all the fields are complete click the "Next" button to continue.
Figure 3 - New application details
On the next page, select the type of plan that best fits your needs, Figure 3, there are three choices, Basic, Professional, and Enterprise. The differences between the three can be found on the pricing page, but in general they are related to how many logins per month, how many providers you can setup for your site, etc. The plan type can be changed at any time, so for now, select Basic.
Figure 4 - Choosing a Stitchz Plan
Adding Social Login Providers
Now your application has been created, but no social login providers have been setup, that's our next step. To add a new Social Login Provider, a wizard will walk you through each step in creating a new provider, Figure 5. First, select a Social Login Identity Provider from the drop down list. The envelope icon next to a provider name indicates that the respective provider offers the user's email address in their profile data. As the wizard walks through each field, you will be asked to enter an App Key and Secret Token, we'll go to LinkedIn Login to get those after saving the new provider, for now, enter "0000000000000000000" for both fields. Write down or copy the "Stitchz Return URL" as we'll need this next. Click Save.
Figure 5 - Add new Identity Provider
After saving your provider, you'll be asked what permissions (or scope) you'd like to request from each end user logging in to you website. Select only the permissions you need, selecting too many without proper justification may scare your end users off. For now leave the default selection(s), r_basicprofile, and click "Save" at the bottom.
Create a new LinkedIn Application
Open a new browser window and go to: https://www.linkedin.com/secure/developer. Click the "Create Application" button to create your LinkedIn application. A new screen will open asking you for your website's details, Figure 6. Enter your Company Name, or select it from the drop down list. Next enter a name for your application, this will be presented to your end users when they login, that way they will be absolutely clear where and what they are logging in to. Now enter a concise description of your application/website and upload your website logo (it must be the same size height and width). Finally, select your website's use and enter your URL and business contact information, then click Submit.
Figure 6 - Create a new LinkedIn Application
On your new application's Authentication page, write down or copy the "Client ID" and "Client Secret" Authentication Keys, and leave the Default Application Permissions as is for now. Remember the "App URL" from when you created you Stitchz application above, add that as one of your LinkedIn "Authorized Redirect URLs" (if you don't remember it go to your Stitchz application's Settings page). Click "Update" at the bottom, Figure 7.
Figure 7 - LinkedIn Authentication Setup Page
Now, go back to your Stitchz Social Login list of Providers and click on "Edit" to open the LinkedIn edit dialog box. Enter your "App ID" and "App Secret" copied from LinkedIn into the Stitchz "App Key/ID" and "Secret Token" fields respectively. Click "Save".
If you're using one of our CMS plug-ins (i.e. Drupal, Wordpress, etc.) then go to your administrative page and configure the plug-in per the instructions. If not, your Return URL should be ready to accept a POST from Stitchz with a one time unique key or "token". Take the token submitted to your website by Stitchz and POST it back to your App URL (https://yourappurl/Authentication/v1/Auth) along with your desired response format (XML or JSON). Stitchz will verify your token and send back the authenticated user's identity packet. Take the response and log the user in to your website.
That's it! Now your end users are ready to begin logging in with their LinkedIn Social Identity!
If you need any further help getting started let us know at [email protected]