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 app提供服务的根URL
• 启动OpenID身份验证的URL
• 作为回调发送给OpenID提供商的URL

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

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

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

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

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

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

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

非常重要：Angular应用程序和Flask服务器之间包含用户信息的所有交换必须通过安全HTTP完成。如果不是，您的身份证或代币将以纯文本形式旅行。