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

Posted 2023-03-07

【中文标题】如何在 Ionic/Angular 中添加 OAuth facebook 登录？

【英文标题】：How to add OAuth facebook login in Ionic/Angular?

【发布时间】：2015-04-18 09:05:43

【问题描述】：

我正在使用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 登录的最佳方式是什么？为什么？欢迎所有提示！

【参考方案1】：

您可以在 Ionic 框架的 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 库。

问候，

【讨论】：

谢谢！与此同时，我正在尝试使用 openFB (github.com/ccoenraets/OpenFB)。所以，如果我理解正确的话；通常的方法是将用户重定向到从应用程序内登录的 FB，当成功登录时，应用程序本身可以将令牌发送到我自己的服务器，以便我知道用户已登录。正确吗？

这是实现您想要的许多方法之一。两种解决方案都可以。

Ionic 平台现在嵌入 Facebook 登录：docs.ionic.io/v2.0.0-beta/docs/social-provider-facebook

【参考方案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 登录视图以使用从前端传递的令牌对用户进行身份验证。您可以在此 gist 中找到示例代码：https://gist.github.com/lrettig/7ca94ba45961207a7bd3

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

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

【讨论】：

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

简短的回答是肯定的。 OAuth 提供身份验证和授权。 （与仅提供身份验证的 OpenID 不同，参见 ***.com/questions/1087031/… 和 en.wikipedia.org/wiki/…）只要您信任 Facebook（或其他提供商）安全地对我进行身份验证，您就可以认为它是安全的。考虑反事实：如果您在每次登录时都需要额外的凭据，那么使用 OAuth 进行身份验证有什么意义？这会惹恼用户。