跨域弹出窗口

Question

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

什么不起作用：

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

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

有更好的方法吗？更好的图书馆？

Answer 1

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

ma​​in page:

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() {

...

}

refer page:

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

请记住，refer page 必须与您的主页位于同一域中。
而且，不要担心其他浏览器对 localstorage 的支持不佳，
但如果你真的想支持老歌，我相信你可以使用cookie。

Answer 2

当用户单击 site1 上的登录按钮时，会从 site2 打开一个弹出窗口。

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

由于您将此弹出窗口作为新窗口打开，因此您现在可以控制那个窗口，你实际上可以从新窗口发回东西。

这将是一些伪代码，但只是为了举例！

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

<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。由于如果没有 websockets 或某种事件驱动服务器（例如 node.js），推送实际上是不可能的，因此您可能不得不依赖长轮询或其他方式，有很多方法可以做到这一点，我相信您'我会弄清楚的，但是如果您对 site1 上运行的脚本有一定的控制权，并且显然您可以控制 site2，那么您实际上可以使用一点 javascript 通过 iframe 访问一些数据，但我从未真正这样做过，所以我不知道具体是怎么回事作品。

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