How to retrieve Facebook's user data from "developer Facebook" - reactjs

I want to create a web app for educational purposes in which I required a search bar which helps me get Facebook's user data
For example: username, image
These two fields are enough for me.
Is it possible for me to retrieve such data using React.JS?

Here is the basic steps:
Create a facebook app and add facebook login to it.
Setup facebook login allowed SDK URls (where you will call the login method) and redirect URL after login.
Add needed permissions to your app
Add facebook SDK scripts to your react index.html or install the SDK.
Using the SDK call FB.login() and from the response save the user access token
send a request to FB_API_URL/me to get the user data you want
before all that test your requests to the created app with FB graph API Explorer https://developers.facebook.com/tools/explorer/
Last step: submit your app for review as most permissions will not work before this step.
useful links:
https://developers.facebook.com/docs/graph-api/get-started
https://developers.facebook.com/docs/facebook-login/web

Related

Navigate me to get set up a third party google login for my webpage using django rest framework and React JS

I was stuck on setting the google login authentication using django rest framework in the backend and react JS in the frontend. We have a email and passowrd custom login for the website and we need to implement the third party google login. I have tried many ways and it didn't worked for me, on one way it is getting username, password, clientID, clientsecret, and the grant type it is taking as password for a post call.
Maybe what i need is when a user clicks google sign in the front end generates a access token and id token, and user email from the google and it comes to connect on backend where i need to give him the data of that user by approving the request. How can i able to do that?
Please help me with any code or share me with a complete reference of setting up the google login.

Reactjs firebase google authentication showing project id instead of Public-facing name

In my reactjs project, I use firebase 9.6.11 for email, google and facebook authentication.
When I call the signInWithPopup() and google sign in form, Sign in
to continue to show projectid.firebaseapp.com. I have already update Public-facing name at firebase's project setting.
Even though I have add custom domain, google sign in for redirect link also using projectid.firebaseapp.com url.
My project is hosting on firebase hosing and link with web app.
If anyone facing this issue, please follow the step in here Step to change custom domain
For me, I forgot to enter OAuth 2.0 Client IDs's redirect url

How to link accounts via API using the Auth0.js SDK in react

I am trying to set up a working example of linking accounts to my sample app. I am currently using the react example found here as my base. I have looked over the docs and the example of linking an account with Lock, but I'm not sure how to apply that to the react example I am working with. I have also looked at the API for linking a user account here.
Here are the use cases I am trying to work around:
There would be a user who creates a new account on my site using Google. Then they decide they want to add another social login via GitHub to that same account. They clicks a button that allows them to login via GitHub and then it redirects back to their account page and they can now login to the one account with either their Google login or GitHub.
There would be a user who creates a new account on my site using Google. Another day they create another new account on my site using GitHub. Later they realize that they mistakenly made two accounts and want to merge them. They login to either account then click a button that allows them to login to the other account and then they are redirected back to their now merged account.
I think the API would be my best option, but I'm not sure how to obtain the SECONDARY_ACCOUNT_JWT OR THE SECONDARY_ACCOUNT_USER_ID. How do I get the user to log in to their other account? When I try to redirect to the login page when a user is already logged in it just redirects back to the page I have set to redirect after login.
Hey there Camiblanch!
You could link the accounts together if they share the same email through a rule. Attached is an example that may help you in your quest. Thanks!
https://auth0.com/rules/link-users-by-email

Woocommerce REST User Login Authentication

I am building a mobile app using Ionic Framework. I have a woocommerce website already set up and running, since a few months. Now I need to allow my users to login to the app using the user credentials they have registered with in the website. I am using the WP-API to return the JSON data from the website, but it follows a complex procedure for authentication as described here.
However, the documentation doesn't give any idea about how to retrieve the user details asscoiated with the account, like the address, phone number etc. Any leads on this front would be appreciated.

How to allow mobile apps to login with Facebook and Google to access web service on GAE?

This is in relation to my other question about the need to create a Facebook app.
I've been reading a lot about how to best approach login for mobile apps users (iOS and Android) that access my web service running on Google App Engine. I'm still not clear how to best do it as I would like to offer login with both Google and Facebook. The app and the web service does nothing with Facebook or Google other than I would like to piggyback on their login.
Having only login with Google for GAE is very easy and the same goes for using OpenIDConnect. Facebook unfortunately does not support this.
Reading an old question here on SO where someone wanted to do the same as I it looks like the app should do Facebook Login and then get a token that it passes to my backend which needs to be validated by contacting Facebook. Is this how to do it today?
I also found Google Identity Toolkit, which seem to be what I need. However, I do not have a website or just apps. I would need to have the apps do the Facebook login and somehow provide my web service with something so it can validate the login info.
Later on an app user should be able to log in using randomly Facebook, Google and my custom username/password. The app and the web service should know the user is logged in and authorize it to access the REST API.
How do I accomplish this? BTW, I'm using Go on GAE.
I would really appreciate if someone could explain if there are several options how to do this, pros and cons, and provide an overview of the best approach and what needs to be done.
Many thanks for any help with this!
UPDATE
OK, thanks a lot everyone for the help and pointers. I have successfully run the quickstart sample app for iOS for my GAE backend. Basically, created a Facebook app and permissions credentials on my web service on GAE so that the sample iOS app can log in.
A bit of a gap still before I have an authenticated user in the datastore and can authorize successive API calls.
Main open questions at this point:
how to get the gtoken in the iOS app after successful Facebook or Google login?
should I explicitly call an API on my web service to pass in the gtoken or is this somehow automatic with Gitkit API enabled?
Thanks for any help!
UPDATE
To answer #1 and #2 myself, there's a "successful sign-in url" that can be given in the app engine config so the app knows where to call with the gtoken. Then after that it's like explained in the answers.
Looks like you have an app and a backend on GAE.
If you are using google identity toolkit, it will allow you to signin with Facebook, Google, and email/password.
When user successfully signs in to your app using identity toolkit, your server should receive a gtoken. You have two options here:
Pass the gtoken to your app and save it there. When your app makes API calls to your backend, you app should attach the gtoken to every request. Your backend should verify the gtoken(https://developers.google.com/identity/toolkit/web/required-endpoints) for every API that needs authorization.
Verify the gtoken, generate a token that your backend can recognize/identify the user. Then pass the token to your app and everything else is the same as option 1.
If you do not want to use identity toolkit, you can implement facebook login on your app/backend and use facebook token to communicate between your app and backend.
Whatever your decision is, apps that use your API should pass you something that your backend can recognize/authorize the user.
The answer is about using Google Identity Toolkit (GIT). GIT itself is an identity provider, which would be integrated with your apps and backend. The flow works along these lines:
your app requests login via its GIT API
GIT will perform the federated login with Facebook or other 3rd party provider (transparent to your app) and returns a GIT token to the app (representing a unique user from your end-to-end system perspective, i.e. apps plus backend)
the app makes a request to the backend in which it passes the GIT token
the backend verifies the GIT token validity (using this go GIT client API, for example) and from it can extract the identity of the user and thus validate the request
You can find more detailed info about the backend token validation in the backent endpoint doc, look for these sections in particular:
Understanding the Identity Toolkit cookie/token
Getting information for users
Now the actual token validation on the backend may take a few seconds, so it might not be practical to do it for each and every REST request from the app. If so you'd need to somehow:
save the info that the user of that specific app instance is
authenticated in something like a "session" managed between your app and the backend
map a specific REST request received by the backend to a specific such authenticated "session"
But I'm not sure how exactly is this "session" functionality done in the apps+backend context, I didn't write any apps yet.

Resources