react-linkedin-login-oauth2 icon indicating copy to clipboard operation
react-linkedin-login-oauth2 copied to clipboard

how we can get user's basic profile data like name, email address from this

Open xporium opened this issue 6 years ago • 12 comments

Hi, i tried in local with this source, but in this i m just getting token, actually i want to other basic fields from linkedin like name, profile-pic, emailaddress or some else than how to get that fields from this code?

Thanks...

xporium avatar Oct 26 '18 09:10 xporium

@xporium Note that this package support to get the authorization code to Authenticating with OAuth 2.0 from this tutorial (step 2) You can send your authorization code to the server and let the server get your needed information using OAuth 2.0. If it's acceptable to get fields like name, profile-pic, email address... in client side. You can take a look at this package https://github.com/JeffersonFilho/react-linkedin-sdk

nvh95 avatar Oct 27 '18 15:10 nvh95

This gets you the code the server needs to talk to linkedin's API.

So basically what we're doing here-

  1. React-linkedin-login is allowing the user to enter his linkedin creds into the pop up, that sends the handshake token back to the client

from here, to finish it off, we need to 2. send the token back to the server 3. the server will include the token into the call to linkedin 4. linkedin will send data back to server 5. server saves/uses/logins data however, and then responds some data back to the client to continue the user epic

buildWithSoul avatar Jan 23 '19 05:01 buildWithSoul

@abhishekover9000 Thanks for your explanation.

nvh95 avatar Jan 23 '19 09:01 nvh95

I am passing de scope string, but only get de code back. How can I get de user information? Or wich is the porpouse of the scope string?

Itzli2000 avatar Aug 19 '19 13:08 Itzli2000

@Itzli2000 You can retrieve user information from linked by exchange access token using authorization code get from this package. Please follow this tutorial https://docs.microsoft.com/en-us/linkedin/consumer/integrations/self-serve/sign-in-with-linkedin?context=linkedin/consumer/context#retrieving-member-profiles

With your newly acquired access token for the authenticated member, you can using the following API request to retrieve the member's profile information. See Lite Profile to learn more about the Lite Profile fields available.

nvh95 avatar Aug 20 '19 03:08 nvh95

@nvh95 sorry for the late answer. I am trying to make a fetch passing de access token, but the api returns an error, I am working with react

Itzli2000 avatar Aug 28 '19 00:08 Itzli2000

@nvh95 @abhishekover9000 @Itzli2000 I am also trying to access the LinkedIn api in react app. But getting following error: Access to fetch at 'https://api.linkedin.com/v2/me' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

It's working fine with postman. There I get the response with member details. But not working with react app.

aashishgaikwad avatar Aug 30 '19 10:08 aashishgaikwad

@aashishgaikwad you need to use a proxy url to pass cors. Try this

var fetchInformation = { method: 'POST' }; var proxyurl = "https://cors-anywhere.herokuapp.com/"; fetch(proxyurl + {your url}, fetchInformation)

Itzli2000 avatar Sep 01 '19 15:09 Itzli2000

@nvh95 @abhishekover9000 @Itzli2000 I am also trying to access the LinkedIn api in react app. But getting following error: Access to fetch at 'https://api.linkedin.com/v2/me' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

It's working fine with postman. There I get the response with member details. But not working with react app.

did you find the solution. if you find some thing just post here it will helpfull to someone

abhishkekalia avatar Nov 17 '20 13:11 abhishkekalia

did anyone find a solution for this problem?

[Error] Failed to load resource: Preflight response is not successful (accessToken, line 0)

I am also trying to access https://www.linkedin.com/oauth/v2/accessToken to get a accessToken so I can then exchange it for user information later on.

createFormParams = (params) => { return Object.keys(params) .map((key) => ${encodeURIComponent(key)}=${encodeURIComponent(params[key])}) .join('&') }

handleSuccess = (data) => { axios.post("https://www.linkedin.com/oauth/v2/accessToken",{ headers:{ "Content-Type": "application/x-www-form-urlencoded", "Access-Control-Allow-Origin": "*" }, data: this.createFormParams({ grant_type : 'authorization_code', code : ${data.code}, redirect_uri: "http://localhost:3000/linkedin", client_id :'', client_secret: '' }) }).then(function (response){ console.log("got an access token"); console.log(response) }).catch(err => { console.error(err); }); }

I tried using the proxy URL and run into the following issue:

Missing required request header. Must specify one of: origin,x-requested-with

I have gotten this to work in an isolated js file and it works how I want, I'm having trouble implementing it with this package and the full react app.

Sorry, I'm still pretty new to this stuff so any tips would be appreciated .

roshanverma2001 avatar Jan 21 '21 21:01 roshanverma2001

can a user get a greated date of a linkedin account

ajibadeabd avatar Feb 12 '23 11:02 ajibadeabd

did anyone find a solution for this problem?

[Error] Failed to load resource: Preflight response is not successful (accessToken, line 0)

I am also trying to access https://www.linkedin.com/oauth/v2/accessToken to get a accessToken so I can then exchange it for user information later on.

createFormParams = (params) => { return Object.keys(params) .map((key) => ${encodeURIComponent(key)}=${encodeURIComponent(params[key])}) .join('&') }

handleSuccess = (data) => { axios.post("https://www.linkedin.com/oauth/v2/accessToken",{ headers:{ "Content-Type": "application/x-www-form-urlencoded", "Access-Control-Allow-Origin": "*" }, data: this.createFormParams({ grant_type : 'authorization_code', code : ${data.code}, redirect_uri: "http://localhost:3000/linkedin", client_id :'', client_secret: '' }) }).then(function (response){ console.log("got an access token"); console.log(response) }).catch(err => { console.error(err); }); }

I tried using the proxy URL and run into the following issue:

Missing required request header. Must specify one of: origin,x-requested-with

I have gotten this to work in an isolated js file and it works how I want, I'm having trouble implementing it with this package and the full react app.

Sorry, I'm still pretty new to this stuff so any tips would be appreciated .

Hey, did you found how to solve this issue?

Akshatjainbafna avatar Mar 28 '23 21:03 Akshatjainbafna