SPA 如何存储 PKCE code_verifier？

Question

考虑使用 PKCE 在 iframe 中的授权代码流，如下所示：

                                             +-------------------+
                                             |   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 ---------|               | |
   +--------+                                | +---------------+ |
                                             +-------------------+

SPA 应用程序（例如 React）如何在发生 (B) 回调时存储 code_verifier（考虑 302 重定向或 window.location.replace) 页面重新加载并且状态（原始 code_verifier）丢失了？

如何实现与本机移动应用程序相同的流程，而不在后端存储 code_verifier 并仅将其保存在内存中？

Answer 1

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