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

Question

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

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

• 在应用程序的Ionic/Cordova webview中将用户重定向到Facebook的移动版本以验证我的应用程序(就像我在普通网站中那样),然后再次将用户返回到Ionic应用程序.我觉得这不是正确的做法.
• 使用Facebook的Javascript身份验证,将令牌返回给应用程序.然后我可以将令牌发送到我的服务器以保存它以供以后使用.
• 让用户在Ionic应用程序中插入他的用户名和密码,然后将这些用户名和密码发送到我的服务器,然后使用这些来验证Facebook上的用户并为其获取令牌.这显然完全违背了OAuth的目的,但我想它会起作用.
• 我在Ionic博客上阅读了这篇关于如何实现Facebook登录的文章,但是它使用了我不想使用的Auth0插件(它需要花钱而且我不想依赖另一家公司).
• 还有一个我不知道的选择..

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

Answer 1

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

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提供登录名和密码,并获得响应中的令牌(合法且无需抓取).相反,获取令牌需要使用用户交互进行回调,无论是在前端还是在后端执行.考虑Facebook中双因素身份验证的情况,用户需要检索并输入发送到手机的代码.

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

是的,这是应该怎么做的.这称为跨客户端身份验证.Facebook有一个页面,解释了在概念上有用的auth令牌,并讨论了许多不同的场景,但遗憾的是不包含许多有用的代码片段.

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

另请注意,此令牌通常仅在几个小时内有效.如果您需要后端代表用户持续使用Facebook SDK,则需要将其替换为长期令牌.

另一方面让我困惑了一段时间:我注意到,在前端使用Facebook进行身份验证后,我获得了一个访问令牌,而在后端使用了Python SDK,我被交给代码,需要进行交换在执行任何查询之前的令牌.我不确定为什么差异,但代码和令牌也在Facebook文档中描述.