跨域OAuth ......如何获得响应？

Question

我正在创建一个Chrome扩展程序,它将与特定的热门网站进行交互.

它将html注入网站,增加了新功能.这些功能的一部分取决于用户的登录,为了获取登录的用户信息,我们需要使用此网站的OAuth身份验证API对扩展进行身份验证.

例如,让我们说流行的网站(显然我们不拥有)是www.github.com.

当用户在www.github.com上时,我们的扩展会在网站上注入一个"与GitHub连接"的按钮.

单击该按钮时,弹出窗口将打开Githubs OAuth API,并询问用户:'您是否要让应用程序XYZ访问您的GitHub帐户？是/否'.

一旦他们点击是,我们的扩展程序将通过身份验证,现在可以使用GitHub API访问用户名等信息,并将其直接注入github.com网站.

所有这些都是我们希望它工作的方式,但问题是我们在当前窗口(www.github.com)和我们自己的服务器(www.server.com)的弹出窗口之间进行通信时遇到很多困难.

在弹出窗口中发生的Oauth成功回调,返回令牌,我们无法将其传回主页面,因为'协议,域和端口'不匹配.

从弹出式oauth成功窗口中捕获该令牌的最佳方法是什么,以便我们可以在我们的扩展中使用此令牌,该扩展位于另一个域中？

Answer 1

如下所示:在auth流程的最后阶段,您可以重定向到server.com.由于您拥有,server.com您可以在最后通过注入脚本将数据传递到扩展window.opener.postMessage

例如,在最终呈现的页面中server.com:

window.opener.postMessage({"userhash": "abc1234567890"}, '*');

然后在扩展中的窗口上注册一个事件监听器

window.addEventListener('message', function(e) {
  console.log(e.data);
});

这应该适用于chrome和firefox.