angular - Angular SPA 中的 OpenID Connect 与 Asp.Net Core 3.1 后端

Question

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

SPA 显示登录按钮

单击“登录”按钮会启动与某些身份提供商(Google、Microsoft 等)的授权代码 openid-connect 流程

用户通过身份提供者进行身份验证，然后使用授权码

重定向回 SPA。

SPA然后向后端发出登录请求并传递授权码

后端向身份提供者发出请求，交换 id_token 的代码，并为用户创建某种 session 票证

现在这是我因缺乏正确理解而陷入困境的地方
问题 1 - 最佳实践
上述程序甚至被认为是最佳实践吗？还是我做错了？
问题 2 - 身份验证票
我的后端只是 API，它不为用户呈现 HTML 页面，只提供 Json 响应。我应该创建什么样的身份验证票？它应该是 JWT 还是 Cookie？我认为它不能是 cookie，因为 API 无法返回浏览器将正确存储的 cookie。所以它必须是某种 token ，最好是 JWT。 SPA 应该如何存储它，本地/ session 存储？
第 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 的最佳选择。

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

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

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

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