我试图在MERN SPA中实现社交登录功能,以便用户可以登录到我的网站使用他们的谷歌/Facebook/Twitter/等。这显然是一个非常常见的场景,有大量的帖子和示例说明如何使用各种身份验证流程(即授权代码流、具有PKCE的授权代码流等)
然而,对于我试图实现的流(如下所述),我无法理解如何处理从身份提供者返回的重定向,而不会导致用户代理刷新和丢失状态。
例如,下面是我尝试实现的登录Google的流程:
1.用户点击“登录Google”按钮,将用户代理指向Google的授权端点。
- Google验证用户并将他们重定向回我的重定向URI与授权代码。
1.用户代理使API调用我的网站后端提供授权代码。
1.我站点的后端将授权代码发送到Google的令牌端点(沿着我应用的client_id
和client_secret
),取回ID令牌,创建合适的JWT,并将该JWT返回给用户代理。
1.用户代理存储JWT,并在所有后续调用中将其作为承载令牌发送回服务器。
我遇到的问题是第二步。由于这一步会导致浏览器重新加载我的SPA,React组件中的状态会被清除。我可以使用localStorage
部分解决这个问题,但这增加了复杂性。
有没有可能实现这个流程,而浏览器不必重新加载我的应用程序并清除组件状态?或者,我是否应该使用其他方法来绕过这个明显的陷阱?
(我是React/SPA和OIDC的新手,所以请原谅任何明显的误解或疏忽。
1条答案
按热度按时间2hh7jdfx1#
SPA将重新加载其index.html,因此在执行以下任何操作后重新启动应用程序,您无法阻止:
通常的技术是SPA在发出OIDC重定向之前存储状态,包括其当前位置,例如
/products/2
。然后,在每次加载页面时,检查当前URL是否代表OIDC响应(例如包含代码和状态查询参数)。如果是这样,请从流程中执行步骤3,然后从应用的存储状态恢复。如果有帮助的话,这里有一些我的React代码,通过将当前位置存储在会话存储中来完成这种事情。