Oauth 授权码 PKCE : how to keep context in SPA beyond 302 redirect?

Question

我目前正在开发一个允许“授权代码授予”的 Oauth 授权服务器，我想使用 PKCE，因为我已经看到它可能在 Oauth2.1 中并且它似乎比经典的(有点)更安全'授权码'。

我还在开发一个 SPA 应用程序，使用 Vue.js 作为我的 Oauth 客户端。

我完成了 PKCE 的第一步:在客户端生成代码验证器和代码挑战，并发送包含 client_id、response_type=code、redirect_uri、code_challenge 和 code_challenge_request 的 GET/authorize 请求。

我的“GET/authorize”请求返回客户端浏览器将遵循的 302 重定向代码。在此步骤中，由于重定向，我失去了客户端的上下文，因此我失去了在“POST/token”请求期间流程结束时需要的 code_verifier。

所以我不明白如何将 PKCE 流程与 SPA 一起使用，我在互联网上一无所获，RFC 只是说“遵循重定向”和“使用代码验证程序”，我不知道怎么做。

我想我可以将这个 code_verifier 存储在一个不安全的 cookie 中，但我希望有更好的解决方案。

Answer 1

OIDC Client图书馆将通过一个类轮为您做这件事。 SPA 安全性有很多棘手的领域，图书馆将为您完成繁重的工作。

我的资源

• OIDC Client Code
• Blog Post

请注意，在我的 handleLoginResponse 方法中，您可以在登录重定向之前获取状态，并且根本不必编写任何 PKCE 代码。