基于ReactJS/NodeJS构建双因素认证登录场景的问题

你当前的代码逻辑存在核心问题：res.redirect仅向浏览器发送跳转指令，用户后续在JIRA页面的登录操作（输入账号密码、PIN码）完全脱离了你的NodeJS服务控制。res.on('finish')触发时，仅完成了跳转响应的发送，此时用户尚未开始登录流程，所以req.cookies只能拿到用户访问/ssologin时的本地Cookie，和JIRA登录后的Cookie毫无关联——这是浏览器同源策略的限制，JIRA的Cookie不会被发送到你的服务域名下。

以下是针对你的场景的可行解决方案：

方案一：使用React Webview组件监听登录流程 #

Webview组件可以内嵌第三方页面，并提供页面状态监听、Cookie获取的能力，是替代React Native Webview的Web端方案。

1. 安装依赖 #

npm install react-webview

2. 前端React组件实现 #

import React, { useRef } from 'react';
import WebView from 'react-webview';

const JiraLoginWebview = () => {
  const webviewRef = useRef(null);

  // 监听页面导航，判断登录状态
  const handleNavigation = async (event) => {
    // 假设JIRA登录成功后会跳转到仪表盘页面
    if (event.url.includes('jira.amazone.de/secure/Dashboard.jspa')) {
      // 注入JS代码获取当前页面Cookie
      const rawCookies = await webviewRef.current.injectJavaScript(`document.cookie`);
      // 将Cookie传给后端服务
      fetch('/api/save-jira-cookies', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ cookies: rawCookies })
      });
    }
  };

  return (
    <WebView
      ref={webviewRef}
      url="https://jira.amazone.de/"
      onNavigation={handleNavigation}
      allowUniversalAccessFromFileURLs={true}
    />
  );
};

export default JiraLoginWebview;

3. 后端接收Cookie接口 #

app.post('/api/save-jira-cookies', (req, res) => {
  const { cookies } = req.body;
  // 解析Cookie字符串
  const parsedCookies = parseCookieString(cookies);
  console.log('JIRA登录后Cookie:', parsedCookies);
  // 这里可以添加登录状态校验、Cookie存储等逻辑
  res.status(200).json({ success: true });
});

// 通用Cookie字符串解析函数
function parseCookieString(cookieString) {
  const cookieMap = {};
  if (!cookieString) return cookieMap;
  
  cookieString.split(';').forEach(item => {
    const [key, ...valueParts] = item.split('=');
    const trimmedKey = key?.trim();
    if (!trimmedKey) return;
    cookieMap[trimmedKey] = decodeURIComponent(valueParts.join('=').trim());
  });
  return cookieMap;
}

方案二：代理JIRA页面解决跨域（适配iframe场景） #

如果Webview组件无法满足需求，可以通过后端代理JIRA页面，将其转为同域资源，再用iframe嵌入，绕开同源策略限制获取Cookie。

1. 后端配置代理（使用http-proxy-middleware） #

npm install http-proxy-middleware

const { createProxyMiddleware } = require('http-proxy-middleware');

// 代理JIRA页面，移除iframe限制头
app.use('/jira-proxy', createProxyMiddleware({
  target: 'https://jira.amazone.de',
  changeOrigin: true,
  pathRewrite: { '^/jira-proxy': '' },
  onProxyRes: (proxyRes) => {
    // 移除禁止iframe加载的安全头
    delete proxyRes.headers['x-frame-options'];
    delete proxyRes.headers['content-security-policy'];
  }
}));

2. 前端iframe组件实现 #

import React, { useRef, useEffect } from 'react';

const JiraLoginIframe = () => {
  const iframeRef = useRef(null);
  let checkLoginInterval = null;

  useEffect(() => {
    // 定时检查页面是否登录成功
    checkLoginInterval = setInterval(() => {
      const iframe = iframeRef.current;
      if (!iframe?.contentWindow) return;

      const currentUrl = iframe.contentWindow.location.href;
      if (currentUrl.includes('jira.amazone.de/secure/Dashboard.jspa')) {
        // 获取同域下的Cookie
        const rawCookies = iframe.contentDocument.cookie;
        // 传给后端
        fetch('/api/save-jira-cookies', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ cookies: rawCookies })
        });
        clearInterval(checkLoginInterval);
      }
    }, 1000);

    return () => clearInterval(checkLoginInterval);
  }, []);

  return (
    <iframe
      ref={iframeRef}
      src="/jira-proxy"
      width="100%"
      height="800px"
      frameBorder="0"
    />
  );
};

export default JiraLoginIframe;

注意事项 #

1. JIRA可能有反爬/反嵌入检测，部分页面可能无法在iframe/Webview中正常加载，需要根据实际情况调整代理的请求头（比如模拟浏览器UA）。
2. 双因素认证页面的Cookie可能包含敏感信息，传输时建议使用HTTPS加密。

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