React项目使用google-auth-library获取Cloud Run短期ID令牌报错求助

问题根源 #

google-auth-library主要为Node.js环境设计，依赖多个Node.js核心模块（如util、buffer等）。而Webpack 5不再默认提供这些模块的polyfill，因此在React（浏览器环境）中使用时会抛出此类错误。

推荐解决方案：直接调用GCP令牌端点（无需google-auth-library） #

既然你已经能手动调用GCP端点获取令牌，最简洁的方式是在React中直接用fetch或axios封装该请求，完全避开Node.js模块依赖问题。

示例代码（用fetch实现）：

async function getGcpShortLivedToken(keycloakJwt) {
  const tokenEndpoint = 'https://oauth2.googleapis.com/token';
  const params = new URLSearchParams({
    grant_type: 'urn:ietf:params:oauth:grant-type:jwt-bearer',
    assertion: keycloakJwt,
    // 根据你的GCP配置添加必要的scope或其他参数
    scope: 'openid https://www.googleapis.com/auth/cloud-platform'
  });

  try {
    const response = await fetch(tokenEndpoint, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
      },
      body: params
    });

    if (!response.ok) {
      throw new Error(`请求失败: ${response.statusText}`);
    }

    const data = await response.json();
    return data.id_token; // 返回GCP短期ID令牌
  } catch (error) {
    console.error('获取GCP令牌失败:', error);
    throw error;
  }
}

// 使用示例：Keycloak认证成功后调用
// const keycloakToken = keycloakInstance.token;
// const gcpToken = await getGcpShortLivedToken(keycloakToken);

备选方案：配置Webpack Polyfill（若坚持用google-auth-library） #

如果必须使用google-auth-library，可以通过craco替代react-app-rewrite来配置Webpack，因为后者在React 18环境下兼容性较差。

步骤1：安装依赖 #

npm install @craco/craco util buffer process stream-browserify

步骤2：创建craco配置文件 #

在项目根目录新建craco.config.js，添加以下配置：

const webpack = require('webpack');

module.exports = {
  webpack: {
    configure: (webpackConfig) => {
      // 配置缺失模块的fallback
      webpackConfig.resolve.fallback = {
        ...webpackConfig.resolve.fallback,
        util: require.resolve('util/'),
        buffer: require.resolve('buffer/'),
        process: require.resolve('process/browser'),
        stream: require.resolve('stream-browserify'),
        // 根据后续报错，添加其他需要polyfill的Node.js模块
      };

      // 全局注入Buffer和process
      webpackConfig.plugins.push(
        new webpack.ProvidePlugin({
          Buffer: ['buffer', 'Buffer'],
          process: 'process/browser',
        })
      );

      return webpackConfig;
    },
  },
};

步骤3：修改package.json的脚本 #

将原有的react-scripts命令替换为craco：

{
  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test"
  }
}

步骤4：重启应用 #

运行npm start，Webpack会自动加载polyfill，解决报错问题。

内容的提问来源于stack exchange，提问作者László Stahorszki