Angular.js中的基於OpenID的認證（帶Flask後端）

Question

如何實現 Angular.js中的基於OpenID的認證（帶有Flask後端Web應用程序）？

它看起來像Angular.js代碼需要引入邏輯 像例如found here.

然而，將燒瓶側也應該有一個OpenID覈查機制。
是否有「推薦」的方式來編寫後端和前端的邏輯？
是否有github示例或其他相關資源供初學者使用？

Answer 1

不幸的是，我沒有示例應用程序來共享，但這是一個高層次的描述，我希望是有用的。

讓我們忘記了，你有一個AngularJS應用程序和審查OpenID身份驗證交換是如何工作的一個時刻：

1. 用戶在登錄表單中輸入的OpenID URL並提交到服務器
2. 服務器獲取OpenID網址，並將重定向回覆給OpenID提供商。重定向包括一些參數，包括回調URL。
3. OpenID提供程序提示用戶輸入登錄憑據，然後允許與服務器應用程序共享他/她的身份。
4. OpenID提供程序將重定向迴應給應用程序，在步驟2中以回調形式給出的URL，並提供有關用戶的信息，如ID，電子郵件，用戶名等等。
5. 服務器現在擁有用戶信息，並且可以通過唯一ID，電子郵件地址或其他一些標識將用戶定位到其自己的用戶數據庫中。此時，如果用戶不知道該應用程序，則可以創建一個新帳戶。
6. 現在用戶已知，服務器可以編寫一個cookie來記錄他/她是誰，但請注意，這是與步驟5中的標識不同的標識。由OpenID提供商返回的標識信息對於將用戶定位到您自己的數據庫中，現在您可以在應用程序的上下文中記錄用戶的身份。這可能是數據庫用戶ID，電子郵件地址或用戶名（如果它們是唯一的）或令牌（可能是您擁有的有關用戶的某些信息的散列）。
7. 隨着寫入每個發送到服務器的新請求的cookie附帶識別經過身份驗證的用戶的數據。

所以讓我們來看看將AngularJS添加到混合中會發生什麼。請注意，有很多方法可以做到這一點，我在下面描述的是一種可能性。

如果Angular應用程序向需要驗證的服務器發出請求，則服務器應返回錯誤代碼401.例如，當Angular應用程序獲取401時，可以彈出登錄窗體。

但是，OpenID認證舞蹈不能在豐富的JS應用程序的上下文中完成，因爲它需要瀏覽器重定向。您的服務器端應用程序都支持至少有三個途徑：

• ，供應的角度應用
• 發起OpenID身份驗證
• 被髮送回調到OpenID提供一個網址URL的根網址

因此，用戶連接到您的根URL並獲取AngularJS應用程序，該應用程序以未驗證狀態啓動。在某些時候，Angular應用程序會提示用戶登錄，使用一個OpenID文本框和一個提交按鈕。這些表單字段應該是發佈到服務器的常規HTML表單的一部分，而不是附加到控制器的客戶端Angular元素。表單的「action」屬性應指向服務器的OpenID登錄路由。

當用戶點擊登錄按鈕服務器喚醒並接收到啓動OpenID身份驗證請求。此時，上述步驟1-5不加改變地運行。

在步驟5結束時，服務器已將用戶定位到應用程序的數據庫中。服務器現在可以做的是將重定向回覆到根URL，以重新啓動Angular應用程序。如果應用程序需要在非初始狀態下重新啓動，那麼在啓動OpenID身份驗證過程之前，可以將要還原的狀態保存在客戶端存儲區（例如，Cookie）中。

但這還不夠，服務器還需要傳遞有關登錄用戶的Angular一些信息。一種方法是將用戶的唯一ID或令牌附加到重定向URL的查詢字符串中， Angular應用程序可以訪問。這將是上述步驟6中進入cookie的相同ID。如果必要的話

現在角應用重新啓動時，可以恢復其狀態，並具有一個ID或令牌標識登錄的用戶。當應用程序需要向服務器發出Ajax請求時，它會將此ID或令牌與請求一起發送。服務器可以驗證它並返回401，如果發現它是無效的或者它有一個到期日期並且發現過期。

如果與所述請求發送的標識被驗證則該請求可以進行和響應可以被髮送回角應用程式。

甲註銷功能可以在客戶端側簡單地通過刪除用戶ID /令牌來實現，從而使未來的服務器請求無需驗證再次發送。

非常重要：包含用戶信息的Angular應用程序和Flask服務器之間的所有交換都必須通過安全HTTP完成。如果不是您的ID或令牌將以明文形式出行。