SPA 如何存储 PKCE code_verifier？答案

【问题标题】：How does a SPA stores PKCE code_verifier?SPA 如何存储 PKCE code_verifier？
【发布时间】：2022-02-08 02:29:50
【问题描述】：

考虑在 iframe 内使用 PKCE 的授权代码流程如下：

                                             +-------------------+
                                             |   Authz Server    |
   +--------+                                | +---------------+ |
   |        |--(A)- Authorization Request ---->|               | |
   |        |       + t(code_verifier), t_m  | | Authorization | |
   |        |                                | |    Endpoint   | |
   |        |<-(B)---- Authorization Code -----|               | |
   |        |                                | +---------------+ |
   | Client |                                |                   |
   |        |                                | +---------------+ |
   |        |--(C)-- Access Token Request ---->|               | |
   |        |          + code_verifier       | |    Token      | |
   |        |                                | |   Endpoint    | |
   |        |<-(D)------ Access Token ---------|               | |
   +--------+                                | +---------------+ |
                                             +-------------------+

当 (B) 回调发生时（考虑 302 重定向或 window.location.replace）页面重新加载和状态（原code_verifier）丢失了？

如何像原生移动应用程序一样实现此流程，而不将code_verifier 存储在后端并仅将其保存在内存中？

【问题讨论】：

标签： reactjs oauth single-page-application pkce

【解决方案1】：

如果您不想使用任何后端来保留代码验证器，您可以使用session storage。当您从授权服务器返回到您的 SPA 时，本地存储将为空白，但会话存储中的数据仍然可用，只要您停留在同一选项卡上。

【讨论】：