August 29, 2014
Hot Topics:
RSS RSS feed Download our iPhone app

Using LinkedIn JavaScript API for User Authentication and Profile Retrieval

  • March 10, 2014
  • By Bipin Joshi
  • Send Email »
  • More Articles »

Introduction

Integrating third-party sign-in with a website is quite common these days. Just like Facebook and Twitter, LinkedIn too allows you to ingrate LinkedIn authentication with your own website. One simple way to achieve such an integration is to use LinkedIn JavaScript API. Using this API you can authenticate a user with their LinkedIn credentials and also retrieve their profile and connection information. Once retrieved you can use that information to integrate LinkedIn authentication with your website's security and membership framework.

Creating a LinkedIn Application

The first step in integrating LinkedIn authentication with your website is to create a LinkedIn application. To do so, go to LinkedIn Developer Network and create a new application. The following figure shows  the main application creation page.

Main Application Creation Page
Main Application Creation Page

While there are many mandatory fields of the above form, the sections highlighted above are important. Especially, notice the Website URL and Default Scope entries. The Website URL should contain a URL that identifies your website. During development you can use a localhost based path such as http://localhost:12345. However, once the development is over you should change it to a real website address. The default scope area is used to indicate the default set of permissions that a user must grant to the application being created. In the above figure a user must share his basic profile information with the application being created.

There is another section (not shown in the above figure) titled JavaScript API Domains that contains one or more website URLs. For the sake of this example you can use a localhost based URL in that textbox.

Getting an Application API Key

Once you enter all the required fileds, hit Save to create the application. Upon successful creation you will also be shows details such as API Key and Secret Key. In this example API Key is sufficient and you should note it down somewhere before going ahead. The following figure shows the area where API Key is shown:

OAuth Keys
OAuth Keys

Loading LinkedIn JavaScript Library

Now that you have created a LinkedIn application, you can proceed to integrating it with your website. Create a new website in your favorite tool / IDE (say Visual Studio) and add an HTML page to the website. Integrating LinkedIn authentication and retrieving user profile requires that you load the LinkedIn JavaScript framework into your webpage. This can be done by incorporating the following markup in the webpage.

<script type="text/javascript" src="http://platform.linkedin.com/in.js">
  api_key: <put_your_api_key_here>
  authorize: true
</script>

The above markup consists of a <script> block that points to http://platform.linkedin.com/in.js - the core LinkedIn JavaScript framework. Notice that inside the block you need to place the api_key you obtained in the previous section. When the web page loads, the LinkedIn JavaScript framework checks whether the URL as mentioned in the application's configuration and that of the requesting page matches or not. If the API key is invalid you will get a JavaScript in the browser's JavaScript console (see below).

Key is Invalid
Key is Invalid

The authorize setting controls whether a user should sign-in to the application even if he has previously granted permissions to the application under consideration. Set authorize to true.

Displaying the Sign-in Button

A website with LinkedIn authentication will usually present a button to the end user that hints that the user is supposed to supply his LinkedIn credentials in order to sign-in. To render such a button you can add the following script in the web page.

<script type="in/Login">
</script>

Setting the type attribute to in/Login does the trick and you get a sign-in button like this:

Sign-In Button
Sign-In Button

You can place the above <script> block anywhere you wish to display the sign-in button. When a user clicks this Sign-in button, another browser window opens that shows the LinkedIn sign-in page where he can supply his LinkedIn credentials (see below).

Linked-In Sign-In Page
Linked-In Sign-In Page

The LinkedIn authentication is based on OAuth 2 and is handled by LinkedIn. If the user supplies valid credentials he is signed-in to LinkedIn and the sign-in window is closed.

Wiring Auth Event Handler

Signing-in with LinkedIn credentials is just one part of the story. Once a user is successfully authenticated you may want to get notified so that you can proceed  to retrieve his profile details. To get such a notification you can wire an event handler to the auth event. To wire an auth event handler, first you need to handle the load event of the LinkedIn JavaScript framework and once the framework is loaded attach the auth event handler. The following piece of code shows how this can be done:

<script type="text/javascript" src="http://platform.linkedin.com/in.js">
  api_key: <put_your_api_key_here>
  onLoad: OnLinkedInFrameworkLoad
  authorize: true
</script>

The above markup sets the onLoad event handler to a JavaScript function named - OnLinkedInFrameworkLoad. The OnLinkedInFrameworkLoad() function looks like this:

function OnLinkedInFrameworkLoad() {
  IN.Event.on(IN, "auth", OnLinkedInAuth);
}

The OnLinkedInFrameworkLoad() function wires the auth event handler to another JavaScript function - OnLinkedInAuth(). Notice that this event is wired using the IN object of the framework. The OnLinkedInAuth() function is responsible for retrieving the user's profile and is discussed in the next section.

Retrieving a User Profile

As mentioned earlier OnLinkedInAuth() function is called when a user successfully signs-in to the system. Once a user is authenticated you can go ahead and read his profile details. To grab the profile details you use the "me" keyword. The following code shows how this is done.

function OnLinkedInAuth() {
    IN.API.Profile("me").result(ShowProfileData);
}

The above code passes ShowProfileData() - a custom JavaScript function - to the result() call. This way when the profile information is retrieved it is passed to the ShowProfileData() function as a parameter.

The ShowProfileData() function is shown below:

function ShowProfileData(profiles) {
    var member = profiles.values[0];
    var id=member.id;
    var firstName=member.firstName; 
    var lastName=member.lastName; 
    var photo=member.pictureUrl; 
    var headline=member.headline; 

    //use information captured above
}

As you can see the ShowProfileData() functions receives the profile's parameter. To get the profile of the "me" user (current user) you use profiles.values[0] and store it in a member variable. You can then access various pieces of information such as id, firstName, lastName, pictureUrl and headline. There are many more pieces of information that you can retrieve depending on the permissions granted by a user. A list of all the possible fields can be obtained here. What to do with the profile data retrieved depends on your need. For example, you may store these details in your website's database or take the user to your website's registration page and pre-populate certain fields. 

Summary

LinkedIn JavaScript API allows you to integrate LinkedIn authentication with your website. You  can also retrieve the user profile using the API. There are many other uses of the API as described in the official documentation. This article illustrated a basic authentication and profile retrieval using the JavaScript API.


Tags: JavaScript, authentication, LinkedIn, LinkedIn Profile




Comment and Contribute

 


(Maximum characters: 1200). You have characters left.

 

 


Sitemap | Contact Us

Rocket Fuel