Note: The entire login process cannot be handled from client side, backend integration required for some steps (Explained at Step-3).
In order to start with linkedin login, we need to first create out app in linkedin.
Note: If you have already created your app, click on
Go to My apps, select your app and then follow fromstep no 1.2
1.1: Go to https://developer.linkedin.com
Click on the Create app button and fill up all the mandatory fields (App name, Company, Business email and App logo).
Note: In the company field you need to select a page from the dropdown results or create new company page. (For testing purpose, just type
testand select any random page from the dropdown list)
At the end, accept the legal terms and click on the Create app button
Copy the client id from the Auth tab
We need to add a redirect url in order to get back the auth token provided by linkedin after successful authentication.
For example, if our app's web url is http://www.awesomeapp.com
We can add redirect url as http://www.awesomeapp.com/linkedinLoginResponse (we will setup this route in the upcoming steps)
Minimum 2 pages (routes) required to handle LinkedIn login properly in our angular app. One page to place the Login with linkedin button and another one to handle linkedin redirection. Let say we are naming them as login & linkedInLoginResponse
The minimum content for the component login
login.component.html
<button (click)="login()">Login with LinkedIn</button>login.component.ts
import { Component } from "@angular/core";
import { HttpClient, HttpHeaders } from "@angular/common/http";
@Component({
selector: "LoginComponent",
templateUrl: "./login.component.html",
styleUrls: ["./login.component.css"]
})
export class LoginComponent {
linkedInCredentials = {
clientId: "************",
redirectUrl: "https://y8pud.codesandbox.io/linkedInLogin",
scope: "r_liteprofile%20r_emailaddress%20w_member_social" // To read basic user profile data and email
};
constructor(private http: HttpClient) {}
login() {
window.location.href = `https://www.linkedin.com/uas/oauth2/authorization?response_type=code&client_id=${
this.linkedInCredentials.clientId
}&redirect_uri=${this.linkedInCredentials.redirectUrl}&scope={this.linkedInCredentials.scope}`;
}
}
The minimum content for the component linkedInLoginResponse
linkedinLoginResponse.component.html
<p>Your linkedIn code = {{ linkedInToken }}</p>linkedinLoginResponse.component.ts
import { Component, OnInit } from "@angular/core";
import { Router, ActivatedRoute, Params } from "@angular/router";
@Component({
selector: "LinkedinLoginResponse",
templateUrl: "./linkedinLoginResponse.component.html",
styleUrls: ["./linkedinLoginResponse.component.css"]
})
export class LinkedinLoginResponse implements OnInit {
linkedInToken = "";
constructor(private route: ActivatedRoute) {}
ngOnInit() {
this.linkedInToken = this.route.snapshot.queryParams["code"];
}
}app.module.ts
...
import { Routes, RouterModule, Router } from "@angular/router";
...
import { LoginComponent } from "./login/login.component";
import { LinkedinLoginResponse } from "./linkedinLoginResponse/linkedinLoginResponse.component";
const routes: Routes = [
{ path: "", redirectTo: "/login", pathMatch: "full" },
{ path: "login", component: LoginComponent },
{ path: "linkedInLogin", component: LinkedinLoginResponse }
];
@NgModule({
declarations: [AppComponent, LoginComponent, LinkedinLoginResponse],
imports: [BrowserModule, RouterModule.forRoot(routes)],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}Don't forget to put router-outlet in app.component.html
app.component.html
<router-outlet></router-outlet>Full code available: https://github.com/debojyoti/angular_linkedin_login
Once we get the authoriazation_code from linked in we need to send the authoriazation_code to our backend service which will exchange the auth token and get user details (name, email etc) from linkedin.
Send a post request to https://www.linkedin.com/oauth/v2/accessToken with params
{
grant_type: "authorization_code", // value of this field should always be: 'authorization_code'
code: "The authorization code you received from client side",
redirect_uri: "https://y8pud.codesandbox.io/linkedInLogin", // The same redirect_url used in step 2.1 (in login.component.ts)
client_id: 'Client ID of your linkedapp', // Follow step 1.2
client_secret: 'secret key of your linkedapp' // Follow step 1.2
}A successful access token request returns a JSON object containing the following fields:
access_token — The access token for the application. This value must be kept secure as specified in the API Terms of Use.
expires_in — The number of seconds remaining until the token expires. Currently, all access tokens are issued with a 60 day lifespan.
For complete documentation, visit: https://developer.linkedin.com/docs/rest-api
Can you post the screenshot of this page (not the console). The screenshot of the page on LinkedIn which says "Bummer something went wrong" Shows you what you have requested. That will give me an Idea what has been sent wrong to LinkedIn.
Moreover,
stateis not Your Application ID. It can be any random string. Everytime you generate the URL, you should preferably generate a random string forstate.Refer Step 2: Request an Authorization Code
Also, it is very important for you to pass scopes which YOU have requested for the App. You will find this information in
OAuth 2.0 scopessection of your App on LinkedIn. E.g: if you have the following settings for your appClient Id:
57pk5wtpwynx7oCallback Url:
http://www.mywebsite.com/linkedin/callbackIf your scopes are:
r_emailaddressandr_liteprofile, your url to LinkedIn should beHope this solves your problem