Node.js Express中如何提取回调URL哈希段的id_token和access_token

问题根因 #

URL 中 # 后的内容属于哈希片段，HTTP 规范规定浏览器发送请求时不会将这部分内容传递到服务端，所以 Express 服务端默认不可能直接从请求中读取到 hash 内的 id_token 和 access_token。

解决方案 #

方案一：前端解析哈希后转发给后端（适配OIDC隐式流的常用方案） #

你可以先让回调接口返回一段前端脚本，由浏览器解析哈希参数后再转发给后端：

1. 调整原callback接口逻辑

router.get('/callback', (req, res) => {
  // 返回前端解析脚本，无需做其他处理
  res.send(`
  <script>
    // 去除哈希开头的#号，用URLSearchParams解析参数
    const hashParams = new URLSearchParams(window.location.hash.slice(1));
    const idToken = hashParams.get('id_token');
    const accessToken = hashParams.get('access_token');
    
    // 方式A：参数拼到查询参数重定向到后端接收接口
    window.location.href = \`/callback/handle?\` + new URLSearchParams({id_token: idToken, access_token: accessToken});

    // 若担心参数泄露到访问日志，可改用方式B：POST请求传参到后端
    // fetch('/callback/handle', {
    //   method: 'POST',
    //   headers: {'Content-Type': 'application/json'},
    //   body: JSON.stringify({id_token: idToken, access_token: accessToken})
    // }).then(res => res.text()).then(data => document.write(data));
  </script>
  `);
});

2. 新增参数接收接口
   如果用上述方式A：

router.get('/callback/handle', (req, res) => {
  const { id_token, access_token } = req.query;
  // 此处已拿到两个token，可做后续校验、存储等逻辑
  console.log('id_token:', id_token);
  console.log('access_token:', access_token);
  res.send('回调处理完成');
});

如果用上述方式B：

// 提前配置express解析json请求体：app.use(express.json())
router.post('/callback/handle', (req, res) => {
  const { id_token, access_token } = req.body;
  // 此处已拿到两个token
  console.log('id_token:', id_token);
  console.log('access_token:', access_token);
  res.send('回调处理完成');
});

方案二：修改授权平台的响应模式 #

如果对接的授权平台支持配置响应模式，可将默认的fragment模式改为query或form_post模式，授权平台会直接将token放在GET查询参数或POST请求体中返回给你的服务端，不需要额外做前端转发处理，直接在对应接口读取req.query或req.body即可。

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