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

Question

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

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

• 将用户重定向到应用程序中 Ionic/Cordova 网络视图中的移动版 Facebook 以验证我的应用程序（就像我在普通网站中所做的那样），然后再次将用户返回到 Ionic 应用程序。 我有一种感觉，虽然这不是正确的方法。
• 使用 Facebooks Javascript 身份验证将令牌返回给应用程序。 然后我可以将令牌发布到我的服务器以保存它以备后用。
• 让用户在 Ionic 应用程序中插入他的用户名和密码并将它们发布到我的服务器，然后使用它们在 facebook 上对用户进行身份验证并为其获取令牌。 这显然完全违背了 OAuth 的目的，但我想它会起作用。
• 我在 Ionic 博客上阅读了这篇关于如何实现 Facebook 登录的文章，但它使用了Auth0 插件，我不想使用它（它花钱而且我不想依赖另一家公司）。
• 还有一个我不知道的选择..

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

Answer 1

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

http://www.ngcordova.com

以下是两个参考资料，可能会让您在使用它时找到正确的方向：

https://www.thepolyglotdeveloper.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 提供登录名和密码，并获得令牌作为响应（合法且无需抓取）。 相反，获取令牌需要与用户交互的回调，无论是在前端还是在后端执行。 考虑Facebook中的两因素身份验证的情况，其中用户需要检索并输入发送到他们手机的代码。

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

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

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

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

另一个让我困惑了一段时间的说明：我注意到，在前端与 Facebook 进行身份验证后，我收到了一个访问令牌，而在后端使用 Python SDK，我收到了一个代码，需要交换在可以执行任何查询之前获取令牌。 我不确定为什么会有差异，但 Facebook 文档中也描述了代码和令牌。