LinkedIn OAuth in Javascript – Manual Flow
This 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.
How do we set redirect_uri on phonegap ?
LikeLike