Login and Register Script with Linkedin API and Javascript

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

Written by Arvind Bhardwaj

Arvind is a certified Magento 2 expert with more than 10 years of industry-wide experience.

Website: http://www.webspeaks.in/

8 thoughts on “Login and Register Script with Linkedin API and Javascript”

  2. 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?

  6. Hey I know this is off topic but I was wondering
    if you knew of any widgets I could add to my
    blog that automatically tweet my newest twitter updates.
    I’ve been looking for a plug-in like this for quite some time and was
    hoping maybe you would have some experience with something like this.
    Please let me know if you run into anything.

    I truly enjoy reading your blog and I look forward to your new updates.

  7. What’s Taking place i am new to this, I stumbled upon this I’ve found It absolutely useful and it has helped me out
    loads. I hope to give a contribution & assist different customers like its
    aided me. Great job.

  8. I was suggested this website via my cousin. I am no longer positive whether
    this submit is written by means of him as nobody else recognise such
    designated about my difficulty. You are wonderful! Thank you!

Comments are closed.