bannerColor WARNING_YELLOW templateName stackForums

Sign In With LinkedIn

The LinkedIn JavaScript API makes it incredibly easy to let you customers authenticate using their LinkedIn account. You can then use that information to register them for your own site, identify them in a blog comment, or otherwise use this to streamline their experience. This provides you with increased registrations with minimal work.

The most important piece of data for you to capture and store is the LinkedIn member id. This is an application-specific unique identifier for every member. With this token, you can easily retrieve profile information about any of your users who have authenticated using Sign In with LinkedIn.

Our introduction, Hello World in Five Easy Steps, shows how you can get an API key, add our JavaScript framework to your page, and create a Sign In with LinkedIn button that looks like:

Localize the plugin

You can localize the Sign In plugin in the same language as the main site. Following is the list of languages that we support with their corresponding language code:

  1. English - en_US
  2. Arabic - ar_AE
  3. Chinese (Simplified) - zh-CN
  4. Chinese (Traditional) - zh-TW
  5. Czech - cs_CZ
  6. Danish - da_DK
  7. Dutch - nl_NL
  8. French - fr_FR
  9. German - de_DE
  10. Indonesian - in_ID
  11. Italian - it_IT
  12. Japanese - ja_JP
  13. Korean - ko_KR
  14. Malay - ms_MY
  15. Norwegian - no_NO
  16. Polish - pl_PL
  17. Portuguese - pt_BR
  18. Romanian - ro_RO
  19. Russian - ru_RU
  20. Spanish es_ES
  21. Swedish - sv_SE
  22. Tagalog - tl_PH
  23. Thai - th-TH
  24. Turkish - tr_TR

In order to convert the plugin in a language of your choice, simply supply the framework with the "lang" parameter and the 5-character lang-locale code of the desired language as shown in the example below. If the "lang" parameter is not supplied or the desired lang-locale is not found/supported, the plugin will fall back to English.

1
2
3
4
5
<script src="//platform.linkedin.com/in.js" type="text/javascript">
        api_key: YOUR_API_KEY_GOES_HERE
        authorize: true
        lang:  es_ES
      </script>

For the above example, the text on the Sign In plugin will convert to Spanish and the plugin will look like:

Convert LinkedIn member into identified member of your site

After the member has signed in and authenticated your application, you have access to their member id and basic profile information. Your key is getting that data back to your server.

One option is to use a web form for registration. Here is a simplified example:

Place the following in your <head>:

1
2
3
4
<script type="text/javascript" src="https://platform.linkedin.com/in.js">
  api_key: YOUR_API_KEY_GOES_HERE
  authorize: true
</script>

And the following in your <body>:

1
2
3
4
5
6
7
<script type="IN/Login"> 
<form action="/register.html"> 
<p>Your Name: <input type="text" name="name" value="<?js= firstName ?> <?js= lastName ?>" /></p>
<p>Your Password: <input type="password" name="password" /></p>
<input type="hidden" name="linkedin-id" value="<?js= id ?>" />
<input type="submit" name="submit" value="Sign Up"/>
</script>

You use the inside of the IN/Login template to echo out the person's name in the sign up form. More importantly, you've added a hidden variable, linkedin-in, to pass the member id. This is the value you should store to identify the person in future page requests.

Tags and Templating are covered in more detail in the Tags and Templating Tutorial.

An alternative approach is using the JavaScript API to directly fetch the person's information. You can then pass that back using either a web form, like above, or an AJAX call.

Here is another simplified example:

Place the following in your <head>:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script type="text/javascript" src="https://platform.linkedin.com/in.js">
  api_key: YOUR_API_KEY_GOES_HERE
  authorize: true
</script>
 
<script type="text/javascript">
function onLinkedInAuth() {
  IN.API.Profile("me")
    .result( function(me) {
      var id = me.values[0].id;
      // AJAX call to pass back id to your server
    });
}
</script>

And the following in your <body>:

1
<script type="IN/Login" data-onAuth="onLinkedInAuth"></script>

This generates a Sign In with LinkedIn button and triggers the onLinkedInAuth() function upon completion. That function makes an IN.API.Profile() API call for the current viewer and provides you with the member id in the callback function. You can then use the AJAX framework of your choice, such as Dojo, YUI, or jQuery, to pass that value back to your server.

The JavaScript API is covered in more detail in the JavaScript API Tutorial and the JavaScript API Reference.

Regardless of how you accomplish the task, once you've captured the member id, you can begin referencing it for future requests and use it with the LinkedIn JavaScript and REST APIs.