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

fykwrbwg  于 2023-06-22  发布在  React
关注(0)|答案(1)|浏览(101)

我试图在MERN SPA中实现社交登录功能,以便用户可以登录到我的网站使用他们的谷歌/Facebook/Twitter/等。这显然是一个非常常见的场景,有大量的帖子和示例说明如何使用各种身份验证流程(即授权代码流、具有PKCE的授权代码流等)
然而,对于我试图实现的流(如下所述),我无法理解如何处理从身份提供者返回的重定向,而不会导致用户代理刷新和丢失状态。
例如,下面是我尝试实现的登录Google的流程:
1.用户点击“登录Google”按钮,将用户代理指向Google的授权端点。

  1. Google验证用户并将他们重定向回我的重定向URI与授权代码。
    1.用户代理使API调用我的网站后端提供授权代码。
    1.我站点的后端将授权代码发送到Google的令牌端点(沿着我应用的client_idclient_secret),取回ID令牌,创建合适的JWT,并将该JWT返回给用户代理。
    1.用户代理存储JWT,并在所有后续调用中将其作为承载令牌发送回服务器。
    我遇到的问题是第二步。由于这一步会导致浏览器重新加载我的SPA,React组件中的状态会被清除。我可以使用localStorage部分解决这个问题,但这增加了复杂性。
    有没有可能实现这个流程,而浏览器不必重新加载我的应用程序并清除组件状态?或者,我是否应该使用其他方法来绕过这个明显的陷阱?
    (我是React/SPA和OIDC的新手,所以请原谅任何明显的误解或疏忽。
2hh7jdfx

2hh7jdfx1#

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

  • 初始页面加载
  • 收到OIDC回复
  • 用户重新加载页面,例如通过cmd+R或F5
  • 用户在应用程序中打开新的浏览器选项卡
  • 收到注销响应

通常的技术是SPA在发出OIDC重定向之前存储状态,包括其当前位置,例如/products/2。然后,在每次加载页面时,检查当前URL是否代表OIDC响应(例如包含代码和状态查询参数)。如果是这样,请从流程中执行步骤3,然后从应用的存储状态恢复。
如果有帮助的话,这里有一些我的React代码,通过将当前位置存储在会话存储中来完成这种事情。

相关问题