D
D
Dmitry Medinsky2021-03-01 18:41:46
API
Dmitry Medinsky, 2021-03-01 18:41:46

How to make authorization through Linkedin with Angular?

Good day!

I have a question how to make authorization through Linkedin?
Authorization via Google and Facebook on the client is done through angularx-social-login, but Linkedin is not there. If you are familiar with working libraries, please let me know, I will be very grateful.
I started doing it as described on the official website: https://docs.microsoft.com/ru-ru/linkedin/shared/a...
Problems arose at step #3, I can't send a request to https://www.linkedin. com/oauth/v2/accessToken , CORS issue, console error:
Access to XMLHttpRequest at ' https://www.linkedin.com/oauth/v2/accessToken ' from origin ' localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

TS code:

export class AppComponent implements OnInit {
  
  constructor(
    private http: HttpClient,
    private route: ActivatedRoute
  ) { }

  ngOnInit() {
    this.route.queryParams
      .subscribe(qp => {
        if (qp && qp.code) {
          this.getDataFromLinkedin(qp.code);
        }
      }, err => console.error(err) );
  }

  loginWithLinkedin(): void {
    const urlCode = 'http%3A%2F%2Flocalhost%3A4200%2F';
    const clientId = '**********';
    const LINKEDIN_URL = `https://www.linkedin.com/oauth/v2/authorization?response_type=code&state=9379992&scope=r_liteprofile&client_id=${clientId}&redirect_uri=${urlCode}`;
    console.log(LINKEDIN_URL);

    window.location.href=LINKEDIN_URL;
  }

  getDataFromLinkedin(code: string): void {
    const redirectURI = 'http%3A%2F%2Flocalhost%3A4200%2F';
    const clientId = '*******';
    const clientSecret = '********';
    const req = {
      grant_type: 'authorization_code',
      code: code,
      redirect_uri: redirectURI,
      client_id: clientId,
      client_secret: clientSecret
    }
    console.log(JSON.stringify(req))
    this.http.post('https://www.linkedin.com/oauth/v2/accessToken', req, {
      headers: new HttpHeaders({
        'Content-Type': 'application/x-www-form-urlencoded'
      })
    })
      .subscribe(res => {
        console.log(res);
      }, err => console.error(err) );
  }
}

Answer the question

In order to leave comments, you need to log in

1 answer(s)
D
Dmitry, 2021-03-12
@dlnsk

Here I wrote about Ionic, but it is also Angular:
How to organize social authentication through Socialite (Laravel) + JWTAuth + Vue.js without a redirect from the API server?

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question