使用 .Net 5 WebAPI 的 Vue SPA 的正确 OIDC 流程是什么？答案

【问题标题】：What’s the right OIDC flow for Vue SPA with .Net 5 WebAPI?使用 .Net 5 WebAPI 的 Vue SPA 的正确 OIDC 流程是什么？
【发布时间】：2021-12-04 12:59:51
【问题描述】：

我阅读了很多关于 OIDC 流程的信息，并且带有 PKCE 的授权代码流程非常适合 SPA。但是如果我有一个 .Net 5 WebAPI 后端怎么办。是否可以将没有 PKCE 的授权代码流用于该组合？

如果我在 PKCE 中使用身份验证代码流，那么哪种身份验证最适合我的 WebAPI？ JWT 代币？

非常感谢

【问题讨论】：

标签： .net-core oauth-2.0 asp.net-core-webapi single-page-application openid-connect

【解决方案1】：

标准流程

SPA 应使用授权码流 + PKCE 来验证用户并获取令牌
API 将仅验证 JWT 访问令牌，然后使用声明进行授权

PKCE

授权代码流最初需要客户端密码，但 SPA 无法安全地使用它。因此，传统的 SPA 流程通过 PKCE 参数使用运行时机密，这可以防止某些类型的漏洞。

传统水疗流程

几年前，仅在 Javascript 中实现 SPA 的安全性曾经是标准，就像我的 this code sample 一样。

2021 年基于浏览器的应用程序

由于浏览器安全问题和最近的浏览器限制，SPA 安全性非常棘手。在 2021 年，建议使用后端为前端的方法，其中 SPA 仅使用 SameSite=strict cookie 来调用 API。后端可以是以下任何一种：

当请求index.html 时重定向 SPA 的网站，尽管这会使一些 SPA 目标变得更加困难，例如部署到 CDN
SPA 按需调用的 API，以赋予 SPA 控制权的方式，并且不会失去 SPA 架构的优势

如果 SPA 通过后端代理涉及令牌的请求，则它可以使用客户端密钥 - 后端可以安全地存储密钥并将其附加到对授权服务器的调用中。

API 重定向解决方案

OIDC .Net 库旨在用于网站而非 API。考虑https://www.example.com 的 SPA 通过https://api.example.com 的 API 进行 OIDC：

SPA 只能通过 Ajax 调用来调用 API，例如

GET  https://api.example.com/login

网站 OIDC 库将尝试通过返回一个 Ajax 响应来重定向浏览器，该响应包含一个 302 重定向，并且 URL 位于 Location 标头中
通常浏览器可能不允许 SPA 的代码读取此类标头
还需要基于 API 的重定向 URI，并且 OIDC 响应将返回到将在浏览器中处理的 API URL，例如：

GET https://api example.com/callback?code=xxx

API 可以处理此请求，然后为.example.com 设置 cookie，然后重定向回 Web 源。您可能会在重定向中设置 cookie 时遇到问题 - 例如，SameSite=strict cookie 可能会被丢弃并需要降级为 SameSite=lax

API 解决方案

使用 API 管理 SPA 的令牌/cookie 以更完全地分离 Web 和 API 关注点时，您可能会发现更容易。这些资源展示了这种解决方案的工作原理：

【讨论】：

啊，好吧，但据我所知，如果我有一个后端，我也可以在我的后端使用带有密码的代码流？但是如何在水疗中心处理我的后端重定向？
您应该针对 SPA 重定向自身的设置，如 this class from the above code example。 SPA 使用的 URL 可以通过后端 API 计算出来。
那我有什么不明白的。是否可以通过在我的 WebAPI 中使用代码流配置 oidc 来保护我的 spa 和 .net WebAPI？这是最佳做法，这样做更安全还是我错了？我的想法是：spa 从 WebAPI 请求数据，未经授权并接收到 OIDC api 的重定向。 SPA 被重定向到 IDP，用户登录并重定向到 WebAPI，这将改变身份验证。代码令牌并重定向到 SPA。这是错误的还是不是最佳做法？
当您考虑重定向和 Ajax 请求时，这个模型会很棘手。我在上面添加了一些注释。