How to add OAuth facebook login in Ionic / Angular?

Question

I am using the Ionic framework to create an application, and now I want to add the facebook login (oauth2). I have already implemented facebook login on my website using OAuth; I simply redirect the user to the appropriate facebook url, let them enter their credentials, and then get the token in my ( Flask ) backend. It works like a charm.

Now I wonder how I can implement the same thing in my Ionic / Cordova / Angular app. As I see now, there are several options:

• Redirect the user to the mobile version of Facebook in the Ionic / Cordova web browser in the application to authenticate my application (as on my regular website), and then return the user to the Ionic application again. I have the feeling that this is the wrong way to do it, though.
• Use Facebook authentication, which returns a token to the application. Then I can send the token to my server to save it for later use.
• Let the user insert his username and password into the Ionic and POST application on his server, and then use them to authenticate the user on facebook and get a token for him. Obviously, this is completely contrary to the purpose of OAuth, but I think it will work.
• I read this article on the Ionic blog about how to implement Facebook login, but it uses the Auth0 plugin that I don’t want to use (it costs money and I don’t want to be dependent on another company).
• Another option that I don't know about ..

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

Answer 1

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

http://www.ngcordova.com

Here are two links that can help you in the right direction:

https://blog.nraboy.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 information, you can also check it through an external server. However, this RESTful approach is similar to the JavaScript library.

Hi,

Answer 2

Getting Facebook login running on a mobile hybrid app is half the battle. The other half shares credentials with the backend. I just finished implementing this project against flex, so I decided to share what worked.

Let the user paste their username and password into the Ionic and POST app on their server, and then use those to authenticate the user on facebook and get a token for him. Obviously, this completely ignores the purpose of OAuth, but I think it will work.

That would be a very bad idea (as you pointed out, this violates OAuth principles), and in fact it will not work. There is no endpoint where you can programmatically pass Facebook your username and password and get a response in return (legally and without scrapers). Instead, a token with a user interaction is required to obtain a token, regardless of whether it was executed on the interface or on the backend. Consider the case of two-factor authentication on Facebook , where the user must receive and enter the code sent to their mobile phone.

Use Facebooks Javascript authentication, which returns a token to the application. Then I can send the token to my server to save it for later use.

Yes, that’s how it should be done. This is called cross-client authentication. Facebook has a page that explains authentication tokens , which is conceptually useful and discusses many different scenarios, but unfortunately does not contain many useful snippets of code.

You can directly transfer the access token to the backend as part of the login process. The backend can then confirm the token. Assuming you use the standard Flask-Security and Flask-Social on the backend, you can wrap the login window on the flash social network to authenticate the user using the token passed from the interface. You can find sample code in this context: https://gist.github.com/lrettig/7ca94ba45961207a7bd3

Also note that this token usually only lasts a couple of hours. If you need to use the backend to use the Facebook SDK on behalf of the user on an ongoing basis, you need to replace it with a long-term token .

Another note that confused me a bit: I noticed that after authentication with Facebook on the interface, I was given an access token, while using the Python SDK on the backend, I was instead transferred the code. to exchange for a token before any request can be executed. I'm not sure why the difference is, but codes and tokens are also described in Facebook docs.