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

Question

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

它将 html 注入站点以添加新功能。这些功能的一部分取决于登录的用户，为了获取登录用户信息，我们需要使用本网站的 OAuth 身份验证来验证扩展 API.

例如，假设热门网站（显然不属于我们）是 www.github.com。

当用户访问 www.github.com 时，我们的扩展会在网站上插入一个显示 'Connect with GitHub' 的按钮。

单击该按钮后，将打开 Githubs OAuth API 弹出窗口，并询问用户：'Do you want to give the app XYZ access to your GitHub account? Yes / No'.

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

这就是我们希望它的工作方式，但问题是我们在当前 window (www.github.com) 和弹出窗口 window 我们自己的服务器 (www.server.com).

弹出窗口中发生的 Oauth 成功回调，即 returns 令牌，我们无法将其传回主页，因为 'protocols, domains, and ports' 不匹配。

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

Answer 1

可能您无法收到回复，因为 Chrome 有一个 "Same origin policy"。 https://en.wikipedia.org/wiki/Same-origin_policy

通常您可以通过让 www.server.com 将 www.github.com 放入响应中的 Access-Control-Allow-Origin header 来解决这个问题。

Answer 2

以下情况如何：在身份验证流程的最后阶段，您可以重定向到 server.com。由于您拥有 server.com，因此您可以在末尾插入一个脚本，通过 window.opener.postMessage

将数据传递给扩展程序

例如server.com渲染的最终页面中：

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

然后在extensionwindow上注册一个事件监听器

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

这应该适用于 chrome 和 firefox。

Cross-Domain OAuth... how to get response?