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

Question

我正在使用Ionic框架创建一个应用程序，现在想要添加Facebook (oauth2)登录。我已经在我的网站上使用OAuth实现了Facebook登录; 我简单地将用户重定向到相关的Facebook URL，让他们在那里输入凭据，然后我就可以在我的(Flask)后端获取令牌。这很顺利。

我现在想知道如何在我的Ionic/Cordova/Angular应用程序中实现同样的操作。我目前看来有几种选择：

• 将用户重定向到应用程序内Ionic/Cordova Webview中的移动版Facebook以验证我的应用程序（就像我在正常网站上做的那样），然后再将用户返回到Ionic应用程序中。但我感觉这不是正确的做法。
• 使用Facebook的Javascript身份验证，该身份验证将令牌返回给应用程序。然后，我可以将令牌POST到我的服务器以保存供以后使用。
• 让用户在Ionic应用程序中输入其用户名和密码，然后将它们POST到我的服务器，然后使用它们在Facebook上对用户进行身份验证并获取令牌。这显然完全违反了OAuth的目的，但我想它也可以工作。
• 我读了Ionic博客上关于如何实现Facebook登录的文章，但那个文章使用Auth0插件，我不想使用它（它需要花钱，我也不想依赖另一个公司）。
• 我不知道的另一种选择。

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

- kramer65

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库。

祝好，

- Nic Raboy

---

谢谢！与此同时，我正在尝试使用openFB（https://github.com/ccoenraets/OpenFB）。如果我理解正确的话，通常的方式是让用户从应用程序内部重定向到FB登录页面，成功登录后，应用程序本身可以将令牌发送到我的服务器，以便我知道用户已登录。这样对吗？ - kramer65

这是实现你想要的目标的众多方法之一。两种解决方案都可以工作。 - Nic Raboy

Ionic平台现在集成了Facebook登录：http://docs.ionic.io/v2.0.0-beta/docs/social-provider-facebook - TrtG

Answer 2

在移动混合应用程序中实现Facebook登录只是其中一半的工作。另一半则是与后端共享凭据。我刚刚在Flask后端上实现了这个功能，所以我想分享一下它的工作原理。

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

这将是一个非常糟糕的想法（正如你指出的那样，它违反了OAuth的原则），事实上它不会起作用。没有终端可以通过编程方式向Facebook提供登录名和密码，并获得令牌作为响应（在法律上且不进行爬取的情况下）。相反，获取令牌需要回调和用户交互，无论是在前端还是在后端执行。考虑Facebook中的双因素身份验证的情况，用户需要检索并输入发送到他们手机的代码。

使用Facebook的JavaScript身份验证，返回令牌给应用程序。然后我可以将令牌POST到我的服务器上以备将来使用。

是的，应该这样做。这被称为跨客户端身份验证。Facebook有一个页面，解释了auth tokens，在概念上很有帮助，并讨论了许多不同的场景，但不幸的是没有包括很多有用的代码片段。

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

请注意，这个令牌通常只有效几小时。如果你需要后端代表用户长期使用Facebook SDK，你需要将其换成长期token。

另外一个让我困惑了一段时间的问题是：在前端进行Facebook身份验证后，我得到了一个访问令牌；而在后端使用Python SDK时，我得到的是一个代码，需要在执行任何查询之前将其转换为令牌。我不确定为什么存在这种差异，但代码和令牌也在Facebook文档中有描述。

- Lane Rettig

---

谢谢！我现在已经实现了类似的东西，但是我不确定以下内容。应用程序将令牌发送到服务器，服务器响应userId。然后使用userId和相同的Facebook令牌进行对服务器的后续请求。因此，让我们谈论安全性；尽管只有用户可以获得有效的Facebook令牌，但是userId非常容易找到其他用户（只需在我们的网站上搜索并检查JSON）。 所以我的问题是：让用户使用userId和FB令牌进行身份验证是否安全，还是应该使用其他措施？ - kramer65

简短的回答是肯定的。OAuth 提供认证和授权两个方面。（相对于仅提供认证的 OpenID，详见https://dev59.com/anNA5IYBdhLWcg3wHp-B 和 https://en.wikipedia.org/wiki/OAuth#OpenID_vs._pseudo-authentication_using_OAuth.）只要您信任 Facebook（或其他提供商）可以安全地对我进行身份验证，您就可以将其视为安全。考虑一下反事实：如果您每次登录都需要额外的凭据，那么使用 OAuth 进行身份验证还有什么意义呢？这会让用户感到恼火。 - Lane Rettig