Search code examples
javascriptrestoauthlinkedin-apirestful-authentication

Retrieve LinkedIn Profile Picture Using JavaScript with REST API


I am currently implementing a LinkedIn authorization and sign in feature on my web application and am using the linkedin JavaScript Developer sample code:

<script type="text/javascript" src="//platform.linkedin.com/in.js">
    api_key: YOUR_API_KEY_HERE
    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);
    }

    // Handle the successful return from the API call
    function onSuccess(data) {
        console.log(data);
    }

    // Handle an error response from the API call
    function onError(error) {
        console.log(error);
    }

    // Use the API call wrapper to request the member's basic profile data
    function getProfileData() {
        IN.API.Raw("/people/~").result(onSuccess).error(onError);
    }

</script>

This segment of code returns the first name, last name, headline (description of job title), and id using the raw() method within the getProfileData() method.

I am now trying to get the users profile picture as well to use on my application and cannot figure out how to do so with the code I already have. The linkedIn developer site gives the following example of how to do so with the REST api:

https://api.linkedin.com/v1/people/~:(picture-url)?format=json

I have never used the REST API so I cannot figure out how to implement this code into the existing segment that I have. How could i make a request to this REST API code with my existing JS code so that the prorgam can get both text data and the users image?


Solution

  • If you just want to retrieve the profile image, you don't need it in the JSON format. Just use

    function onSuccess(data) {
         String imageUrl = "http://api.linkedin.com/v1/people/"+data.id+"/picture-url";
         //i.e. $("img").attr("src",imageUrl);
    }
    

    Replace {user-id} with the actual user id. You can access it once you pass the authorization scheme.