带有 Asp.Net Core 3.1 后端的 Angular SPA 中的 OpenID Connect

Question

我想构建一个带有 (Asp.Net Core) 后端的 (Angular) SPA，并且我想使用安全最佳实践。我的计划是这样的：

1. SPA 显示一个登录按钮
2. 单击 Login 按钮会启动与某些身份提供者（Google、Microsoft 等）的授权代码 openid-connect 流程
3. 用户通过身份提供者进行身份验证，然后使用授权代码重定向回 SPA
4. SPA 然后向后端发出登录请求并传递授权码
5. 后端向身份提供者发出请求，将代码交换为 id_token，并为用户创建某种会话票据

现在这就是我因缺乏正确理解而陷入困境的地方

问题 1 - 最佳实践

上述过程甚至被认为是最佳实践吗？还是我做错了？

问题 2 - 身份验证票

我的后端只是 API，它不为用户呈现 HTML 页面，只提供 Json 响应。我应该创建什么样的身份验证票？它应该是 JWT 还是 Cookie？我认为它不能是 cookie，因为 API 无法返回浏览器将正确存储的 cookie。所以它必须是某种令牌，最好是 JWT。 SPA应该如何存储，本地/会话存储？

问题 3 - 过期和刷新

假设后端返回一个 JWT 给 SPA，这个 JWT 应该包含什么？它的到期时间应该是多少？如何处理自动刷新？

问题 4 - 所需的包和库

此外，特定于编程（因为这毕竟是一个编程问题），所有这些都需要使用哪些库。这个问题既适用于 SPA，也适用于后端。我假设我需要某种 SPA 的 openid-connect 客户端，并且我需要一些后端库来完成授权代码流程（交换 id_token) 这是由IdentityServer4 完成的吗？或者有没有其他的图书馆。

更新

我准备了一个解决方案，力求展示做所有事情的正确方法。这是一项正在进行的工作，杂乱无章，但它是最小的，它有效并且努力遵循最佳实践。

https://github.com/paviad/dotnet-angular-fullstack

Answer 1

OpenID Connect 是一个标准（在 OAuth 2.0 之上），它有很多流程（您提到了一个 Authorization Code flow，这不是 SPA 的最佳选择。

建议 SPA 应用使用 Implicit flow，其中 SPA 直接从 IdP 接收令牌。现在不推荐使用隐式流，Authorization Code with PKCE Flow 是目前 SPA 的最佳选择。此random blog post 将为您提供有关这些流程的更多详细信息。

SPA 可能还会收到刷新令牌，可用于获取新的访问令牌，但这取决于使用的 IdP。

后端只需要库来验证令牌（来自请求Authorization 标头），最终它需要验证一些声明（例如角色）以获得可选授权。它不需要处理任何 OIDC 流，因为它通常通过响应代码（200、401、403、500，...）与 SPA 进行通信，而 SPA 会处理错误。

恕我直言，只需为您的 SPA (my favorite for Angular) 选择合适的库（首选 OIDC certified），它将提供许多开箱即用的有用 SPA 功能（正确的流程、令牌刷新、令牌存储、后端调用的 http 拦截器、 ...）。我会避免使用任何 IdP 提供的库 - 它可以快速实现实施，但如果 IdP 供应商提供了 OIDC 标准之外的某些功能，则可能会被锁定。