在新窗口收听活动

时间:2013-10-12 19:12:52

标签: javascript jquery redirect

我的应用程序使用oauth允许用户登录Salesforce,登录后,他们可以访问该应用程序。目前发生的是:

  • 用户点击“登录”链接,然后重定向到Salesforce
  • 用户登录Salesforce,并重定向到我指定的URL
  • 我的服务器处理请求并将其重定向到主页

我想做的是:

  • 用户点击“登录”链接,出现一个带有Salesforce登录页面的新窗口(window.open
  • 用户登录,并重定向到我指定的网址
  • 服务器重定向到主页后,主页会在窗口中触发successlogged_in事件,原始页面会侦听并解释

这是我到目前为止所做的(假设有<button id="login">Log in</button>

$('button#login').on('click', function() {
    var popup = window.open('/auth/salesforce', 'login', '...');
    popup.addEventListener('success', function() {
        popup.close();
        alert('Logged in');
    });
});

在主页中,我添加到用户成功登录时显示的部分:

var event = window.createEvent('loginSuccess');
event.initEvent('success', true, true); 
window.dispatchEvent(event); 

但是,success事件永远不会被触发。如何在主页中触发success事件,以提醒用户成功登录的原始页面?

修改:我注意到window.postMessage方法中引用了window方法。这是我应该使用的吗?或者我应该使用另一种方法来捕获新创建的{{1}}上的成功登录事件?

2 个答案:

答案 0 :(得分:0)

我最近刚在我们的应用程序中添加了相同的OAuth。不要尝试使用新窗口来授权用户就像所有社交网络只是让用户所在的页面进入授权屏幕然后重定向回来...这是唯一的其他方式(和我不确定salesforce是否有这个)是一个javascript auth进程。

答案 1 :(得分:0)

通过我的研究,我发现实现这一目标的最佳方法,至少在我不需要支持IE浏览器时,是查看window.opener值,如果它存在,运行一个函数在window.opener中定义。例如,

if (window.opener) {
    window.opener.userIsLoggedIn();
}
window.close();

userIsLoggedIn()将在打开新弹出窗口的父窗口中定义。

话虽如此,但有几点需要注意:在某些IE环境中,window.opener会因某些安全限制而失去其价值,从而使window.opener null永远不会触发{{1}父窗口上的方法。在这些情况下,我会在创建的窗口上侦听userIsLoggedIn()事件,如果close函数未触发,则刷新页面。第二个警告是,当且仅当它与同源策略匹配时,您才能调用userIsLoggedIn();有关此主题,请参阅the Wikipedia article。如果这出现问题,并且您无法围绕这些限制使用您的应用程序,请参阅this project了解可能的解决方法/黑客攻击。

我没有必要支持IE,所以我没有创建这个代码,但是如果window.opener.userIsLoggedIn()方法在IE中触发,请监听window.onclose事件并在发生这种情况后执行检查。