OIDC - 在 SPA ReactJs 或后端（Rails 应用程序）中生成 code_verifier 和 code_challenge 的最佳位置是什么答案

【问题标题】：OIDC - What is the best place to generate then code_verifier and code_challenge in SPA ReactJs or at backend (Rails App)OIDC - 在 SPA ReactJs 或后端（Rails 应用程序）中生成 code_verifier 和 code_challenge 的最佳位置是什么
【发布时间】：2021-05-15 00:53:00
【问题描述】：

在 OIDC 流程 (PKCE) 中，如何从 code_verifier 安全地生成 code_challenge。我应该在 ReactJs SPA 中还是在我的 Rails 中作为后端应用程序生成。

我不确定在 SPA ReactJs 或 In Rails App 中的何处生成它。

如果我在 ReactJs SPA 中生成，那么出于安全原因，将该 code_verifier 存储在浏览器中的哪个位置以便在 IDP (okta) 的 /token api 处进行下一次令牌调用？
如果我在后端 Rails 应用程序中生成，那么是否存在任何安全风险？

API调用参考文档完成OIDC的PKCE流程： https://developer.okta.com/docs/reference/api/oidc/#token

【问题讨论】：

标签： ruby-on-rails reactjs openid-connect

【解决方案1】：

应该始终在发出初始身份验证请求的地方生成 PKCE。因此，如果它是从您的 SPA 浏览器应用程序完成的，那么它还应该生成 code_verifier 和 code_challenge。

【讨论】：

点击什么？在哪里？是您的 SPA 应用程序还是 Rails 应用程序启动了与您的身份提供者的流程？
oidc PKCE 流程 wrt 用户的场景：- 用户单击登录按钮（oidc 流程启动），该按钮将浏览器 url 替换为授权端点以获取基于 oidc 配置设置的 code网址。 -- 在此我应该从 code_verifier 生成 code_challenge（在浏览器中安全地存储 code_verifier 以便我可以下次调用 /token 端点以获取 access_token）。 -
抱歉，添加评论按钮被无意按下。我已经响应应用程序从服务器（我的 rails 应用程序）获取各种 sso 提供程序的 oidc 配置，并且反应应用程序呈现具有相关配置的登录按钮（oidc，saml 2.0）。
我猜PKCS应该在浏览器中处理。

【解决方案2】：

PKCE 的目标是确保发起授权请求的客户端是最终将授权码交换为访问令牌的客户端。因此，代码验证器和质询应该由将这些请求发送到授权服务器（授权请求和令牌请求）的客户端创建。在你的情况下，它似乎是 SPA。

至于存储验证者的位置，可以安全地保存在会话存储中。另一种方法是将其存储在内存中（例如，在 React 应用程序的状态中）并在弹出窗口或 iframe 中执行身份验证流程，这样您的应用程序就不必重新加载。（OIDC 的前端库可以在弹出窗口或 iframe 中执行授权，例如，您可以查看 oauth-assistant）。

【讨论】：