Gmail OAuth2认证完成后如何在浏览器层捕获请求提取code参数

完全可以在浏览器层面拿到返回的code参数，不需要额外抓包或者服务端中转，核心逻辑是：Google完成授权后的302跳转属于浏览器顶层导航行为，最终会加载你预先配置的回调地址，code参数会直接附在回调地址的URL上，直接解析URL即可拿到。不要尝试用前端异步请求拦截器抓这个跳转——顶层导航不属于XHR/fetch范畴，拦截器无法捕获。

下面按两种常见的授权交互模式给出具体实现： #

模式1：当前页直接跳转授权 #

即用户点击授权按钮后，当前窗口直接跳转到Google授权页，授权完成后再跳回你的应用页面，这是最简单的实现场景：

• 你只需要在回调路由对应的页面加载时，直接解析当前URL的查询参数即可
• 参考实现代码：

// 回调页面加载时立即执行
const searchParams = new URLSearchParams(window.location.search);
const authCode = searchParams.get('code');
// 如果你配置的是fragment模式（参数跟在#后面），就用下面的逻辑解析
// const hashParams = new URLSearchParams(window.location.hash.slice(1));
// const authCode = hashParams.get('code');

if (authCode) {
  // 这里写你的后续逻辑：比如把code传给后端兑换access_token
  // 处理完成后清除URL上的code参数，避免用户刷新页面重复触发授权逻辑
  window.history.replaceState(null, '', window.location.pathname);
}

模式2：弹窗/新窗口授权（不刷新当前主页面） #

单页应用常用的交互模式：点击授权按钮弹出独立小窗口走Google授权流程，主页面不跳转，授权完成后自动关闭弹窗、主页面拿到code：

1. 提前把OAuth回调地址配置为你域名下的一个极简空白回调页
2. 回调页内解析URL拿到code后，通过postMessage把code传递给打开弹窗的父页面，之后自动关闭弹窗
3. 主页面提前监听消息事件，拿到code后走后续业务逻辑

回调页代码参考：

// 弹窗内的空白回调页执行代码
const searchParams = new URLSearchParams(window.location.search);
const authCode = searchParams.get('code');
if (authCode) {
  // 向父窗口传递code，注意targetOrigin必须配置为你自己的站点域名，不要写*避免安全风险
  window.opener.postMessage(
    {
      event: 'GOOGLE_AUTH_SUCCESS',
      code: authCode,
      state: searchParams.get('state') // 同时传回state参数做CSRF校验
    },
    window.location.origin
  );
  // 传递完成后关闭弹窗
  window.close();
}

主页面监听代码参考：

// 主页面在触发授权弹窗前就绑定好消息监听
window.addEventListener('message', (event) => {
  // 第一步先校验消息来源，非自有域名发来的消息直接忽略
  if (event.origin !== window.location.origin) return;
  if (event.data?.event === 'GOOGLE_AUTH_SUCCESS') {
    const { code, state } = event.data;
    // 先校验state和你发起授权时本地存储的随机state值是否一致，防止CSRF攻击
    // 校验通过后再把code传给后端兑换token
  }
});

安全注意事项

• 绝对不要在前端直接携带客户端密钥请求Google接口兑换access_token，客户端密钥泄露会导致严重安全风险，兑换token的逻辑必须放在自有服务端执行
• 必须校验返回的state参数和发起授权时生成的随机值是否匹配，避免CSRF攻击
• 使用postMessage传递参数时必须严格校验来源域名，不要使用通配符配置origin

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