如何仅从单页应用程序浏览器webapp处理重定向响应

问题描述 投票:1回答:2

我有单页应用程序,浏览器只有webapp(javascript,没有服务器端)。

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

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

经过身份验证后,身份验证服务会使用重定向进行响应,可能会响应另一个页面(第2页)。

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

  • 它应该重定向回原始主页面(这次是使用访问令牌)吗?
  • 如果是这样,这不会重新加载主页并重置应用程序和设置的变量吗?

谢谢,

阿夫纳


编辑

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

@charlietfl我找到了一个通用的例子here,它在2个单独的窗口之间进行postMessage,它运行正常。

根据里卡多的评论,我很难定制它,即

  • 弹出第二个窗口
  • 在SPA上设置单独的HTML文件或“noop”路由作为重定向URL(什么是noop路由?)
  • 在弹出窗口中轮询该URL

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

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

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

从我读取的postMessage到两个页面的工作,index.html,auth.html应该在浏览器的2个单独的选项卡中打开。

javascript single-page-application
2个回答
1
投票

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

这种策略被vue-authenticatereact-oauthsatellizer等图书馆使用。

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

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

© www.soinside.com 2019 - 2024. All rights reserved.