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.
After clicking create-app button a series of questions will be asked about the app.
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.
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.
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.
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.
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:
We can directly hit it from browser to check or can design a button for showing Sign In option.
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.
 |
 |
|---|
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:
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.
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.
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.
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.
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 (0)