如何处理从水疗中心中的openID连接流中的身份提供者的重定向，而不会丢失状态
我正在尝试在MERN水疗中实现社交登录功能，以便用户可以使用其Google/Facebook/Twitter/等登录我的网站。登录。显然，这是一个非常普遍的情况，并且有很多帖子和示例解决了如何使用各种身份验证流（即授权代码流，使用PKCE的授权代码流等）来完成此操作。
但是，对于我正在尝试的流程实施（如下所述），我无法围绕如何从身份提供商那里重定向转移而不导致用户代理刷新并失去状态。
例如，这是我要使用Google登录的流程：
用户单击“使用Google登录”按钮，该按钮将用户代理指导到Google的授权端点。
Google通过授权代码对用户进行身份验证，并将其重定向到我的重定向URI。
用户代理会拨打API调用，以提供我网站提供授权代码。
我网站的后端将授权代码发送到Google的令牌端点（以及我的应用程序的
client_id和client_secret），恢复ID令牌，创建合适的jwt，并返回该返回的那些jwt返回用户代理。用户代理存储JWT，并将其作为后续电话中的携带者令牌发送给服务器。
我的问题是在第2步。由于此步骤使浏览器重新加载我的水疗中心，因此已清除了React组件中的状态。我可以使用localstorage部分解决此问题，但这增加了复杂性。
是否可以实现此流程，而无需浏览器重新加载我的应用程序和清除组件状态？或者，我还应该使用其他一些方法来解决这个明显的陷阱？
（我是React/Spas和OIDC的新手，所以请原谅任何明显的误解或监督。）
I'm trying to implement social login functionality in a MERN SPA so that users can login to my site using their Google/Facebook/Twitter/etc. login. This is clearly a very common scenario, and there are tons of posts and examples that address how to accomplish this using various authentication flows (i.e. authorization code flow, authorization code flow with PKCE, etc.)
However, for the flow I am trying to implement (described below), I cannot get my head around how to handle the redirect back from the identity provider without causing the user agent to refresh and lose state.
For example, here is the flow I am trying to implement for logging in with Google:
User clicks "Login with Google" button, which directs user agent to Google's authorization endpoint.
Google authenticates user and redirects them back to my redirect URI with an authorization code.
User agent makes API call to backend of my site providing the authorization code.
Backend of my site sends authorization code to Google's token endpoint (along with my app's
client_idandclient_secret), gets back ID token, creates suitable JWT, and returns that JWT back to user agent.User agent stores JWT and sends it as bearer token in all subsequent calls back to server.
The problem I have is at step 2. Since this step causes the browser to reload my SPA, the state in the React components gets cleared. I can partially get around this using localStorage, but that adds complexity.
Is it possible to implement this flow without the browser having to reload my app and clearing component state? Or, is there some other approach I should be using that gets around this apparent pitfall?
(I am new to React/SPAs and OIDC, so please excuse any glaring misconceptions or oversights.)
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
水疗中心将重新加载其index.html，因此在任何这些操作中重新启动应用程序，您无法阻止它：
注册响应的通常技术是在发出OIDC重定向之前的水疗中心存储状态，包括当前位置，例如
/products/2。然后，在每个页面加载中，检查当前URL是否表示OIDC响应（例如包含代码和状态查询参数）。如果是这样，则从流量中执行步骤3，然后从应用程序的存储状态恢复。如果有帮助，这里有一些我的反应代码通过将当前位置存储在会话存储中，可以做到这类类型的事情。
An SPA will reload its index.html and therefore restart the app after any of these actions, and you cannot prevent that:
The usual technique is for the SPA to store state before issuing the OIDC redirect, including its current location, eg
/products/2. Then, on every page load, check whether the current URL represents an OIDC response (eg contains code and state query parameters). If so then perform step 3 from your flow, then restore from the app's stored state.If it helps, here is some React code of mine that does this type of thing, by storing the current location in session storage.