如何处理来自仅限单页应用程序浏览器的WebApp的重定向响应 [英] How to handle redirect response from a Single Page Application browser only 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的重定向响应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
