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

Question

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

它将 html 注入(inject)到网站中，从而添加新功能。这些功能部分取决于登录的用户，为了获取登录的用户信息，我们需要使用该网站的 OAuth 身份验证 API 来对扩展程序进行身份验证。

例如，假设流行的网站(显然不是我们拥有的)是 www.github.com。

当用户访问 www.github.com 时，我们的扩展程序会在网站上注入(inject)一个显示“连接 GitHub”的按钮。

当单击该按钮时，将打开一个指向 Githubs OAuth API 的弹出窗口，它会询问用户:“您想授予应用程序 XYZ 访问您 GitHub 帐户的权限吗？”是/否'。

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

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

Oauth 成功回调发生在弹出窗口中，返回 token ，我们无法将其传回主页，因为“协议(protocol)、域和端口”不匹配。

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

Answer 1

以下怎么样:在身份验证流程的最后阶段，您可以重定向到 server.com。由于您拥有 server.com，因此您可以在末尾注入(inject)一个脚本，通过 window.opener.postMessage

将数据传递到扩展程序

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

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

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

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

这应该适用于 Chrome 和 Firefox。