将消息发送到生成的窗口 - 等待身份验证

Question

我的应用程序使用假网址只是为了我们的理解www.myapp.com需要在假网址www.myredirect.com.

生成一个弹出窗口

一旦到达 www.myredirect.com，页面会自动重定向到另一个 url，我们将其称为 www.myfinalurl.com。 Www.myredirect.com 服务确保将页面重定向到 www.myfinalurl.com 添加一些查询字符串，例如 www.myfinalurl.com?myparam=thisvalue.

我是 www.myfinalurl.com 和 www.myapp.com 的所有者，因此我可以在这两个网站中编写 javascript 代码。

来自 www.myapp.com 我需要捕获 URL 中包含的 www.myfinalurl.com 的查询字符串，但是由于跨源政策，我无法直接执行此操作，因此我必须这样做它使用postmessages。

但是，一旦打开 www.myredirect.com 的窗口，可能会要求用户登录，这个过程需要不固定的秒数，因此我必须等待重定向发生才能继续。此外，www.myapp.com是在会话中执行的（www.myapp.com/s/mysession123），这意味着它的url不固定。

流程通常是：

• myapp.com 向位于 myfinalurl.com 的固定 url 发送一条帖子消息
• myapp.com 开始监听回帖消息
• myfinalurl.com 记录收到消息的来源
• myfinalurl.com 发回一条包含其 url 的帖子消息
• myapp.com 收到来自 myfinalurl 的 postmessage 并停止 聆听

但是这里的问题是，虽然流程通常可以正常工作，但在我的情况下，步骤 1 必须在正确的时间发送，但是它会丢失，因为当重定向仍然时，消息将被发送到不存在的 Web 服务必须发生。

我在这里询问是否有可能的解决方法，以及您认为最好的解决方法是什么。

我想也许我可以每隔 x 秒将初始的 postmessage 从 myapp.com 发送到 myfinalurl.com ，直到我收到回复。这被认为是一个不错的做法吗？

所有可能的内置侦听器似乎都被跨源策略阻止。

当然，我尝试询问不同的人工智能，但还没有找到答案。

这是我迄今为止最好的尝试，在发送消息之前等待 5 秒，这意味着等待重定向发生，但是当要求登录时它不起作用。

myapp.com

const authPopup=window.open(url=passUrl, '_blank', 'width=640,height=480,menubar=no,toolbar=no');
const delay = ms => new Promise(res => setTimeout(res, ms)); 
const postMessageFunction = async () => { 
   await delay(5000); 
   popup.postMessage('origin','www.myfinalurl.com');
   window.addEventListener( 'messageBack', (event) => {
      const thisUrl = event.data;
      Shiny.setInputValue('UrlWithParams',thisUrl,{priority: 'event'});
      authPopup.close();
   }, false );
}; res=postMessageFunction();

www.myfinalurl.com

const mylocation = window.location.href;
window.addEventListener('origin', (event) => {
   event.source.postMessage( mylocation, event.origin, ); 
});

Answer 1

您可以

postMessage

到 myfinalUrl，这样 myapp.com 就会收到关于 myfinalUrl 已成功加载的通知。之后您可以将消息从 myapp.com 发送到 myfinalUrl。

这样做的问题是，您可能会多次打开同一页面，因此，如果您有 n 个选项卡，其中显示 myapp.com 和弹出窗口，并且您打开一个新选项卡并开始打开弹出窗口，那么您将需要确保您发送消息的方式使所有选项卡和弹出窗口都知道消息是否适用于它们。您可以使用变量或其他东西来达到此目的。