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

Question

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

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

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

一旦通过身份验证，身份验证服务将以重定向响应，可能重定向到另一个页面(第 2 页)。

page2 应该怎么做才能继续程序的流程？

• 是否应该重定向回原始主页(这次使用访问 token )？

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

谢谢，

阿夫纳

---

编辑

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

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

我正在努力根据 Ricardo 的评论对其进行自定义，即

• 弹出第二个窗口

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

• 在弹出窗口中轮询该 URL

我找到了 this在主页 (index.html) 中创建弹出窗口、设置重定向和轮询以关闭弹出窗口的示例。

在我的例子中，我将重定向 URL 设置为一个新页面 (auth.html)，该页面执行带有访问 token 的 postMessage 返回到主页 (index.html)。

如果 auth.html 页面没有在浏览器中打开，我是否仍然期望在主页 index.html 中收到消息？

根据我阅读的关于 postMessage 使两个页面都起作用的内容，index.html、auth.html 应该在浏览器的 2 个单独的选项卡中打开。

Answer 1

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

这个策略被像vue-authenticate这样的库使用, react-oauth和 satellizer .

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

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