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

How to add OAuth facebook login in Ionic/Angular?

提问by kramer65

I'm using the Ionic frameworkto create an app and I now want to add facebook (oauth2) login. I already implemented a facebook login on my website using OAuth; I simply redirect the user to the relevant facebook URL, let them enter their credentials there and I then get the token in my (Flask) backend. This works like a charm.

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

I now wonder how I can implement the same in my Ionic/Cordova/Angular app. As I see it now there are a couple options:

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

• Redirect the user to the mobile version of Facebook within the Ionic/Cordova webview in the app to authenticate my app (just like I do in my normal website), and then return the user to the Ionic app again. I've got the feeling that this is not the right way to do it though.
• Use Facebooks Javascript authentication which returns the token to the app. I can then POST the token to my server to save it for later usage.
• Let the user insert his username and password in the Ionic app and POST those to my server and then use those to authenticate the user on facebook and get a token for it. This obviously totally defies the purpose of OAuth, but I guess it would work.
• I read this article on the Ionic blogabout how to implement Facebook login, but that uses the Auth0 plugin, which I don't want to use (it costs money and I don't want to be dependent on another company).
• Yet another option which I am not aware of..

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

So I now wonder; what is the best way to implement (OAuth based) Facebook login in my Ionic app and why? All tips are welcome!

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

回答by Nic Raboy

You can make use of $cordovaOauth.facebookin the ngCordova library of Ionic Framework:

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

http://www.ngcordova.com

http://www.ngcordova.com

Here are two references that might put you in the right direction on using it:

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

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

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

If your service depends on the accuracy of the login data, you may want to validate via the back-end as well. However this RESTful approach is similar to the JavaScript library.

如果您的服务依赖于登录数据的准确性，您可能还需要通过后端进行验证。然而，这种 RESTful 方法类似于 JavaScript 库。

Regards,

问候，

回答by Lane Rettig

Getting Facebook login working in the mobile hybrid app is half the battle. The other half is sharing the credentials with the backend. I just finished implementing this against a Flask backend so I thought I'd share what worked.

在移动混合应用程序中使用 Facebook 登录是成功的一半。另一半是与后端共享凭据。我刚刚完成了对 Flask 后端的实现，所以我想我会分享有效的方法。

Let the user insert his username and password in the Ionic app and POST those to my server and then use those to authenticate the user on facebook and get a token for it. This obviously totally defies the purpose of OAuth, but I guess it would work.

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

This would be a very bad idea (as you pointed out, it violates the principles of OAuth), and in fact it wouldn't work. There is no endpoint where you can programmatically hand Facebook a login and password, and get a token in response (legally, and without scraping). Instead, getting a token requires a callback with user interaction, whether it's performed on the frontend or on the backend. Consider the case of two-factor authentication in Facebookwhere the user needs to retrieve and enter a code sent to their mobile phone.

这将是一个非常糟糕的主意（正如您所指出的，它违反了 OAuth 的原则），实际上它行不通。没有任何端点可以让您以编程方式向 Facebook 提供登录名和密码，并获得令牌作为响应（合法且无需抓取）。相反，获取令牌需要与用户交互的回调，无论是在前端还是在后端执行。考虑Facebook中的两因素身份验证的情况，其中用户需要检索并输入发送到他们手机的代码。

Use Facebooks Javascript authentication which returns the token to the app. I can then POST the token to my server to save it for later usage.

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

Yup, this is how it should be done. This is called cross-client authentication. Facebook has a page which explains auth tokensthat is conceptually helpful and discusses lots of different scenarios but unfortunately does not include many helpful code fragments.

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

You can directly pass the access token to the backend as part of the login process. The backend can then validate the token. Assuming you are using the standard Flask-Securityand Flask-Socialpackages on the backend, you can wrap the Flask-Social login view to authenticate the user using the token passed from the frontend. You can find sample code in this gist: https://gist.github.com/lrettig/7ca94ba45961207a7bd3

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

Also note that this token is typically only valid for a couple of hours. If you need the backend to use the Facebook SDK on behalf of the user on an ongoing basis, you'd need to swap it for a Long-Term token.

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

Another side note that confused me for a while: I noticed that, after authenticating with Facebook on the frontend, I was handed an access token, whereas using a Python SDK on the backend, I was handed a code instead, which needs to be exchanged for a token before any query can be performed. I'm not sure why the difference, but codes and tokens are also described in the Facebook docs.

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