Angular.js 中基于 OpenID 的身份验证（带有 Flask 后端）

Question

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

看起来 Angular.js 代码需要合并逻辑 比如found here.

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

Answer 1

很遗憾，我没有要分享的示例应用程序，但这里有一个高级描述，希望对您有用。

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

1. 用户在登录表单中输入 OpenID URL 并提交到服务器
2. 服务器获取 OpenID URL 并响应重定向到 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 应用程序的上下文中完成，因为它需要浏览器重定向。您的服务器端应用程序必须至少支持三种路由：

• 为 Angular 应用提供服务的根 URL
• 启动 OpenID 身份验证的 URL
• 作为回调发送到 OpenID 提供程序的 URL

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

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

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

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

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

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

只需删除用户ID/令牌即可在客户端实现注销功能，以便将来向服务器发送请求而无需再次验证。

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