跨域弹出窗口

Question

我的流程如下：用户在站点 1 上单击登录。从站点 2 打开一个弹出窗口，要求他使用 twitter 登录。然后他登录 - 使用 oAuth，因此页面发生了变化。成功登录后，弹出窗口应关闭，站点 1 上的代码应收到通知。

什么不起作用：

• WebIntents - 好吧，他们网站上的示例甚至都不起作用，所以我没有在本地尝试..
• easyXDM - 与 iframe 通信，而不是弹出窗口。
• porthole - 相同，使用 iframe。

一个可怕的解决方案是每隔几秒钟刷新一次 iframe，以检查用户是否已经登录。

有没有更好的方法来做到这一点？更好的图书馆？

Answer 1

如果您可以在用户登录后将弹出窗口引用到另一个页面，您可以使用：

主页：

localStorage.setItem('user_signed_in', false); // signed out by default
window.open("http://www.google.com/", "google_window", "menubar=no,resizable=no,scrollbars=no,status=no,width=400,height=300");

(function look_up() {
  if(localStorage.getItem('user_signed_in')) {
    go_on();
  } else {
    setTimeout(look_up, 500)
  }
}());

function go_on() {

...

}

参考页面：

localStorage.setItem('user_signed_in', true);
window.close();

请记住，推荐页面必须与您的主页位于同一域中。 而且，不要害怕other browsers 对本地存储的不良支持， 但如果你真的想支持老歌，我相信你can use cookies。

Answer 2

当用户单击站点 1 上的登录按钮时，站点 2 会打开一个弹出窗口。

我假设您通过 iframe 使用 window.open 来执行此操作，并且您已经知道如何绕过大多数浏览器的垃圾邮件拦截器等。

由于您将此弹出窗口作为新窗口打开，因此您现在可以控制该窗口，并且您实际上可以从新窗口发回内容。

这将是一些伪代码，但只是为了做一个例子！

假设用户使用如下所示的链接登录：

<a href="" onclick="window.popup=window.open('/twitter/login.php', 'Twitter login', 'width=450,height=500'"</a>

您的弹出窗口现在可以由window.popup 引用，并且在 window.popup 内部，原始页面现在称为 window.opener。

在打开弹出窗口的同一站点上，您有一个函数，如下所示：

document.handleLogin = function (returnedDataFromPopup) {
    console.log(returnedDataFromPopup);
}

用户使用 oAuth 登录后，您需要重定向到新页面，这在 oAuth 和 Twitter 指南中都有说明，您需要在弹出窗口中进行重定向，然后从该页面上的登录并将其发送回原始文档和handleLogin函数。

根据您使用的内容，在大多数 PHP 实现中，您会执行类似的操作来从登录中获取数据，这当然是在完成所有令牌和使用者密钥之后：

$userinfo = $oAuth->getAttributes(); //or something similar, depends

因此，当从 Twitter 重定向到新页面时，新页面将如下所示：

<? php
$userinfo = $oAuth->getAttributes();
?>

<script type="text/javascript">
   window.opener.document.handleLogin(<?php echo json_encode($userinfo) ?>);
   window.close();
</script>

这实际上将在打开弹出窗口的页面上运行 handleLogin() 函数，并将弹出窗口中的用户信息发送到原始页面上的该函数，然后关闭弹出窗口。

我已将这种技术与 oAuth、OpenID、Google 等一起使用，它工作得很好，根本不需要本地存储、cookie 或页面刷新，因为您可以控制弹出窗口，您可以发送回信息如果您愿意，您甚至可以通过执行以下操作即时更改打开文档中弹出窗口的地址：

window.popup.location.href = 'google.com';

这在某些情况下很方便，例如 OpenID 默认会关闭弹出窗口并将 document.opener 重定向到指定的页面，这不是您想要的，要克服这个问题，您必须在某些位置打开弹出窗口随机页面，最好是您控制的空页面，然后在弹出窗口打开后立即将弹出窗口的 href 重定向到 Twitter。

这一切看起来都很复杂，但它是可行的，如果你走到这一步，你现在有了数据，你所要做的就是通过包含 site2 的 iframe 以某种方式将它推送到 site1。由于没有 websocket 或某种事件驱动的服务器（如 node.js），推送实际上是不可能的，你可能不得不依赖长轮询或其他东西，有很多方法可以做到这一点，我相信你会弄明白的，但是如果你对在site1上运行的脚本有一些控制，并且你显然可以控制site2，那么你实际上可以通过一个带有一点javascript的iframe访问一些数据，但我从来没有真正这样做过所以我不知道具体是如何工作的。

这并不真正相关，但我真的不明白为什么有人使用来自其他网站的 iframe 登录您的网站会有用，这对我来说似乎很奇怪，但这取决于你出去。