How to do Login with LinkedIn using JavaScript API

To implement login with LinkedIn using the LinkedIn JavaScript API, you'll need to create a LinkedIn application, set up the necessary permissions, and use the JavaScript API to authenticate users. Here are the steps to achieve this:

Step 1: Create a LinkedIn Application

• Go to the LinkedIn Developer portal.
• Click on "Create app" to create a new LinkedIn application.
• Fill in the required information, including the application name, description, and logo.
• Under "Authorized Redirect URLs," add the URL where LinkedIn should redirect users after they log in.

Step 2: Set Permissions

In your LinkedIn application settings, go to the "Auth" tab and set the permissions your application needs. At a minimum, you'll likely need the "r_liteprofile" and "r_emailaddress" permissions for basic user profile and email access. Make sure to save your changes.

Step 3: Get API Key and Secret

Once your application is created, you'll receive an API Key (Client ID) and Secret (Client Secret). You'll need these credentials to authenticate users.

Step 4: Include LinkedIn JavaScript SDK

In your HTML file, include the LinkedIn JavaScript SDK by adding the following script tag with your API Key:

<script type="text/javascript" src="https://platform.linkedin.com/in.js">
    api_key: YOUR_API_KEY_HERE
    onLoad: onLinkedInLoad
</script>

Step 5: Implement Authentication

Create JavaScript functions to handle the authentication process:

// Function called when the LinkedIn JavaScript SDK is loaded
function onLinkedInLoad() {
    IN.Event.on(IN, "auth", onLinkedInAuth);
}

// Function called when the user authorizes your application
function onLinkedInAuth() {
    IN.API.Profile("me")
        .fields(["id", "first-name", "last-name", "email-address"])
        .result(function(profile) {
            // Handle the user's profile data here
            console.log(profile.values[0]);
        })
        .error(function(err) {
            // Handle any errors here
            console.error(err);
        });
}

Step 6: Add Login Button

In your HTML file, create a button that users can click to initiate the LinkedIn login process:

<button onclick="loginWithLinkedIn()">Login with LinkedIn</button>

Then, implement the loginWithLinkedIn function:

function loginWithLinkedIn() {
    IN.User.authorize();
}

Step 7: Initialize the SDK

Add the following code to initialize the LinkedIn JavaScript SDK:

IN.init({
    api_key: 'YOUR_API_KEY_HERE',
    authorize: true,
});

Step 8: Test Your Implementation

Load your web page and click the "Login with LinkedIn" button. Users will be prompted to log in to LinkedIn and grant the necessary permissions to your application. After authentication, the onLinkedInAuth function will be called, and you can access the user's LinkedIn profile data.

Step 9: Handling User Data

You can customize how you handle and store user data retrieved from LinkedIn in the onLinkedInAuth function. Be sure to follow LinkedIn's terms of use and privacy policies when handling user data.

Step 10: Secure Your Application

Ensure that you secure your application by using HTTPS and protecting your API Key and Secret. Use a server-side component to validate and store user data securely.

By following these steps, you can implement login with LinkedIn using the LinkedIn JavaScript API in your web application. This allows users to log in to your site using their LinkedIn credentials and provides access to their LinkedIn profile data.