如何在React+Vite前端中使用google-auth-library获取认证令牌？

核心问题 #

google-auth-library 原本为Node.js环境开发，依赖CommonJS模块系统（即require语法），但Vite在浏览器环境默认使用ES模块（ESM），直接引用会触发模块系统不兼容的错误。

可行解决方案 #

方案1：适配ES模块导入方式 #

无需依赖Browserify，直接使用库的浏览器兼容分支，通过ESM语法导入：

1. 安装依赖

npm install google-auth-library

2. 在React组件中替换CommonJS的require为ESM导入：

import { OAuth2Client } from 'google-auth-library/build/src/auth/oauth2client';

// 初始化OAuth2客户端
const authClient = new OAuth2Client({
  clientId: '你的Google OAuth客户端ID',
  redirectUri: '你的前端回调地址',
});

// 获取认证令牌示例
async function fetchAuthToken() {
  try {
    // 生成授权URL
    const authUrl = authClient.generateAuthUrl({
      access_type: 'offline',
      scope: ['openid', 'email', 'profile'],
    });
    // 引导用户跳转至授权页，授权完成后获取code
    const authCode = '用户授权后返回的code';
    const { tokens } = await authClient.getToken(authCode);
    authClient.setCredentials(tokens);
    return tokens.access_token;
  } catch (err) {
    console.error('令牌获取失败:', err);
  }
}

方案2：改用Google官方浏览器端认证库 #

google-auth-library 并非为浏览器场景优化，推荐使用Google专门为前端设计的Google Identity Services (GIS)：

1. 在项目index.html中引入GIS脚本：

<script src="https://accounts.google.com/gsi/client" async defer></script>

2. 在React组件中实现认证逻辑：

import { useEffect } from 'react';

function GoogleAuthComponent() {
  useEffect(() => {
    const initAuth = () => {
      if (!window.google) return;
      // 初始化令牌客户端
      window.google.accounts.oauth2.initTokenClient({
        client_id: '你的Google OAuth客户端ID',
        scope: 'openid email profile',
        callback: (response) => {
          if (response.error) throw response;
          // 拿到令牌后传给后端做身份验证
          console.log('认证令牌:', response.access_token);
        },
      });
    };
    initAuth();
  }, []);

  const handleLogin = () => {
    // 触发授权流程
    window.google.accounts.oauth2.getToken({ prompt: '' });
  };

  return <button onClick={handleLogin}>Google登录</button>;
}

export default GoogleAuthComponent;

关于Browserify失效的原因 #

Vite本身具备完整的模块打包能力，额外使用Browserify会与Vite的模块处理逻辑冲突；同时google-auth-library内部依赖大量Node.js专属API（如fs、http），即使打包也无法在浏览器环境运行，因此不建议采用这种方式。

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