HubSpot OAuth未登录用户完成流程后无法接收令牌求助

我正在将HubSpot OAuth集成到应用中，遇到一个特定场景的问题：当用户已登录HubSpot时，OAuth流程运行正常，能正常接收tokens；但如果用户未登录HubSpot，在OAuth流程中完成登录后，客户端无法按预期收到tokens。

相关代码如下：

const tokenResponse = await axios.post('https://api.hubapi.com/oauth/v1/token', params.toString(), {
  headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
});

const tokens = { ...tokenResponse.data, code };
console.log('Received tokens:', tokens);

return response.status(200).send(
  `<html>
    <head><title>HubSpot Integration</title></head>
    <body>
      <h2>HubSpot App Installed Successfully!</h2>
      <p>You can close this window now.</p>
      <button onclick="window.close()">Close</button>
      <script>
        console.log(window.opener);
        if (window.opener) {
          window.opener.postMessage(${JSON.stringify(tokens)}, "http://localhost:3000/integrations");
        }
        console.log(window.location);
      </script>
    </body>
  </html>`
);

问题仅出现在用户需先登录HubSpot的场景：流程会将用户重定向至HubSpot的新窗口认证，登录后应用客户端无法接收tokens；用户已登录时一切正常。

已完成的排查：

• 确认换取tokens的请求已发出
• 确认该请求在用户已认证时可正常工作
• 核对HubSpot OAuth文档，确认redirect URL和应用scopes设置正确
• 服务器可接收tokens，但客户端与服务器间通信异常

问题根源与解决方案 #

核心问题出在**window.opener的可用性**上：当用户未登录HubSpot时，HubSpot会在新窗口打开登录页面，登录完成后重定向到你的redirect URL，此时原窗口的window.opener可能因浏览器跨域安全策略被阻断，导致postMessage无法发送成功。

方案1：改用本地存储+消息通知

放弃依赖window.opener传递完整tokens，改为存储到本地后通知原窗口读取：
服务器返回的HTML调整为：

<script>
  // 将tokens存入本地存储
  localStorage.setItem('hubspot_oauth_tokens', JSON.stringify(${JSON.stringify(tokens)}));
  // 通知原窗口
  if (window.opener) {
    window.opener.postMessage('hubspot_token_ready', "http://localhost:3000/integrations");
  }
  window.close();
</script>

原窗口添加监听逻辑：

window.addEventListener('message', (event) => {
  if (event.origin === "http://localhost:3000" && event.data === 'hubspot_token_ready') {
    const tokens = JSON.parse(localStorage.getItem('hubspot_oauth_tokens'));
    // 处理tokens逻辑
    localStorage.removeItem('hubspot_oauth_tokens'); // 清理存储
  }
});

方案2：使用Broadcast Channel API（现代浏览器推荐）

利用浏览器的Broadcast Channel实现跨窗口通信，不受opener限制：
服务器返回的HTML调整为：

<script>
  const channel = new BroadcastChannel('hubspot_oauth_channel');
  channel.postMessage(${JSON.stringify(tokens)});
  channel.close();
  window.close();
</script>

原窗口添加监听逻辑：

const channel = new BroadcastChannel('hubspot_oauth_channel');
channel.addEventListener('message', (event) => {
  const tokens = event.data;
  // 处理tokens逻辑
  channel.close();
});

方案3：检查浏览器安全策略配置

确保你的redirect URL与原窗口域名完全一致，避免跨域限制。部分浏览器会在第三方窗口多次跳转后自动阻断window.opener的访问权限，这种场景下只能放弃opener依赖，改用前两种方案。

内容的提问来源于stack exchange，提问作者Karan Jaiswal