使用 oidc-client 和客户端密码反应 SPA答案

【问题标题】：React SPA with oidc-client and client secret使用 oidc-client 和客户端密码反应 SPA
【发布时间】：2020-12-08 20:05:30
【问题描述】：

我在 ASP.NET Core API 之上构建了一个 React SPA，我想通过 OIDC 进行身份验证。授权类型是授权码，客户端确实有客户端密码。

由于我们将使用客户端密码，因此涉及密码的授权步骤必须通过我们控制的代理。

这在带有 oidc-client 的 React SPA 中可行吗？

【问题讨论】：

【解决方案1】：

如果秘密在客户端，它就不是秘密。 :)

秘密用于服务器-服务器身份验证，因为秘密在服务器上是安全的（无论如何我们希望如此），并且授予访问权限的 API 有一个消费者白名单，它被授予使用秘密的访问权限。

对于 SPA，如果您谈论的是允许应用使用 API，我相信您仅限于使用 CORS 白名单。如果您说的是用户通过客户端访问 API，那么您正在查看访问代码和用户名/密码。

【讨论】：

感谢您的意见。我们在这里讨论的是通过客户端访问 API 的用户。
客户端访问 API 如您所说 - 这发生在登录完成后。您应该说明为什么需要使用客户端密码。如果您使用的是服务器端流程，则使用服务器端安全库而不是 oidc-client 是标准的。但是，客户端流程更适合 React 架构。
我们被告知要使用客户端密码，因为身份验证平台不支持公共客户端。所以，是的，服务器端库会更适合。但据我所知，这不适用于 React 架构。
啊——我明白了——你似乎想要和我一样的架构目标。我用更多细节更新了我的原始答案。我的解决方案很棘手，但我更喜欢它而不是 Web 服务器端的安全性。
@Yatrix 我说的是保持客户端秘密服务器端。这样，涉及秘密的步骤通过服务器应用程序传递，其中秘密应用于前往身份验证服务器的请求。很抱歉造成混乱。 :)

【解决方案2】：

问题

您的身份验证系统、可用性或安全性达到可接受的水平存在阻止问题。在您的情况下，没有 PKCE 支持。

代理解决方案

使用 oidc-client，它将添加 PKCE 参数，您的 SPA 安全性支持最新标准。

客户端密码将在授权代码授予和刷新令牌授予消息期间发挥作用。

可以在服务器端调整消息以删除 PKCE 并改用客户端密钥。这是一个相当复杂的解决方案，并不是每个人都会喜欢它。

它需要由 Web 域发布的 SameSite cookie。在我的例子中，我使用了在 CloudFront 内容交付网络中运行的 AWS lambda 边缘函数。

为什么要这样？

为了适应 SPA 架构并在可用性、编码模型、移动集成和全球网络性能等领域实现更广泛的目标。取决于您是否觉得值得付出努力。

链接

【讨论】：