I'm setting up this Sails project where I use PassportJS, via sails-generate-auth, and JWTs - using this as a guide - to login. I'm trying to decouple the api from the Ember app as much as I can so I can use the same API for iOS, etc. Since passport uses callbacks to handle Facebook auth, how can I login via AJAX?
I'm able to successfully login to Facebook via passport js using an AJAX GET to /auth/facebook like so
var url = config.api + '/auth/facebook'
var controller = this;
Ember.$.get( url, function ( data ) {
// This is never called because Facebook redirects
localStorage.private_token = data.token;
controller.transitionToRoute('profile', data.user);
});
but then when Facebook redirects, it goes back to the API, not the frontend app. But if I configure the backend to redirect to the front end app after the callback, I have a dependency on the front end app that I want to avoid. I've never done Facebook auth before but I've used API tokens for a while now.
Is there any way to do what I'm trying to do? Or should I just redirect to the front-end app from passport.callback?
Update
After a bit more searching, I came across this answer: passport.js RESTful auth
It seems that I cannot achieve what I want since Facebook only exposes a redirect-based authentication, not an async or JSON one. Good to know...mark as duplicate if you'd like.
Your application must also implement a redirect URL, to which Facebook will redirect users after they have approved access for your application.
From Passport.js Facebook guide (Look at Configuration).
So you have to set your ember app state/url as redirect url e.g. http://localhost/#/welcome
Related
I am implementing a manual flow for facebook login in our reactjs + meteor app. As of now I have got the code which FB sends in redirect url to my site.
Using this code I was able to make graph api call as shown here. Then I whitelisted my server IP in the facebook app. Even this works good. I'm able to get an access token by exchanging the code. Below is the code that works here:
const accessToken = await HTTP.get('https://graph.facebook.com/v2.10/oauth/access_token?client_id=<appID>&redirect_uri=mysite.com/facebook/redirect&client_secret=<appSecret>&code=<code>');
But when I enable app secret proof, my graph call returns oauth error code 1 which specifies facebook could not validate app secret. I referred this document to check on how to create & pass the app secret proof. I tried generating the app proof by passing code & app secret, one at a time. Below is how I am trying to get an access token:
const appSecProof = cryto.createHmac('sha256', <appSecret>).update(<code>).digest('hex');
//<appSecret> is the appSecret from FB App, <code> is the code I get from FB after FB redirects to my site.
const accessToken = await HTTP.get('https://graph.facebook.com/v2.10/oauth/access_token?client_id=<appID>&redirect_uri=mysite.com/facebook/redirect&client_secret=<appSecret>&code=<code>&appsecret_proof=<appSecProof>');
I am configuring the app right for app secret proof?
The other thought I am getting is if I am doing a manual server side implementation then IP whitelisting alone can take care of security & I don't need to enable app secret proof.
My end goal is to implement a secure the facebook login. I had tried with facebook javascript SDK which works good. But when testing I found it shows the access token in browser network panel's xhr calls. Using this access token I could make a GET call to FB API using postman. So wanted to have all communication from server side.
Thanks.
We developed a hybrid mobile applicacion as front-end integrated with a backend, wich includes a Facebook OAuth service. With this setup social authentication, through the web browser, it works fine.
Now we would like to use the native Facebook app installed on the mobile device (instead of the web browser) to authenticate our users against or backend, but we don't find how to implement the auth process.
Our backend follows OAuth2 of type "Authorisation Code Grant" (https://alexbilbie.com/guide-to-oauth-2-grants/) and, therefore, expects a code and a status parameters in the Facebook response (just like the first described auth). But in mobile, the Facebook SDK doesn't return this paramenters, only an accessToken. Because of that, we can't implement the auth process in our backend.
Is it possible to perform the OAuth process using an accessToken instead of the autorization code? Maybe is it possible to obtain the code and status parameters from the accessToken parameter with Facebook API?
Say you have a REST API that you want to protect with an OAuth based authentication system. The regular flow using the website I'm using is:
user clicks a link to login to google
google makes a request to the callback you specified
your application responds to the callback by taking the given tokens and requesting the user data, finding what that user data corresponds to on the database and giving you back a session cookie for the web application and an HTML redirect (for example to the home or whatever you prefer)
Basically the callback endpoint transforms google tokens into your web application session cookies.
Now I'm wondering: how would that work for a mobile application that doesn't know anything about cookies or redirects? It could do:
on google button click, make HTTP request to the google auth URL
google responds with the callback URL you specified
the app makes another request to the above mentioned callback URL to your application
your application returns a cookie session value and a redirect URL to the homepage
the mobile applications forgets about the last redirect URL and takes the cookie session value and uses that for any other requests to the API
Is that right?
One way to do it is that you create an embedded web component on the native mobile UI, you set its URL to the authorization endpoint, the user logs in and authorizes your app, the Authorization Server redirects to your callback URL with an Authorization Token.
Your app subscribes to the changes of the web component, and when it detects the callback URL it takes the Authorization Token, destroy the web component, and calls the REST API to get an Access Token, and then access any protected resources.
Related posts:
Integrate oauth2 with native (iOS/Android) mobile application
Oauth2 flow without redirect_uri
OAuth2 for front end applications
Disclaimer: I never implemented this and I don't work with mobile apps, I just got this from reading stuff.
In the Spotify App's API docs there is a module to authenticate via Facebook - now I try to find a way to logout from Facebook but can't find any documentation about the correct procedure. The Facebook Javascript SDK provides a logout method via FB.logout() for this - how about the Spotify API?!
In order to log out, you need to make a GET request to the Facebook's logout URL, which at the moment is https://www.facebook.com/logout.php, passing two parameters:
access_token: It is the access token provided by Facebook when access to the user's account was requested.
next: It is a URL that has to be part of the domain URL that was set on Facebook's app profile.
Logging out is performed by making an AJAX call to that URL. If it was successful, a redirection to the next URL will me made. Otherwise, the redirection will be made to http://www.facebook.com/home.php (for instance, if the next URL doesn't belong to the registered app domain).
You can read the response of that AJAX call and check that the content you get is that from your next URL.
You need to use the Facebook API - if you look at the documentation, you'll see that auth.authenticateWithFacebook is just a thin wrapper around auth.showAuthenticationDialog. It doesn't actually interact with Facebook's "proper" API at all - it only loads Facebook's login page and gives you a callback when the user is logged in.
I am using the new javascript sdk and I am developing locally (ie. no hosted server).
I was successfully able to get the access token which the js api stores in a cookie for localhost domain. However what I don't understand is:
How fb js is able to set a cookie for localhost. Doesn't this violate same origin policy?
If fb uses Oauth 2.0 protocol for authentication/authorization, how is the single sign-on able to retrieve the access token even when though I haven't specified a callback url and there are no redirect from my main page.
Can someone demystify what is happening under the hood here?
FB JS is able to set cookies on localhost because you're including the FB JS SDK on your domain via a <script> tag there by giving them access to your cookies (much the same way Google Analytics writes cookies for your domain).
OAuth 2.0 involves a redirect to your website, there's really no other way for Facebook to return the code necessary for your app to retrieve the access_token.