Home > Uncategorized > LinkedIn OAuth in Javascript – Manual Flow

LinkedIn OAuth in Javascript – Manual Flow

linkedinThis is very much on the same vein as my last post on Facebook OAuth, and demonstrates how a very similar method can be used to read and display linkedin Connections from a user.

As with all OAuth systems, the manual flow is as follows (a) Send the user to a login page (b) get a code back (c) exchange this code for an access token (d) use the access token to request data from the provider’s API.

In this example, it is designed for use in situations where XDR is allowed, such as Phonegap, Windows store apps, Firefox os, etc – not a normal website. However, the flow could be adapted using JSONP.

So, step 1. is to send the user to the login page

function openLoginDialog()
{
console.log(“openLoginDialog()”);
var strUrl = “https://www.linkedin.com/uas/oauth2/authorization?”;
strUrl += “response_type=code”;
strUrl += “&client_id=xxxxxxxxxxxxxx”;
strUrl += “&scope=r_fullprofile%20r_emailaddress%20r_network”;
strUrl += “&state=DCEEFWF45453sdffef424”;
strUrl += “&redirect_uri=http://xxxxxxxxxxxxxxx”;
location.href=strUrl;
}

You will need to set up an “App” at developers.linkedin.com, and you will also need access to a web server, in the above code, you’ll need to replace client_id and redirect_uri. “state” appears to be an extra security measure, but quite an ineffective one, in my mind, it can be any random string.

Once the user logs in, then LinkedIn will refer the user back to your redirect_uri with the “code” parameter added. You have about 10 seconds to exchange this for an access token, any delay at this point, and the key exchange will fail.

function ExchangeCodeForAccessToken(code,callback)
{
console.log(“ExchangeCodeForAccessToken(” + code + “)”);
var strUrl = “https://www.linkedin.com/uas/oauth2/accessToken?”;
strUrl += “grant_type=authorization_code”;
strUrl += “&code=” + code;
strUrl += “&redirect_uri=http://xxxxxxxxxxxxxxxx”;
strUrl += “&client_id=xxxxxxxx”;
strUrl += “&client_secret=xxxxxxxxxx”;
$.get(strUrl,function(data){
console.log(“ExchangeCodeForAccessToken() ” + data);
if (typeof(data)==”string”)
{
data = eval(“(” + data + “)”);
}
OAUTH_Access_token = data.access_token;
var currentDate = new Date();
OAUTH_Expiry = new Date(currentDate.getTime() + 60*24*60*60*1000);
localStorage.setItem(“OAUTH_Access_token”,OAUTH_Access_token);
localStorage.setItem(“OAUTH_Expiry”,OAUTH_Expiry);
callback();
});
}

Unlike facebook, all tokens have a lifetime of 60 days, it doesn’t vary, and the response of the key exchange is in JSON.  You’ll need to replace the client_id and client_secret from the developer console on Linkedin for your app.

Once you have the access_token, then you can call the linkedin API, here, for example, I am getting my connections, and displaying them in a HTML table using mustache

function logged_in()
{
console.log(“logged_in()”);

var strUrl = “https://api.linkedin.com/v1/people/~/connections?”;
strUrl += “format=json”;
strUrl += “&oauth2_access_token=” + OAUTH_Access_token;
$.get(strUrl,function(data){
console.log(“logged_in() ” + data);
if (typeof(data)==”string”)
{
data = eval(“(” + data + “)”);

}
connections = data;
var template = $(“#friendlistTpl”).html();
var html = Mustache.to_html(template, data);
$(“#friendlist”).html(html);
});
}

Where my Mustache template is as follows:

<div id=”friendlist”></div>

<script id=”friendlistTpl” type=”text/template”>
<table>
{{#values}}
<tr>
<td>
<img src=”{{pictureUrl}}”>
</td>
<td>
{{firstName}} {{lastName}} <br>
{{headline}}
</td>
</tr>
{{/values}}
</table>
</script>

There is plenty more data returned from this call, and much more to explore in the LinkedIn API.

 

 

Advertisements
Categories: Uncategorized
  1. AK
    May 16, 2014 at 5:20 am

    How do we set redirect_uri on phonegap ?

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: