reactjs - 如何在不丢失状态的情况下处理来自 SPA 中 OpenID Connect 流中身份提供者的重定向

Question

我正在尝试在 MERN SPA 中实现社交登录功能，以便用户可以使用他们的 Google/Facebook/Twitter 等登录到我的网站。登录。这显然是一个非常常见的场景，并且有大量的帖子和示例说明如何使用各种身份验证流程(即授权代码流程、使用 PKCE 的授权代码流程等)来实现这一点

但是，对于我尝试实现的流程(如下所述)，我无法理解如何在不导致用户代理刷新和丢失状态的情况下处理从身份提供者返回的重定向。

例如，这是我尝试实现的用于使用 Google 登录的流程:

1. 用户点击“使用 Google 登录”按钮，这会将用户代理定向到 Google 的授权端点。

2. Google 对用户进行身份验证并使用授权代码将他们重定向回我的重定向 URI。

3. 用户代理通过 API 调用我网站的后端，提供授权代码。

4. 我网站的后端将授权代码发送到 Google 的 token 端点(连同我应用的 client_id 和 client_secret)，取回 ID token ，创建合适的 JWT，并将该 JWT 返回给用户代理。

5. 用户代理存储 JWT 并在所有后续调用中将其作为不记名 token 发送回服务器。

我遇到的问题是在第 2 步。由于此步骤导致浏览器重新加载我的 SPA，因此 React 组件中的状态被清除。我可以使用 localStorage 部分解决这个问题，但这会增加复杂性。

是否可以在浏览器不必重新加载我的应用程序和清除组件状态的情况下实现此流程？或者，我应该使用其他一些方法来绕过这个明显的陷阱吗？

(我是 React/SPA 和 OIDC 的新手，所以请原谅任何明显的误解或疏忽。)

Answer 1

SPA 将重新加载其 index.html 并因此在执行任何这些操作后重新启动应用程序，您无法阻止:

• 初始页面加载
• 收到 OIDC 回复
• 用户重新加载页面，例如通过 cmd+R 或 F5
• 用户在应用内打开一个新的浏览器标签页
• 收到注销响应

通常的技术是 SPA 在发出 OIDC 重定向之前存储状态，包括其当前位置，例如 /products/2。然后，在每次加载页面时，检查当前 URL 是否表示 OIDC 响应(例如包含代码和状态查询参数)。如果是，则执行流程中的第 3 步，然后从应用的存储状态恢复。

如果有帮助，这里有一些 React code of mine通过将当前位置存储在 session 存储中来执行此类操作。