Angular单页应用程序与Asp.Net Core 3.1后端中的OpenID Connect

Question

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

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

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

问题 1 - 最佳实践

上述流程是否被视为最佳实践？还是我做错了？

问题 2 - 身份验证凭据

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

问题 3 - 过期和刷新

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

问题 4 - 必需的软件包和库

此外，特定于编程（因为这毕竟是一个编程问题），为此需要使用哪些必需库。问题既针对 SPA 又针对后端。我认为 SPA 需要某种 openid-connect 客户端，并且我需要一些库在后端完成授权码流程（用代码交换 id_token）这是否由 IdentityServer4 完成？还是有其他库可以完成?

更新

我已经准备了一个解决方案，力求展示一切的正确方式。它还是一个正在进行，杂乱无序，但很简洁，它能工作并且努力遵循最佳实践。

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

- Aviad P.

---

你能分享一下你的解决方案吗？我也遇到了同样的情况，只不过是在使用Vue进行SPA开发。谢谢。 - Stack Undefined

@sanmcp，请查看我对问题的最新更新。请访问 https://github.com/paviad/dotnet-angular-fullstack 以获取代码库。 - Aviad P.

Answer 1

OpenID Connect 是一个标准（建立在 OAuth 2.0 之上），它有许多流程（你提到了一个 Authorization Code flow，但它并不是适合 SPA 的最佳选择。

建议使用 Implicit flow 适用于 SPA 应用程序，其中 SPA 直接从 IdP 接收令牌。现在 Implicit 流程已经不推荐使用，Authorization Code with PKCE Flow 是目前 SPA 的最佳选择。此随机博客文章将为您提供有关这些流程的更多详细信息。

SPA 还可以接收刷新令牌，这可以用于获取新的访问令牌，但具体情况取决于所使用的 IdP。

后端只需要一个库来验证令牌（来自请求的Authorization头），必要时还需要验证一些声明（例如角色）以进行可选的授权。它不需要处理任何 OIDC 流程，因为通常通过响应代码（200、401、403、500 等）与 SPA 进行通信，并且 SPA 处理错误。

在我看来，只需选择适合你的SPA（我最喜欢的Angular）使用的库（最好是OIDC认证），它将为你提供许多有用的SPA功能（正确的流程、令牌刷新、令牌存储、http拦截器用于后端调用等等）。我会避免使用任何IdP提供的库——虽然它可能是快速实现的一种方式，但如果它们提供了OIDC标准之外的某些功能，它可能会导致IdP供应商锁定。

- Jan Garaj

---

假设 OP 在 asp.net core 中托管 SPA，可以先在 core 中处理 OAuth，然后将令牌传递给 SPA 进行使用吗？这样就不需要额外的后端库来验证传递到 API 端点的令牌。Core 已经在中间件中实现了所有逻辑。 - Stack Undefined