如何为客户端配置Google Analytics API？MERN栈下实现用户授权访问GA数据

• 进入你之前创建项目的Google Cloud Console，打开「API和服务」-「OAuth同意屏幕」，选择外部用户类型，按要求补全应用信息，必须添加https://www.googleapis.com/auth/analytics.readonly作为授权范围；测试阶段先把需要测试的用户邮箱添加到测试用户列表，避免非白名单用户登录报错。
• 打开「凭据」页面，创建OAuth 2.0客户端ID，授权重定向URI填写你前端的回调地址（开发环境可填http://localhost:3000/oauth/callback，生产环境替换为线上地址），保存后获取客户端ID、客户端密钥，后续存入项目环境变量即可。
• 确认当前项目已启用Google Analytics Data API，未开启的话去API库搜索对应服务启用即可。

• 安装谷歌登录封装库，比原生JS接入更简便，安装命令：npm install @react-oauth/google
• 在项目入口文件（如main.jsx/App.jsx）外层包裹授权Provider，传入你刚才拿到的客户端ID：

import { GoogleOAuthProvider } from '@react-oauth/google';

ReactDOM.createRoot(document.getElementById('root')).render(
  <GoogleOAuthProvider clientId={process.env.REACT_APP_GOOGLE_CLIENT_ID}>
    <App />
  </GoogleOAuthProvider>
);

• 在登录页添加授权按钮，使用授权码模式交互，避免隐式模式的安全问题：

import { useGoogleLogin } from '@react-oauth/google';

const LoginPage = () => {
  const login = useGoogleLogin({
    scope: 'openid email profile https://www.googleapis.com/auth/analytics.readonly',
    onSuccess: async (tokenResponse) => {
      // 将授权码发送到后端交换token，不要在前端直接调用GA API
      await fetch('/api/oauth/google', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ code: tokenResponse.code })
      });
    },
    flow: 'auth-code'
  });

  return <button onClick={() => login()}>绑定Google Analytics账号</button>
}

• 安装谷歌官方API客户端库：npm install googleapis
• 新增授权码交换接口，换取用户的access_token和refresh_token，和用户ID绑定存入MongoDB：

const { google } = require('googleapis');

const oauth2Client = new google.auth.OAuth2(
  process.env.GOOGLE_CLIENT_ID,
  process.env.GOOGLE_CLIENT_SECRET,
  process.env.GOOGLE_REDIRECT_URI
);

app.post('/api/oauth/google', async (req, res) => {
  const { code } = req.body;
  const { tokens } = await oauth2Client.getToken(code);
  // 此处将tokens.access_token、tokens.refresh_token和当前登录用户的唯一ID绑定存入数据库
  res.json({ success: true });
});

• 用户后续请求分析数据时，从数据库取出对应用户的access_token，传入GA客户端调用接口即可，逻辑和你之前调取自有账户的逻辑完全一致：

const { BetaAnalyticsDataClient } = require('@google-analytics/data');

app.get('/api/analytics/data', async (req, res) => {
  // 从登录态获取当前用户ID，查询数据库中存储的对应access_token
  const userAccessToken = '从数据库读取的当前用户access_token';
  oauth2Client.setCredentials({ access_token: userAccessToken });
  
  const analyticsDataClient = new BetaAnalyticsDataClient({
    auth: oauth2Client
  });

  // 调用GA API的参数和你之前的配置一致
  const [response] = await analyticsDataClient.runReport({
    property: `properties/${用户选择的GA4媒体资源ID}`,
    // 自定义维度、指标参数
  });
  res.json(response);
});

• access_token有效期仅1小时，过期后调用oauth2Client.refreshAccessToken()方法用refresh_token换新的access_token即可，无需用户重新授权，刷新后记得更新数据库存储的token。
• 上线前需要将OAuth同意屏幕提交谷歌官方审核，否则测试白名单外的用户无法完成授权。
• 客户端密钥、用户的refresh_token禁止暴露到前端，所有和谷歌API的交互都走后端处理。
• 如果需要让用户选择要查看的GA账户，拿到access_token后可以调用analyticsDataClient.getAccountSummaries()拉取用户名下所有可用的GA4资源列表，返回前端让用户选择，将选中的资源ID和用户绑定存储即可。

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