DEV Community

Kazi Fardin Islam Abir
Kazi Fardin Islam Abir

Posted on

Fetching LinkedIn user Data and Sign In with LinkedIn using OpenID Connect

In today’s age, it’s becoming increasingly popular to register into websites using existing sources like Gmail, GitHub, and LinkedIn, rather than dealing with the hassle of creating multiple profiles on numerous websites. In this process, users have the option to log in using their existing social accounts with a single button click and get access to the website after authentication. LinkedIn provides developers the ability to integrate its authorization support into their websites, facilitating the Sign-in process. The ‘Sign In with LinkedIn using OpenID Connect’ feature offers a way for web apps to authorize members through OpenID Connect, which acts as a layer built on top of LinkedIn’s OAuth 2.0. This feature enables applications to request permission from a LinkedIn member to access their account data. In today’s post we will explore updated LinkedIn’s API flows to authorize users and get profile information of them.

Configuring a developer app

To access LinkedIn APIs, a developer app should be created in the LinkedIn’s developer page.

LinkedIn developers page
After clicking create-app button a series of questions will be asked about the app.
create app page
After creating and verifying the app, we will have the Client ID and Client Secret, that should be kept private. This credentials will be needed later to access LinkedIn APIs. Also we have to add a redirect URL for your app in which LinkedIn will redirect after authorization step. It will send an authorization code as a query param if authorization is successful or error details otherwise. To get the final access token for LinkedIn APIs the authorization code will be needed.

app configuration page
After creating the app, we have to request the products which we want our app to use. The APIs will be inaccessible until associated products are added. The approved and requested products will be visible under Products section as below.

products

Once the products are added and approved, the available scopes will be displayed in auth section. Scopes are the features which our app has access on behalf of the authorized user. In this list, we can see that our app has access of getting user’s name, photo, email and also has the access of interaction in user’s social feed.

scopes

By this level, LinkedIn app configuration is completed. Our next goal is to hit LinkedIn url and authorize the user. In this code flow of LinkedIn’s 3-legged OAuth, user gives consent of accessing his profile in a prompt against the requested scopes by app.

Source:3-legged OAuth documentation

Getting LinkedIn’s login prompt and Authorization Code

We need to hit https://www.linkedin.com/oauth/v2/authorization url for LinkedIn’s login prompt with these query params: response_type, client_id, redirect_uri, state, scope. For our case, ‘client_id’ will be the Client Id we’ve got after app creation in developers portal. The ‘redirect_uri’ should exactly be same as the redirect url we provided on auth section previously. Another important thing to mention is the value of ‘redirect_uri’ must needed to be url encoded. ‘state’ is a random string that helps to check CSRF attack, it’s an optional field. Space delimited and url encoded scopes need to be used for ‘scope’ field. Lastly, the value of ‘response_type’ field should always be set to ‘code’. After arranging all these fields our request url will be something like:

redirection url

We can directly hit it from browser to check or can design a button for showing Sign In option.

likedIn button

After clicking the button user will find the LinkedIn login prompt asking his credentials. After submitting correct credentials another page will be shown to take his consent.

credentials consent prompt

When the authorization is succeeded, LinkedIn hits to the redirect url with two query params- code, state. For our case a sample redirection url is:

redirection url

The code we have got is important because now it will be used for getting access token of LinkedIn APIs. It has a 30-minute lifespan and must be used immediately. Also the value of ‘state’ field should be checked if it matches or not with the ‘state’ we have provided in early step.

Getting the access token

Now we are close to the last part, to obtain the access token we need to send a POST request to https://www.linkedin.com/oauth/v2/accessToken with a Content-Type header of ‘x-www-form-urlencoded‘ using following fields in request body.

access token req

The value of ‘grant_type’ field will always be ‘authorization_code’ and in the code field we have to put the code we’ve just found in the previous callback step. In the response, LinkedIn will send a JSON object containing access_token, expiry, scope, token_type, id_token.

access token resp

Using the access token in authorization header now we have to make a GET request at https://api.linkedin.com/v2/userinfo API to get basic user info as below.

userinfo get

Another interesting fact is that using OpenId Connect (OIDC) as a scope, it eliminates the further need of calling user info API we just mentioned above. Because, the id_token which was received along with the access_token, is a JWT token that contains essential user data.

jwt info

So we can extract user details from id_token and can easily authenticate a visitor. Thus OpenId Connect eliminates dependencies of making additional API calls to find who the authenticated member is and simplifying the user authentication process.

Now we are able to fetch user’s name, email and picture hitting LinkedIn API with given access token. We can also authorize users through ‘Sign In with LinkedIn’ option by following the authorization flow discussed above. Adding OAuth Sign In option in any application will lessen down the user boredom of registration and provide a better experience while onboarding.

In some other day, we will code a client for authorizing user and getting infos in a more convenient way following this workflow. Till then stay tuned. Happy Coding.

Top comments (6)

Collapse
 
chhavi profile image
Chhavi Srivastav

when i am hitting this api
linkedin.com/oauth/v2/accessToken

its giving me
{
"error": "invalid_request",
"error_description": "Unable to retrieve access token: appid/redirect uri/code verifier does not match authorization code. Or authorization code expired. Or external member binding exists"
}

can you please help me .

Collapse
 
purnanugraha profile image
Purna Nugraha

ensure the code is same with the one that redirect_uri return. just copy the code only (without state) and ensure the scope and redirect_uri is ok and then retry from the first step to allow the access

Collapse
 
chhavi profile image
Chhavi Srivastav

done thnks bro.

Collapse
 
chhavi profile image
Chhavi Srivastav

ok i will try

Collapse
 
rahmatdev profile image
Rahmat Sulistio

how to get the additional informations from the user such as educations, work experiences, certificates, etc?

Collapse
 
venkatakrishnan_2785fb30e profile image
Venkatakrishnan

This gives me the user details.But if i were to fetch the profile id (i guess its vanity name in linkedin). how can i get. So that i can form a profile url.