Login and Register Script with Linkedin API and Javascript

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.

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;
}

PHP devloper

Saturday 5 October 2013