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

Question

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

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

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

当用户访问 www.github.com 时，我们的扩展会在网站上插入一个按钮，上面写着“与 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，因此您可以在末尾插入一个脚本，通过 window.opener.postMessage

将数据传递给扩展程序

例如，在server.com渲染的最终页面中:

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

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

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

这应该适用于 chrome 和 firefox。