In this tutorial, we walk you through the basics of adding a Sign in with LinkedIn button to your site. This allows you to use a person's LinkedIn identity and data on your site to personalize the experience. You can even let them sign up using their LinkedIn accounts.
When you're finished reading this, you will have installed our JS API framework, embedded a button that lets people authenticate, and printed out a member's first and last name. From there, you can make access our entire set of Profile, Connection, and Network Update information.
Here we go. It's only 5 steps:
1. Find your domain name
For security reasons, you must inform LinkedIn of the domain name you'll be using with each API key. So, your first step is to decide what domain name you'll use to host your LinkedIn-powered application. During development, 'localhost' works!
You must specify the complete fully-qualified domain as we don't do subdomain wildcards or substring matching. For example,
http://www.example.com is okay, but *.example.com is not. If you're using a non-standard port (anything other than 80 for http and 443 for https) you must include this, too:
http://www.example.com:8080. If you have multiple domains, add them all, and separate them with a comma (
2. Get an API key
3. Add our framework to your page
Be sure to specify the key from the form, not the one above. Now, try loading this page in your browser (remember to access it via a URL that includes the domain name you specified above). Voila - nothing happens! At least nothing you can see - but behind the scenes, this script tag imported our complete JS framework and verified that your API key is good to go. Check the browser's JS Console to make sure that there are no errors.
4. Add a Sign in with LinkedIn button
Add the following HTML to the body of your document:
<script type="in/Login"> Hello, <?js= firstName ?> <?js= lastName ?>. </script>
Now reload the page and you should see a rendered button that looks like the image below. Click the button - it should popup an authorization window asking you to Sign In to LinkedIn and grant API permission to your application. After you agree, the authorization window will close and the underlying web page (your HTML app) will immediately update. The Sign In button will disappear and, instead, our framework will render "Hello, [your first name] [your last name]" in its place!
5. Fetch authorization automatically
Now that our app is finished, test it by reloading the page a few times. Notice that the login button reappears every time, even though you have already logged into the app and granted permission. By default, our framework will only fetch an OAuth token if the user explicitly clicks a Sign In button. You can override this to auto-login signed in users. Set the option authorize: true, and the framework will automatically fetch an OAuth token if one is available (i.e. if the user has previously authorized your application). Configure the authorize parameter in the framework script tag:
Help! That didn't work.
If this didn't work, here's a list of things to check:
- Verify that your API key, copied directly from the key details page linked above, is specified in the framework script tag.
- Verify that the full domain name you are using to access the html file is specified in the key's configuration details.
- If you are using Firebug or WebKit's Developer Tools, check to make sure that the following files were loaded automatically:
- in.js (our platform bootstrap loader)
- userspace.js (live configuration and session info, including the user's oauth_token if available)
- framework.js (our full framework)
If you're still having problems, please post in our forum and we'll be happy to help!