google

Integrate Linked In JavaScript API with ASP.NET

| Monday, March 11, 2013
This page on Linked - In developer website explains the method to integrate JavaScript API with ASP.NET.
There are various ways Linked-In can be integrated in an ASP.NET website. I will explain the JavaScript API integration in this article.

Following are the steps of the Linked-In JS API integration.

1. Register yourself as developer on the linked-in website.
2. Create a new application or use an existing one. API Key and Secret Key of the application will be used for this integration.
3. Most Important - Make sure to specify the domain or list of domains for which above API key will be used, in "JavaScript API Domains" as in this screenshot:

JavaScript API Domains
4.Add following script in the <head> section of the html or aspx page to access the Linked-In API framework.
 <script type="text/javascript" src="http://platform.linkedin.com/in.js">  
  api_key: your_api_key_goes_here  
 </script>  

5. Add the following HTML to the body of your document to display the Linked-In Sign In button.
 <script type="in/Login">  
 </script>  



6. On clicking the above button, it should popup an authorization window asking you to Sign In to LinkedIn and grant API permission to your application. By default this pop up will ask for "Basic Profile Permissions" only.
Sign In and grant API permission
7. Test the page by reloading the page a few times. Notice that the login button reappears every time, even though you have already logged into the app and granted permission.Configure the authorize parameter in the framework script tag:
 <script type="text/javascript" src="http://platform.linkedin.com/in.js">  
  api_key: your_api_key_goes_here   
  authorize: true  
 </script>  

So far we have done integrating the LinkedIn Sign In and API permissions. In the next part I will explain how to display the details from the LinkedIn Profile.

LinkedIn JavaScript API uses REST services as back end. Lets rewrite the code above.

1. Introduce two parameters while importing the JS API framework.
 <script type="text/javascript" src="http://platform.linkedin.com/in.js">  
     api_key: your api key  
     onLoad: onLinkedInLoad  
     authorize: true  
   </script>  

The onLoad parameter tells the framework to wait until it's finished loading and then invoke a JavaScript function of your choosing. In this example, the function's name is onLinkedInLoad.
As discussed previously, setting authorize to true automatically authenticates any viewers who have previously granted your site permission using the JavaScript API.

2.The IN Object- The IN object is your way to hook into the LinkedIn JavaScript API. It's what the framework script tag inserts into the page. All the JavaScript API functions will begin with IN..
 function onLinkedInLoad() {  
       IN.Event.on(IN, "auth", onLinkedInAuth);  
     }  

In.Events. Events listen for activities, and run code when they happen. This line says to listen for the auth event, which triggers when someone signs in, and execute the onLinkedInAuth() function afterwards. Events are covered in more detail in the JavaScript API Reference.

3. Add the following HTML to the body of your document to display the Linked-In Sign In button.
 <script type="in/Login">  
 </script>  




4. Fetching profile information
 function onLinkedInAuth() {  
       IN.API.Profile("me")  
       .result(displayProfiles);  
     }  

The first part, IN.API.Profile("me"), makes a request to the LinkedIn API servers for the profile belonging to the signed-in user. The keyword "me" is a special short-hand way of referring to the signed-in member.
After it successfully retrieves data, the JavaScript framework sends the information to a callback function you specify in the result() method. In this case, it's a reference to the displayProfiles() function which we'll define below.
The In.API.Profile() method supports three of ways to identify a member: "me", member ids (like 4KoRHzE6GO), and public profile URLs.

5. Add controls in the body of the page to display profile details.
 Hello  
   <asp:Label ID='lblName' runat="server"></asp:Label>  

6. Results from the Profile API come grouped under one parameter.The displayProfiles() function receives a parameter which is the complete JSON-formatted result of the underlying call. By default the data is always in a values array. Since this is the Profile API call, values contains profile data. In this case, there's only one profile for the signed-in member, me, so it's in values[0]. The fields and field names returned for a profile are : id, firstName, lastName, headline, and pictureUrl.

 function displayProfiles(profiles) {  
     member = profiles.values[0];  
      document.getElementById("lblName").innerHTML = member.firstName + " " + member.lastName;  
 }  

