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

How to handle redirect response from a Single Page Application browser only webapp(如何处理来自仅限单页应用程序浏览器的WebApp的重定向响应)

问题描述

我有单页应用程序，只有浏览器WebApp(Java脚本，没有服务器端)。

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

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

身份验证后，身份验证服务以重定向响应，可能重定向到另一个页面(Page2)。

Page2应执行什么操作才能继续播放节目？

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

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

谢谢，

Avner

---

编辑

<<3-0]>， 我不使用特定的Web平台，只使用纯Java脚本。

@charlietfl 我找到了一个通用的示例here，它可以在两个独立的窗口之间执行POST Message，并且运行正常。

我正在根据里卡多的评论对其进行自定义，即

• 弹出第二个窗口

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

• 在弹出窗口中轮询URL

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

在我的例子中，我将重定向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。

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

这篇关于如何处理来自仅限单页应用程序浏览器的WebApp的重定向响应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！