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

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

本文标题为:如何处理来自仅限单页应用程序浏览器的WebApp的重定向响应

基础教程推荐