借助OpenID与Passport.js实现React到Express的认证令牌委托

为什么passport的OpenID重定向策略不适用？ #

passport的OpenID策略默认是为服务端渲染(SSR)应用设计的认证流，当认证失败时会自动触发重定向到OpenID提供商的登录页面——这对SPA的API调用完全不友好，因为前端需要的是JSON格式的错误响应，而不是跳转。

方案1：改用JWT令牌认证（推荐） #

这是前后端分离架构下的标准做法，避免Cookie跨域问题，也适配API无状态需求：

1. React端处理：

   • 完成OpenID认证后，把获取到的Access Token（或ID Token）存在内存（比localStorage更安全）里
   • 调用Express API时，在请求头中携带令牌：

     // React API请求示例
     fetch('/api/protected', {
       method: 'GET',
       headers: {
         'Authorization': `Bearer ${accessToken}`
       }
     })
     

2. Express端配置：

   • 使用passport-jwt策略代替OpenID重定向策略，无需会话：

     const passport = require('passport');
     const JwtStrategy = require('passport-jwt').Strategy;
     const ExtractJwt = require('passport-jwt').ExtractJwt;
     
     // 配置JWT策略：从请求头提取令牌，用OpenID提供商的公钥验证签名
     const opts = {
       jwtFromRequest: ExtractJwt.fromAuthHeaderAsBearerToken(),
       secretOrKey: 'OpenID提供商的公钥', // 也可以用jwks-rsa自动获取公钥
       issuer: '你的OpenID提供商域名',
       audience: '你的API客户端ID'
     };
     
     passport.use(new JwtStrategy(opts, (jwtPayload, done) => {
       // 可根据jwtPayload里的用户信息查询数据库，或直接放行
       return done(null, jwtPayload);
     }));
     
     // 受保护路由配置：禁用会话，认证失败返回401
     app.get('/api/protected', passport.authenticate('jwt', { session: false }), (req, res) => {
       res.json({ data: '受保护内容', user: req.user });
     });
     

方案2：修复Cookie跨域共享（若坚持用Cookie） #

如果必须用Cookie传递认证信息，需要解决跨域和passport重定向问题：

1. 跨域Cookie配置：

   • Express端配置CORS，允许前端 origin 并开启凭证支持：

     const cors = require('cors');
     app.use(cors({
       origin: 'https://你的React域名', // 不能用*，必须指定具体域名
       credentials: true
     }));
     

   • OpenID认证时，确保Cookie的属性符合跨域要求：
     • SameSite: 跨域场景设为None（需配合Secure属性，必须HTTPS环境）；同主域设为Lax
     • Secure: 生产环境必须开启，确保Cookie仅通过HTTPS传输
     • HttpOnly: 可选，开启后前端无法读取Cookie，安全性更高

2. Express端自定义认证中间件：
   放弃passport的OpenID重定向策略，自己写中间件验证Cookie中的令牌：

   async function verifyOpenIDToken(req, res, next) {
     const authCookie = req.cookies['你的OpenID令牌Cookie名'];
     if (!authCookie) {
       return res.status(401).json({ error: '未授权' });
     }
   
     // 调用OpenID提供商的Introspect端点验证令牌有效性
     const isValid = await fetch('https://openid提供商域名/introspect', {
       method: 'POST',
       headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
       body: `token=${authCookie}&client_id=你的客户端ID&client_secret=你的客户端密钥`
     }).then(res => res.json()).then(data => data.active);
   
     if (!isValid) {
       return res.status(401).json({ error: '令牌无效' });
     }
   
     // 验证通过，挂载用户信息到req
     req.user = await fetch('https://openid提供商域名/userinfo', {
       headers: { 'Authorization': `Bearer ${authCookie}` }
     }).then(res => res.json());
     next();
   }
   
   // 受保护路由使用自定义中间件
   app.get('/api/protected', verifyOpenIDToken, (req, res) => {
     res.json({ data: '受保护内容', user: req.user });
   });
   

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