angularjs - Angular.js 中基于 OpenID 的身份验证(使用 Flask 后端)

Question

一个如何实现
Angular.js 中基于 OpenID 的身份验证(使用 Flask 后端 Web 应用程序)？

看起来 Angular.js 代码需要合并逻辑
就像这个例子 found here.

但是，Flask 端也应该有 OpenID 验证机制。
是否有“推荐”的方式来编写后端和前端的逻辑？
是否有 github 示例或其他一些适合初学者的相关资源？

Answer 1

不幸的是，我没有可以共享的示例应用程序，但这里有一个高级描述，我希望它有用。

让我们暂时忘记您有一个 AngularJS 应用程序并查看 OpenID 身份验证交换是如何工作的:

用户在登录表单中输入 OpenID URL 并提交到服务器

服务器获取 OpenID URL 并响应重定向到 OpenID 提供程序。重定向包括一些参数，包括回调 URL。

OpenID 提供程序提示用户输入登录凭据，然后允许与服务器应用程序共享他/她的身份。

OpenID 提供程序响应重定向回应用程序，在步骤 2 中作为回调给出的 URL，并提供有关用户的信息，例如 ID、电子邮件、用户名等。

服务器现在拥有用户信息，并且可以通过唯一 ID、电子邮件地址或其他一些标识在其自己的用户数据库中定位用户。此时，如果应用程序不知道该用户，则可以创建一个新帐户。

既然用户是已知的，服务器就可以写一个 cookie 来记录他/她是谁，但请注意，这与第 5 步中的身份不同。 OpenID 提供者返回的身份信息对于定位用户很有用在您自己的数据库中，所以现在您可以在您的应用程序上下文中记录用户的身份。这可以是数据库用户 ID、电子邮件地址或用户名(如果它们是唯一的)或 token ，它可以是您拥有的有关用户的一些信息的散列。

写入 cookie 后，发送到服务器的每个新请求都带有标识经过身份验证的用户的数据。

因此，让我们看看当您将 AngularJS 添加到组合中时会发生什么。请注意，有很多方法可以做到这一点，我在下面描述的是一种可能性。

如果 Angular 应用程序向服务器发出需要身份验证的请求，服务器应返回错误代码 401。例如，当它收到 401 时，Angular 应用程序可以弹出登录表单。

但是 OpenID 身份验证无法在富 JS 应用程序的上下文中完成，因为它需要浏览器重定向。您的服务器端应用程序必须至少支持三种路由:

为 Angular 应用提供服务的根 URL

启动 OpenID 身份验证的 URL

作为回调发送到 OpenID 提供程序的 URL

因此，用户连接到您的根 URL 并获取 AngularJS 应用程序，该应用程序以未经身份验证的状态启动。在某些时候，Angular 应用程序将提示用户登录，使用具有 OpenID 文本字段和提交按钮的表单。这些表单字段应该是发布到服务器的常规 HTML 表单的一部分，而不是附加到 Controller 的客户端 Angular 元素。表单的“action”属性应该指向服务器的 OpenID 登录路由。

当用户单击登录按钮时，服务器唤醒并接收启动 OpenID 身份验证的请求。此时，上面的步骤 1-5 无需更改即可运行。

在第 5 步结束时，服务器已在应用程序的数据库中找到用户。服务器现在可以做的是响应重定向回根 URL，以重新启动 Angular 应用程序。如果应用程序需要在非初始状态的状态下重新启动，则可以在开始 OpenID 身份验证过程之前将要恢复的状态保存在客户端存储(例如 cookie)中。

但这还不够，服务器还需要向 Angular 传递一些有关登录用户的信息。 一种方法是在重定向 URL 的查询字符串中附加用户的唯一 ID 或 token ，Angular 应用程序可以使用权。这将与上面第 6 步中进入 cookie 的 ID 相同。

现在 Angular 应用程序重新启动，必要时可以恢复其状态，并具有标识登录用户的 ID 或 token 。当应用程序需要向服务器发出 Ajax 请求时，它会随请求一起发送此 ID 或 token 。服务器可以验证它，如果发现它无效或者它有一个过期日期并发现它已过期，则返回 401。

如果与请求一起发送的标识得到验证，则可以执行请求，并且可以将响应发送回 Angular 应用程序。

可以在客户端简单地通过删除用户 ID/ token 来实现注销功能，以便以后向服务器发送请求时无需再次验证。

非常重要 :Angular 应用程序和 Flask 服务器之间的所有包含用户信息的交换都必须通过安全的 HTTP 完成。如果不是，您的 ID 或 token 将以纯文本形式传输。