如何在 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 文檔中也描述了代碼和令牌。