How to add OAuth facebook login in Ionic/Angular?

Question

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!

Answer 1

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,

Answer 2

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.