8

I'm using the Ionic framework to create an app and I now want to add facebook (oauth2) login. I already implemented a facebook login on my website using OAuth; I simply redirect the user to the relevant facebook URL, let them enter their credentials there and I then get the token in my (Flask) backend. This works like a charm.

I now wonder how I can implement the same in my Ionic/Cordova/Angular app. As I see it now there are a couple options:

  • Redirect the user to the mobile version of Facebook within the Ionic/Cordova webview in the app to authenticate my app (just like I do in my normal website), and then return the user to the Ionic app again. I've got the feeling that this is not the right way to do it though.
  • Use Facebooks Javascript authentication which returns the token to the app. I can then POST the token to my server to save it for later usage.
  • Let the user insert his username and password in the Ionic app and POST those to my server and then use those to authenticate the user on facebook and get a token for it. This obviously totally defies the purpose of OAuth, but I guess it would work.
  • I read this article on the Ionic blog about how to implement Facebook login, but that uses the Auth0 plugin, which I don't want to use (it costs money and I don't want to be dependent on another company).
  • Yet another option which I am not aware of..

So I now wonder; what is the best way to implement (OAuth based) Facebook login in my Ionic app and why? All tips are welcome!

kramer65
  • 50,427
  • 120
  • 308
  • 488

2 Answers2

9

You can make use of $cordovaOauth.facebook in the ngCordova library of Ionic Framework:

http://www.ngcordova.com

Here are two references that might put you in the right direction on using it:

https://www.thepolyglotdeveloper.com/2015/02/make-facebook-mobile-app-ionic-framework/ http://ionicframework.com/blog/oauth-ionic-ngcordova/

If your service depends on the accuracy of the login data, you may want to validate via the back-end as well. However this RESTful approach is similar to the JavaScript library.

Regards,

Nic Raboy
  • 3,143
  • 24
  • 26
  • Thanks! In te meantime I'm experimenting with openFB (https://github.com/ccoenraets/OpenFB). So if I understand it correctly; the usual way is for the user to be redirected to a FB loging from within the app, and when succesfully logging in, the app itself can send the token to my own server so that I know the user logged in. Is that correct? – kramer65 Feb 19 '15 at 10:20
  • It is one of many ways to accomplish what you want. Both solutions will work. – Nic Raboy Feb 19 '15 at 16:06
  • Ionic platform now embeds Facebook login : http://docs.ionic.io/v2.0.0-beta/docs/social-provider-facebook – TrtG Apr 01 '16 at 16:28
6

Getting Facebook login working in the mobile hybrid app is half the battle. The other half is sharing the credentials with the backend. I just finished implementing this against a Flask backend so I thought I'd share what worked.

Let the user insert his username and password in the Ionic app and POST those to my server and then use those to authenticate the user on facebook and get a token for it. This obviously totally defies the purpose of OAuth, but I guess it would work.

This would be a very bad idea (as you pointed out, it violates the principles of OAuth), and in fact it wouldn't work. There is no endpoint where you can programmatically hand Facebook a login and password, and get a token in response (legally, and without scraping). Instead, getting a token requires a callback with user interaction, whether it's performed on the frontend or on the backend. Consider the case of two-factor authentication in Facebook where the user needs to retrieve and enter a code sent to their mobile phone.

Use Facebooks Javascript authentication which returns the token to the app. I can then POST the token to my server to save it for later usage.

Yup, this is how it should be done. This is called cross-client authentication. Facebook has a page which explains auth tokens that is conceptually helpful and discusses lots of different scenarios but unfortunately does not include many helpful code fragments.

You can directly pass the access token to the backend as part of the login process. The backend can then validate the token. Assuming you are using the standard Flask-Security and Flask-Social packages on the backend, you can wrap the Flask-Social login view to authenticate the user using the token passed from the frontend. You can find sample code in this gist: https://gist.github.com/lrettig/7ca94ba45961207a7bd3

Also note that this token is typically only valid for a couple of hours. If you need the backend to use the Facebook SDK on behalf of the user on an ongoing basis, you'd need to swap it for a Long-Term token.

Another side note that confused me for a while: I noticed that, after authenticating with Facebook on the frontend, I was handed an access token, whereas using a Python SDK on the backend, I was handed a code instead, which needs to be exchanged for a token before any query can be performed. I'm not sure why the difference, but codes and tokens are also described in the Facebook docs.

Lane Rettig
  • 6,640
  • 5
  • 42
  • 51
  • Thank you! I now implemented something similar but I'm unsure of the following. The app sends the token to the server and the server responds with the userId. Following requests to the server are then made using the userId and the same facebook token. So let's talk security; although only the user can get a valid facebook token, the userId is very easy to find out about other users (just do a search on our website and check the json). So my question; is it secure at all to let the user authenticate with the userId and the FB token or should I use other measures? – kramer65 Aug 05 '15 at 07:42
  • 1
    The short answer is yes. OAuth provides both authentication and authorization. (As opposed to OpenID which only provides authentication, cf. http://stackoverflow.com/questions/1087031/whats-the-difference-between-openid-and-oauth and https://en.wikipedia.org/wiki/OAuth#OpenID_vs._pseudo-authentication_using_OAuth.) As long as you trust Facebook (or another provider) to authenticate me securely, you can consider it secure. Consider the counterfactual: if you require an additional credential at every login, what's the point of using OAuth for authentication? That would annoy the user. – Lane Rettig Aug 05 '15 at 12:52