7. To fetch additional profile details, fields() method can be used. Change the "onLinkedInAuth" method to include fields() method.

 function onLinkedInAuth() {  
       IN.API.Profile("me")  
       .fields("firstName", "lastName", "industry", "location:(name)", "picture-url", "headline", "summary")  
       .result(displayProfiles);  
     }  

8. Change the "displayProfiles" method as follows and add additional control in the body of the page to display more details.

 function displayProfiles(profiles) {  
       member = profiles.values[0];  
       alert(JSON.stringify(member));  
       member.lastName + "<br/> Location is " + member.location.name + " </p>";  
       document.getElementById("lblName").innerHTML = member.firstName + " " + member.lastName;  
       document.getElementById("imgProfile").src = member.pictureUrl;  
       document.getElementById("lblSummary").innerHTML = "<pre>" + member.summary + "</pre>";  
       document.getElementById("lblIndustry").innerHTML = member.industry;  
 }  

Please note
 alert(JSON.stringify(member)); 

This will display the JSON string returned by the LinkedIn API call.

LinkedIn contains many other useful resources beyond member profiles. The JavaScript API allows you access to every part of LinkedIn exposed through REST APIs. For a complete list read out REST APIs documentation.
The commonly used resources have high-level wrapper classes to help you access them (IN.API.Profile is one such wrapper). Currently, these are:
  • IN.API.Connections
  • IN.API.MemberUpdates
  • IN.API.NetworkUpdates
  • IN.API.PeopleSearch
  • IN.API.Profile
9. Handling errors:  The JavaScript API will inspect the REST response on your behalf and if an error occurred (the API returns an HTTP non-200 status code), the framework will notify you. You can specify a special error handler for using the optional error() method:

 function onLinkedInAuth() {  
       IN.API.Profile("me")  
       .fields("firstName", "lastName", "industry", "location:(name)", "picture-url", "headline")  
       .result(displayProfiles)  
       .error(displayProfilesErrors);  
     }  

Add a div in the body to display the errors.

 <div id="profiles">  
   </div>  

Display error message in the above div as follows:

 function displayProfilesErrors(error) {  
       profilesDiv = document.getElementById("profiles");  
       profilesDiv.innerHTML = error.message;  
       console.log(error);  
     }  

LinkedIn Members publish a variety of information about themselves on their member profile. Check out the link to view list of Profile Fields.

By default the API call processes "BasicPofile" permissions vide r_basicprofile.

To access email address fields, API requires r_emailaddress member permission.
To access profile related fields which are not covered under basic profile permissions like three-current-positions, date-of-birth etc, the API request requires r_fullprofile member permission.
To access contact information fields, API requires r_contactinfo member permission.
To access connection fields, API requires r_networkmember permission.
To access group membership fields, API requires rw_groupsmember permission.
To access network update fields, API requires rw_nusmember permission.

Scope parameter is added in the framework request to access fields other than basic profile.

 <script type="text/javascript" src="http://platform.linkedin.com/in.js">  
     api_key: your api key  
     scope: r_basicprofile r_emailaddress r_fullprofile  
     onLoad: onLinkedInLoad  
     authorize: true  
   </script>  

All basic, email and full profile fields can be accessed with above permissions.

 function onLinkedInAuth() {  
       IN.API.Profile("me")  
       .fields("firstName", "lastName", "industry", "location:(name)", "picture-url", "headline", "summary", "num-connections", "public-profile-url", "distance", "positions", "email-address", "educations", "date-of-birth")  
       .result(displayProfiles)  
       .error(displayProfilesErrors);  
     }  


Leave comments if anything in above code doesn't work. I have working code with me. Drop me your email id to get same.


Reference Links

9 comments:

  1. Thanks! I was stuck at scope permissions part. your article really helped.

    ReplyDelete
  2. pooja my email id is orientdeveloper@gmail.com pls send me sample code
    thanks in advance

    ReplyDelete
  3. I'd love to get this code as well justin(at)liquidprint(dot)com

    ReplyDelete
  4. I blog quite often and I really appreciate your information. The article
    has truly peaked my interest. I will book mark your blog and keep
    checking for new information about once per week. I opted in for your RSSfeed too.


    Here is my web blog ... monthly insurance car

    ReplyDelete
  5. Hello,my email id is amiparadimpal@gmail.com pls send me sample code
    thanks in advance

    ReplyDelete

Next Prev
▲Top▲