如何使用弹出窗口向第三方服务进行身份验证?

f.a*_*ian 5 javascript authentication oauth popup

在尝试使用 Google、LinkedIn、Facebook 等进行身份验证时,我遇到了问题。身份验证需要在弹出窗口中完成(客户端请求它),但是在打开弹出窗口后,我失去了对它的控制,并且无法与主窗口通信授权已完成。

以下是详细发生的情况:

  1. 用户单击主窗口中的“使用 Google 登录”按钮。

  2. 主窗口打开一个弹出窗口,指向我正在托管的护照路线,使用var popup = window.open('http://example.com/login/google').

  3. 如果用户尚未批准我的网站访问其帐户,则弹出窗口的 URL 会自动更改为类似http://google.com/OAuth2/. 这个重定向是由我正在使用的护照组件完成的(koa-passport)。

  4. 用户批准登录,弹出窗口的 URL 将被重定向到http://example.com/login/google/callback其中包含授权令牌的 URL。这是我的护照回调路由在我的数据库中注册用户并创建授权令牌的地方。

问题是,此时用户打开了主窗口和弹出窗口,我无法通知主窗口弹出窗口已完成身份验证。弹出窗口需要自动关闭,主窗口需要将用户带到他们的私人主页。

我尝试在主窗口中创建一个全局函数,但在最终重定向后,弹出窗口无法访问其父级的全局窗口对象。我考虑过从主窗口发送一条消息到弹出窗口以在它们之间共享全局上下文,但这样做的问题是弹出窗口重定向到Google(或其他一些身份验证提供商),并且当它重定向回我的回调 URL 它忘记了这个上下文。

我发现的唯一方法是在主窗口中设置一个计时器并监视弹出窗口的 URL,但这看起来像是一个糟糕的 hack。弹出窗口是否有其他方式可以通知主窗口用户已登录?