Angular-Typescript：解决Google OAuth2弹窗跨域关闭及DOM读取问题

1. 核心思路：绕开同源策略限制 #

浏览器的同源策略会直接阻止跨域弹窗的DOM读取操作，所以要换两种思路实现需求：

• 通过URL变化判断授权节点：无需读取弹窗DOM，直接监控弹窗的location.href，当URL匹配配置的redirect_uri或包含授权结果参数（如code、error）时，触发后续逻辑。
• 用同源跳转页传递状态：把服务端错误（如401）通过URL参数传递到与父页面同源的redirect_uri页面，再通过跨窗口通信把结果传回父页面。

2. 具体实现步骤 #

步骤1：改造redirect_uri对应页面 #

确保该页面与父页面同源，添加脚本提取授权参数并向父窗口发送消息，随后自动关闭弹窗：

<!-- redirect_uri 对应的页面代码 -->
<script>
  // 从URL中解析授权结果参数
  const urlParams = new URLSearchParams(window.location.search);
  const authResult = {
    code: urlParams.get('code'),
    error: urlParams.get('error'),
    errorDesc: urlParams.get('error_description')
  };

  // 向父窗口发送结果，验证来源确保安全
  window.opener.postMessage(authResult, window.opener.origin);
  
  // 关闭当前弹窗
  window.close();
</script>

步骤2：重构oauth2SignIn函数 #

移除原有的跨域DOM读取逻辑，改为监听postMessage和弹窗状态：

function oauth2SignIn() {
  // 构造Google OAuth2授权URL
  const authUrl = 'https://accounts.google.com/o/oauth2/v2/auth?' + new URLSearchParams({
    client_id: '你的客户端ID',
    redirect_uri: '你的同源redirect_uri',
    response_type: 'code',
    scope: 'openid email profile'
  });

  // 打开授权弹窗
  const authWindow = window.open(authUrl, 'AuthWindow', 'width=600,height=600');

  // 监听父窗口收到的消息
  const messageHandler = (event) => {
    // 验证消息来源，防止恶意请求
    if (event.origin !== window.location.origin) return;

    if (event.data) {
      // 处理授权结果
      if (event.data.code) {
        console.log('授权成功，code:', event.data.code);
        // 此处可调用后端接口换取access_token
      } else if (event.data.error) {
        console.error('授权失败:', event.data.error, event.data.errorDesc);
        // 根据错误码处理401等场景（如Google返回的access_denied对应权限拒绝）
      }
      // 移除监听，避免内存泄漏
      window.removeEventListener('message', messageHandler);
    }
  };
  window.addEventListener('message', messageHandler);

  // 监控弹窗是否被用户手动关闭
  const checkInterval = setInterval(() => {
    if (authWindow.closed) {
      clearInterval(checkInterval);
      window.removeEventListener('message', messageHandler);
      console.log('用户手动关闭授权弹窗');
    }
  }, 500);
}

步骤3：处理服务端自定义错误场景 #

如果你的服务端会返回401等自定义错误，需在服务端跳转时将错误信息拼接为URL参数，比如跳转到redirect_uri?error=unauthorized&error_description=401+Access+Denied，这样redirect_uri页面就能通过postMessage把错误信息传递给父页面。

3. 关键注意事项 #

• redirect_uri必须同源：这是实现跨窗口安全通信的前提，彻底避免跨域DOM访问错误。
• 严格验证消息来源：在messageHandler中必须检查event.origin，确保消息来自可信的同源页面，防范安全风险。
• 利用Google OAuth2标准错误码：Google OAuth2会返回标准化错误码（如access_denied、invalid_client），可直接基于这些码判断错误类型，无需额外读取DOM。

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