Login and Register Script with Linkedin API and Javascript ~ Web Speaks

Linkedin is the topmost social network for professionals. In this article I have explained how to use the Linkedin JavaScript API to access and use the user details from Linkedin. Linkedin provides a very beautiful API for developers to fetch the user details. We can use these details for a number of purpose on our web pages like login/register using Linkedin, showing user details from Linkedin, form autofills etc. See the live demo.

Live Demo Download Script

For registering the new application, go to Linkedin developers Page. Here you will get a from to fill, fill it as follows:

Now you will get the API key and secret for your application:

Adding Linkedin framework to page

<script type="text/javascript" src="http://platform.linkedin.com/in.js">
 api_key: lg2s1jdk6lfv //your application key
 onLoad: onLinkedInLoad //function to be called on JS framework load (optional)
 authorize: true   //true will detect if the user is logged in already (optional)
</script>

Add a Sign in with LinkedIn button

Adding Linkedin JS framework will give access to various user variables on our page. We can access these variables as <?js= firstName ?>. The following code will add the 'Linkedin Login' button on our page. After successful login, the button will be replaced by the message written in the script and the JS variables will be replaced by there actual values.

<script type="in/Login">
 Welcome, <?js= firstName ?> <?js= lastName ?>.
 </script>

Autofill Login form LinkedIn

Linkedin can fill details in the login/register form on our web pages. For this it provides a specific script tag of "IN/Login" type. See the following code:

<script type="IN/Login"> 
 <form method="post" action="register.html">
 <table>
  <tr>
   <td>First Name:</td><td><input type="text" name="first_name" value="<?js= firstName ?>" /></td>
  </tr>
  <tr>
   <td>Last Name:</td><td><input type="text" name="last_name" value="<?js= lastName ?>" /></td>
  </tr>
  <tr>
   <td>Password:</td><td><input type="password" name="pwd" value="" /></td>
  </tr>
  <tr>
   <td colspan="2"><input type="submit" value="Register" /></td>
  </tr>
 </table>
 </form>
</script>

Using Callback on LinkedIn JS load

<script type="text/javascript">
// 1. Runs when the JavaScript framework is loaded
function onLinkedInLoad() {
 IN.Event.on(IN, "auth", onLinkedInAuth);
}

// 2. Runs when the viewer has authenticated
function onLinkedInAuth() {
 IN.API.Profile("me").result(displayProfiles);
}

// 3. Runs when the Profile() API call returns successfully
// Insert user variables in the HTML
function displayProfiles(profiles) {
 member = profiles.values[0];
 document.getElementById('demo').style.display = 'block';
 var profile = "<p class='name' id=\"" + member.id + "\">" +  member.firstName + " " + member.lastName + "</p>";
 profile += '<p class="headline">'+member.headline+'</p>';
 document.getElementById("profiles").innerHTML = profile;
 document.getElementById("picture").innerHTML = '<img src="'+member.pictureUrl+'" class="image" />';
}
</script>

Complete Script

<html>
<head>
<title>WebSPeaks.in | LinkedIn API Usage<title>
<script type="text/javascript" src="http://platform.linkedin.com/in.js">
 api_key: lg2s1jdk6lfv
 onLoad: onLinkedInLoad
 authorize: true
</script>
<script type="text/javascript">
// 1. Runs when the JavaScript framework is loaded
function onLinkedInLoad() {
 IN.Event.on(IN, "auth", onLinkedInAuth);
}

// 2. Runs when the viewer has authenticated
function onLinkedInAuth() {
 IN.API.Profile("me").result(displayProfiles);
}

// 3. Runs when the Profile() API call returns successfully
function displayProfiles(profiles) {
 member = profiles.values[0];
 document.getElementById('demo').style.display = 'block';
 var profile = "<p class='name' id=\"" + member.id + "\">" +  member.firstName + " " + member.lastName + "</p>";
 profile += '<p class="headline">'+member.headline+'</p>';
 document.getElementById("profiles").innerHTML = profile;
 document.getElementById("picture").innerHTML = '<img src="'+member.pictureUrl+'" class="image" />';
}
</script>
</head>
<body>
<div id="main">
 <h4>JS template method</h4>
 <script type="in/Login">
  <div class="data">
   <div class="picture">
    <img alt="<?js= headline ?>" src="<?js= pictureUrl ?>" class="image" />
   </div>
   <div class="profiles">
    <p class='name'><?js= firstName ?> <?js= lastName ?></p>
    <p class="headline"><?js= headline ?></p>
   </div>
  </div>
 </script>

 <div id="demo">
  <h4>Dom insertion method</h4>
  <div class="data">
   <div id="picture" class="picture"></div>
   <div id="profiles" class="profiles"></div>
  </div>
 </div>

 <div id="form">
  <h4>Register/Login Form Autofill</h4>
  <script type="IN/Login"> 
   <form method="post">
   <input type="hidden" name="linkedin-id" value="<?js= id ?>" />
   <table>
    <tr>
     <td>First Name:</td><td><input type="text" name="first_name" value="<?js= firstName ?>" /></td>
    </tr>
    <tr>
     <td>Last Name:</td><td><input type="text" name="last_name" value="<?js= lastName ?>" /></td>
    </tr>
    <tr>
     <td>Password:</td><td><input type="password" name="pwd" value="" /></td>
    </tr>
    <tr>
     <td colspan="2"><input type="submit" value="Register" /></td>
    </tr>
   </table>
   </form>
  </script>
 </div>
</div>
</body>
</html>

Register/login.php

<?php
$first_name = $_POST['first_name'];
$last_name = $_POST['last_name'];
$pwd = $_POST['pwd'];
$linkedin_id = $_POST['linkedin-id'];

//write mysql insert logic dor registration
//or
//write mysql logic for login
?>

CSS Code

body {
 font-family:Helvetica,"Nimbus Sans L",sans-serif;
}
#main{
    -moz-box-align: center;
    -moz-box-orient: vertical;
    border: 0.5em solid #E3E9FF;
    display: block;
    height: auto;
    margin: auto;
    padding: 10px;
    text-overflow: ellipsis;
    width: 350px;
    word-wrap: break-word;
}
.data{
 background-color: #e3e3e3;
    height: 88px;
    padding: 5px;
 margin-bottom:20px;
}
.image{
 border: 1px solid #ffffff;
 padding:3px;
}
.picture{
 float:left;
 width:90px;
}
.profiles{
 float:left;
 width:225px;
 padding: 0 0 0 10px;
}
p.name{
 color:#069;
 font-weight:bold;
 margin:0;
}
p.headline{
 font-size:12px;
}
#demo{
 display:none;
}

5 comments

l3aronsansgland

October 30, 2013 at 6:23 AM

A downloadable projet would be welcome. I can't make it work so far.

Genival Januario

January 8, 2014 at 9:13 AM

Hello Arvin,
I like the your post.
I would like that when Linkedin return data in login, automatically to do register the data in my site, without appear form or data confirmation.
Could you help me in this problem?