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 应该在浏览器中的两个单独的选项卡中打开。
您可以使用一个小弹出窗口,它将加载必要的 oauth2 端点,在 SPA 上设置单独的 HTML 文件或“noop”路由作为重定向 URL。然后,您可以在弹出窗口中轮询该 URL,以便知道何时关闭它(用户已完成 oauth2 流程)。
vue-authenticate、react-oauth和satellizer等库都使用此策略。
此外,根据您尝试进行身份验证的特定服务,您可以找到将自动处理 oauth2 流程的官方库和 SDK。
最后但并非最不重要的一点是,您还可以将应用程序的当前状态保存在浏览器存储中,重定向到 oauth2 端点,并作为重定向 URL 指向您的应用程序。当返回您的应用程序时,特定路线应该能够恢复保存的数据并恢复用户体验,并添加 oauth2 令牌。