Geek Answers Handbook

How to login with linkedin using javascript and display profile information

I want to integrate Linkedin login with javascript. I searched for it and got relevant results. But many search results say below code:

<script type="in/Login">
</script>

used to create a login button. But I want to use my own button and call the function in the onClick event in my HTML. Help in the right direction.

My code is:

function linkedinLogin(){
    console.log('linkedinLogin called');
    var src="http://platform.linkedin.com/in.js"
    api_key: 'XXXXXXXXXXXXXXXX'
    authorize: true
    onLoad: OnLinkedInFrameworkLoad
}

function OnLinkedInFrameworkLoad() 
{
      IN.Event.on(IN, "auth", OnLinkedInAuth);
}

function OnLinkedInAuth() {
    IN.API.Profile("me").result(ShowProfileData);
}

function ShowProfileData(profiles) 
{
    var member = profiles.values[0];
    console.log(member);
    var id=member.id;
    var firstName=member.firstName; 
    var lastName=member.lastName; 
    var photo=member.pictureUrl; 
    var headline=member.headline; 

    //use information captured above
    var str="<b>id</b> : "+id+"<br>";
    str +="<b>firstName: </b>"+firstName+"<br>";
    str +="<b>lastName: </b>"+lastName+"<br>";
    str +="<b>photo: </b>"+photo+"<br>";
    str +="<b>headline: </b>"+headline+"<br>";
    str +="<input type='button' value='Logout' onclick='logout();'/>";
    document.getElementById("status").innerHTML = str;
}

And this is my HTML snippet:

<li>
    <a href="javascript:void(0);" onClick="linkedinLogin()">
        <img src="images/icon_linkedIn.png" />
        <span>LinkedIn</span>
    </a>
</li>
+4
source share
1 answer

<html>
<head>
<title>LinkedIn JavaScript API Hello World</title>

<!-- 1. Include the LinkedIn JavaScript API and define a onLoad callback function -->
<script type="text/javascript" src="https://platform.linkedin.com/in.js">
  api_key: xxx
  onLoad: onLinkedInLoad
  authorize: true
</script>

<script type="text/javascript">
  // 2. 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").fields("id","first-name", "last-name", "email-address").result(displayProfiles);
  }

  // 2. Runs when the Profile() API call returns successfully
  function displayProfiles(profiles) {
    member = profiles.values[0];
    document.getElementById("profiles").innerHTML = 
      "<p>"+member.id+"<br> " +  member.firstName + "<br> " + member.lastName + "<br>"+member.emailAddress+"</p>";
  }
</script>

</head>
<body>

<!-- 3. Displays a button to let the viewer authenticate -->
<script type="in/Login"></script>

<!-- 4. Placeholder for the greeting -->
<div id="profiles"></div>

</body>
</html>
Run codeHide result

Can you try this?

0
source

More articles:


All Articles