Angular 5 混合身份验证类型与旧系统答案

【问题标题】：Angular 5 mixed auth types with legacy systemAngular 5 混合身份验证类型与旧系统
【发布时间】：2017-11-21 22:41:58
【问题描述】：

我们有一个遗留系统，我们想把它带到 Angular 中。既然系统很大，我们就一步一步来，一个模块一个模块来。

现在，在我们完成整个系统之前，我们可能需要在 Angular SPA 和旧系统之间切换，因为正如我所读的那样，Angular 在应用程序中的运行并不好。

现在您如何处理身份验证？在 SPA 端将是 JWT，并且有一个相应的端点将其转换为经过身份验证的用户。在遗留端存在会话。

但是如何处理切换上下文（在 SPA 和旧版之间）以同时使用 JWT and session cookie？我的猜测是存储 JWT 令牌和 cookie，并将两个系统保存在 Legacy 公共文件夹中，通过 Angular 进行身份验证，发送和存储两种类型。

有没有更好的方法来实现这一点？

【问题讨论】：

我有点不清楚你想要实现什么。您的 Angular SPA 是否也与某种后端进行通信？而且这个后端与您的旧系统是分开的，但是您想在两个后端都保留用户身份验证吗？两个系统都支持 session/cookies 和 JWT 吗？
不，遗留是后端和一个系统。当前具有现有基于会话的身份验证的 MVC。我们为 SPA 身份验证添加了 API 路由，由于系统非常庞大，我们无法工作 10 年才能将所有内容都放入 SPA，但需要两个系统使用相同的底层身份验证。 Angular 是一个新系统，它使用遗留系统中内置的 api。我希望这能让它更清楚。
我明白了。因此，您的 SPA 是纯前端，并使用您的旧 MVC 系统提供的身份验证 API，对吗？您的旧有其自己的前端实现，您希望跨两个系统保留身份验证信息？
是的，正确的。随着越来越多的功能转移到 SPA，两个系统都需要能够相互切换（当然，用户需要能够同时访问这两个系统）。最后，一个纯粹的 JWT 就足够了（或者那时的最佳实践）。与此同时，我们将在一段时间内让这两个系统相互链接。

标签： angular angular2-jwt angular2-cookie

【解决方案1】：

很抱歉，我未能尽快回复。我能想到的一种方法是在每个 Angular SPA 和遗留系统中嵌入一个 iframe，从另一个系统加载接收页面。这个接收页面的作用是让用户登录/退出其他系统。此外，您不想将 JWT 或任何敏感信息存储在公用文件夹中；将 localStorage 用于 JWT，将会话保持在客户端级别就足够了。

有关实现 iframe 的信息，您可以参考https://jcubic.wordpress.com/2014/06/20/cross-domain-localstorage/

让我们看看以下场景。根据您实施身份验证的方式，这些可能需要进行一些修改才能应用：

场景 1：用户登录 Angular 应用

当用户登录到您的 Angular SPA 时，通过旧版 API 进行的身份验证会返回一个 JWT 并存储在 localStorage 中。每次用户通过您的 Angular 应用程序发出请求时，JWT 都会通过您的 Authorization 标头发送，以便识别用户。

现在，当登录后返回 JWT 时，向嵌入式 iframe（指向您的旧接收页面）发送登录消息，以便接收页面在您的旧域上创建用户会话/cookie。您应该将 cookie 设置为与您的 JWT 具有相同的过期时间。

场景 2：用户退出 Angular 应用

从本地存储中删除 JWT。向您的 iframe 发送消息，以便在您的旧域中销毁用户的会话 cookie。

场景 3：用户登录旧版

您需要稍微修改登录。当用户登录到你的遗留系统时，你还需要生成一个 JWT，并在登录成功时返回到页面。通过您的嵌入式 iframe（现在指向您的 Angular 应用程序）发送一条消息，以将您的 JWT 保存在您的 SPA 域中的 localStorage 中。

您不必在 Angular 端创建用户会话，因为 JWT 就足够了，但请记住，用户会话到期时间应与您的 JWT 到期时间同步。

场景 4：用户退出旧版

通过 ifame 向您的 Angular SPA 发送消息，以从 localStorage 中删除 JWT。同样，您无需担心 Angular 端的用户会话，因为您已经在使用 JWT 进行授权。

关于安全的一些话

显然，要实施这种 iframe 方法，如果您的网站位于不同的域中，则需要启用 CORS。确保实施适当的安全措施，以防止 XSS 或嵌入 iframe 等漏洞在不允许的域中加载您的网站。

另外，当我使用 JWT 时，我会生成一个 id (JTI) 并将其作为 JWT 有效负载的一部分，并将经过哈希处理的 JTI 存储为 cookie。这样，每当用户使用 JWT 发出请求时，我都可以检查浏览器是否有 JTI cookie，并确保用户不只是窃取 JWT 以在另一台机器上使用。

如果您还有其他问题，请告诉我！

【讨论】：