nvh95 / react-linkedin-login-oauth2

Easily get Authorization Code from Linked In to log in without redirecting.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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

xporium opened this issue · 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
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

commented

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

@abhishekover9000 Thanks for your explanation.

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 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 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

@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 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)

@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

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 .

can a user get a greated date of a linkedin account

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?