如何处理来自单页应用程序浏览器的重定向响应

Avn*_*itz 5 javascript single-page-application

我有单页应用程序,仅浏览器 web 应用程序(javascript,无服务器端)。

用户与应用程序交互并设置一些变量。

在创建主index.html页面之后,当用户想要上传文件时,他需要使用oauth2(使用“令牌/隐式授权”)向外部服务进行身份验证。

一旦通过身份验证,身份验证服务就会通过重定向进行响应,可能会重定向到另一个页面(第 2 页)。

page2 应该做什么来继续程序的流程?

  • 它是否应该重定向回原始主页(这次带有访问令牌)?

  • 如果是这样,这不会重新加载主页并重置应用程序和设置的变量吗?

谢谢,

阿夫纳


编辑

Ricardo,我不使用特定的网络平台,只是使用普通的 javascript。

@charlietfl我在这里 找到了一个通用示例,它在两个单独的窗口之间执行 postMessage 并且工作正常。

我正在努力根据里卡多的评论定制它,即

  • 弹出第二个窗口

  • 在 SPA 上设置单独的 HTML 文件或“noop”路由作为重定向 URL(什么是 noop 路由?)

  • 在弹出窗口中轮询该 URL

我发现这个示例在主页(index.html)中创建弹出窗口,设置重定向并轮询以关闭弹出窗口。

在我的例子中,我将重定向 URL 设置为新页面 (auth.html),该页面使用访问令牌发送消息返回主页 (index.html)。

如果 auth.html 页面未在浏览器中打开,我是否还应该在主页 index.html 中收到消息?

根据我读到的 postMessage 要在两个页面上工作的内容,index.html、auth.html 应该在浏览器中的两个单独的选项卡中打开。

Ric*_*lde 6

您可以使用一个小弹出窗口,它将加载必要的 oauth2 端点,在 SPA 上设置单独的 HTML 文件或“noop”路由作为重定向 URL。然后,您可以在弹出窗口中轮询该 URL,以便知道何时关闭它(用户已完成 oauth2 流程)。

vue-authenticatereact-oauthsatellizer等库都使用此策略。

此外,根据您尝试进行身份验证的特定服务,您可以找到将自动处理 oauth2 流程的官方库和 SDK。

最后但并非最不重要的一点是,您还可以将应用程序的当前状态保存在浏览器存储中,重定向到 oauth2 端点,并作为重定向 URL 指向您的应用程序。当返回您的应用程序时,特定路线应该能够恢复保存的数据并恢复用户体验,并添加 oauth2 令牌。