How to Login LinkedIn with JavaScript API

By enabling the social login on the website it is easier for the user to easily register or sign in on the website without entering its details.

In this tutorial, I am adding LinkedIn Login on the webpage.

LinkedIn provides a very simple JavaScript API for developers to fetch the user details after successfully authorization and use it for registration or login.

How to Login LinkedIn with JavaScript API


Contents

  1. Create Application
  2. Script
  3. Table Structure
  4. Configuration
  5. Save user
  6. Demo
  7. Conclusion

 


 

1. Create Application

  • First require to create a new app.
  • Fill the details of your Application and click on the Submit button.

How to Login LinkedIn with JavaScript API

  • You will get your application authentication keys and require to the set the Default Application Permissions and Authorized redirect URLs.

How to Login LinkedIn with JavaScript API

  • Navigate to JavaScript from the menu.
  • Add Valid SDK domains e.g. http://demo.makitweb.com and click on update button.

How to Login LinkedIn with JavaScript API


 

2. Script

I am the adding LinkedIn login script on specified redirect URL path (http://demo.makitweb.com/linkedin_login/index.php).

Steps –

  • First place following script in <head> section. Here, replace the api_key value with your app Client ID.
<script type="text/javascript" src="//platform.linkedin.com/in.js">
 api_key: YOUR_APP_CLIENT_ID
 authorize: true
 onLoad: onLinkedInLoad
</script>
  • Created following functions –
    • onLinkedInLoad – Define an event handler which called when the user has authorized the application and call getProfileData() method.
    • getProfileData – Select the user details e.g. first name, last name, email, profile photo.
    • logout – Logout the user.
    • onLogout – Call on the user logout.
// Setup an event listener to make an API call once auth is complete
function onLinkedInLoad() {
 IN.Event.on(IN, "auth", getProfileData);
}

// Logout user
function logout(){
  IN.User.logout(onLogout);
}

function onLogout(){
  console.log('Logout successfully');
}

// Use the API call wrapper to request the member's basic profile data
function getProfileData() {
 
 IN.API.Profile("me").fields("first-name", "last-name", "email-address","picture-url").result(function (data) {
 
  var userdata = data.values[0];
  var fname = userdata.firstName;
  var lname = userdata.lastName;
  var email = userdata.emailAddress;
  var profile_photo = userdata.pictureUrl;
  logout();
 }).error(function (data) {
  console.log(data);
 });
}
  • To add the LinkedIn button place following script to the place where to display in <body> section.
<script type="in/Login"></script>

Send an AJAX request to save the user on successfully selecting the user details and update the table layout and call the logout() function.

Completed Code

<!doctype html>
<html>
 <head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script type="text/javascript" src="//platform.linkedin.com/in.js">
   api_key: 81n4hu3u7jybix
   authorize: true
   onLoad: onLinkedInLoad
  </script>

  <script type="text/javascript">
 
  // Setup an event listener to make an API call once auth is complete
  function onLinkedInLoad() {
   IN.Event.on(IN, "auth", getProfileData);
  }

  // Logout user
  function logout(){
    IN.User.logout(onLogout);
  }

  function onLogout(){
    console.log('Logout successfully');
  }

  // Use the API call wrapper to request the member's basic profile data
  function getProfileData() {
 
   IN.API.Profile("me").fields("first-name", "last-name", "email-address","picture-url").result(function (data) {
    
    var userdata = data.values[0];

    $.ajax({
     url: "saveuser.php",
     type: "post",
     data: {"social_type": "linkedin","fname": userdata.firstName,"lname": userdata.lastName,"email": userdata.emailAddress, "profile_image": userdata.pictureUrl },
     success: function(response){

      $('#tableUser').css('display','block');
      $('#fullname').text( userdata.firstName + " " + userdata.lastName);
      $('#email').text( userdata.emailAddress );
      $('#profile_photo').attr( 'src',userdata.pictureUrl );
      logout();
     }
   });

  }).error(function (data) {
    console.log(data);
  });
 }

 </script>
 </head>
 <body>
  <!-- LinkedIn signin button -->
  <script type="in/Login"></script>

  <table id='tableUser' style='display: none;'>
   <tr>
     <td>Name</td>
     <td><span id='fullname'></span></td>
   </tr>

   <tr>
    <td>Email</td>
    <td><span id='email'></span></td>
   </tr>

   <tr>
    <td>Profile image</td>
    <td><img src='' width='32' height='32' id='profile_photo'></td>
   </tr>

  </table>
 </body>
</html>

 

3. Table structure

Using users table to save the user after successful login with LinkedIn.

CREATE TABLE `users` (
 `id` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT,
 `fname` varchar(80) COLLATE utf8_unicode_ci NOT NULL,
 `lname` varchar(80) COLLATE utf8_unicode_ci NOT NULL,
 `email` varchar(80) COLLATE utf8_unicode_ci NOT NULL,
 `social_type` varchar(20) COLLATE utf8_unicode_ci NOT NULL,
 `profile_image` varchar(255) COLLATE utf8_unicode_ci NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

 

4. Configuration

Create a config.php file for database configuration.

Completed Code

<?php
$host = "localhost"; /* Host name */
$user = "root"; /* User */
$password = ""; /* Password */
$dbname = "tutorial"; /* Database name */

$con = mysqli_connect($host, $user, $password,$dbname);
// Check connection
if (!$con) {
 die("Connection failed: " . mysqli_connect_error());
}

 

5. Save user

Create a saveuser.php file.

Save POST user details to the users table.

Completed Code

<?php

include "config.php";

$social = "";
if(isset($_POST['social_type'])){
 $social = $_POST['social_type'];
}

$fname = $_POST['fname'];
$lname = $_POST['lname'];
$email = $_POST['email'];
$profile_image = $_POST['profile_image'];

// Check user
$user_check = mysqli_query($con, "select count(*) as allcount from user_linkedin where social_type='".$social."' and email='".$email."'");
$usercheckData = mysqli_fetch_array($user_check);

if($usercheckData[0]['allcount'] == 0){
  mysqli_query($con,"insert into user_linkedin(fname,lname,email,social_type,profile_image) values('".$fname."','".$lname."','".$email."','".$social_type."','".$profile_image."')");
  echo "Save successfully";
}else{
  echo "Update successfully";
}

exit;

 

6. Demo

Click on the Sign in with LinkedIn button.


 

7. Conclusion

Use the above script to add registration or sign in of the user using LinkedIn to your web application but replace the api_key with your client id.

Related Post

Spread the love

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *