如何在Ionic / Angular中添加OAuth facebook登录？

Question

我正在使用Ionic framework来创建应用，我现在想添加facebook（oauth2）登录。我已经使用OAuth在我的网站上实现了facebook登录;我只是将用户重定向到相关的Facebook URL，让他们在那里输入他们的凭据，然后我在我的（Flask）后端获取令牌。这就像一个魅力。

我现在想知道如何在我的Ionic / Cordova / Angular应用程序中实现相同的功能。我现在看到它有几个选项：

• 将用户重定向到应用程序中Ionic / Cordova webview中的Facebook移动版本，以验证我的应用程序（就像我在普通网站中一样），然后再次将用户返回到Ionic应用程序。我觉得这不是正确的做法。
• 使用Facebook的Javascript身份验证，将令牌返回给应用程序。然后我可以将令牌发送到我的服务器以保存它以供以后使用。
• 让用户在Ionic应用程序中插入他的用户名和密码，然后将这些用户名和密码发送到我的服务器，然后使用这些用户在Facebook上对用户进行身份验证并获取令牌。这显然完全违背了OAuth的目的，但我想它会起作用。
• 我阅读this article on the Ionic blog关于如何实施Facebook登录，但是使用Auth0 plugin，我不想使用它（它需要花钱，我不想依赖另一个公司）。
• 我不知道的另一种选择..

所以我现在想知道;在我的Ionic应用程序中实施（基于OAuth）Facebook登录的最佳方式是什么？为什么？欢迎所有提示！

Answer 1

您可以在Ionic Framework的ngCordova库中使用$cordovaOauth.facebook：

http://www.ngcordova.com

以下两篇参考文献可能会让您朝着正确的方向使用它：

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

如果您的服务取决于登录数据的准确性，您可能也想通过后端进行验证。但是，这种RESTful方法类似于JavaScript库。

此致

Answer 2

让Facebook登录移动混合应用程序是一半的战斗。另一半是与后端共享凭据。我刚刚对Flask后端完成了这个实现，所以我认为我分享了什么有效。

  

让用户在Ionic应用程序中插入他的用户名和密码，然后将这些用户名和密码发送到我的服务器，然后使用这些来验证Facebook上的用户并为其获取令牌。这显然完全违背了OAuth的目的，但我想它会起作用。

这是一个非常糟糕的主意（正如你所指出的，它违反了OAuth的原则），事实上它不会起作用。没有端点，您可以通过编程方式为Facebook提供登录名和密码，并获得响应中的令牌（合法且无需抓取）。相反，获取令牌需要回调用户交互，无论是在前端还是在后端执行。考虑two-factor authentication in Facebook的情况，用户需要检索并输入发送到手机的代码。

  

使用Facebook的Javascript身份验证，将令牌返回给应用程序。然后我可以将令牌发送到我的服务器以保存它以供以后使用。

是的，这是应该怎么做的。这称为跨客户端身份验证。 Facebook有一个explains auth tokens页面，它在概念上很有用，并讨论了许多不同的场景，但遗憾的是它没有包含许多有用的代码片段。

您可以在登录过程中直接将访问令牌传递给后端。然后后端可以验证令牌。假设您在后端使用标准Flask-Security和Flask-Social包，则可以使用从前端传递的令牌包装Flask-Social登录视图来对用户进行身份验证。您可以在此要点中找到示例代码：https://gist.github.com/lrettig/7ca94ba45961207a7bd3

另请注意，此令牌通常仅在几个小时内有效。如果您需要后端代表用户持续使用Facebook SDK，则需要swap it for a Long-Term token。

让我感到困惑的另一面注意事项是：我注意到，在前端使用Facebook进行身份验证后，我获得了一个访问令牌，而在后端使用了一个Python SDK，我提交了一个代码，而这需要在可以执行任何查询之前交换令牌。我不确定为什么差异，但代码和令牌也在Facebook文档中描述。