使用Google Identity Services配置BigQuery JavaScript API认证遇阻

你遇到的核心问题是新版Google Identity Services（GIS）与旧版gapi.client的初始化流程不兼容——直接调用gapi.client.load会因为未完成GIS的授权校验，导致流程静默中断（无报错是因为gapi的回调在未授权状态下不会触发，也不会抛出错误）。

• 必须先通过GIS完成用户授权、获取有效访问令牌后，再初始化gapi.client并绑定令牌
• 新版GIS完全抛弃了旧版gapi.auth模块，不能跳过GIS授权直接调用BigQuery API加载逻辑

以下是适配新版GIS的完整实现，你可以对照自己的代码补全缺失环节：

<!DOCTYPE html>
<html>
<head>
  <title>BigQuery数据展示Demo</title>
  <!-- 加载新版Google Identity Services库 -->
  <script src="https://accounts.google.com/gsi/client"></script>
  <!-- 加载Google API客户端库 -->
  <script src="https://apis.google.com/js/api.js"></script>
</head>
<body>
  <button id="authorizeBtn" style="display: none;">点击授权访问BigQuery</button>
  <div id="resultContainer"></div>

  <script>
    // 替换成你自己的配置
    const CLIENT_ID = "你的GCP Web应用客户端ID";
    const GCP_PROJECT_ID = "你的GCP项目ID";
    // 只读权限足够展示数据，如需写入请换成https://www.googleapis.com/auth/bigquery
    const REQUIRED_SCOPES = "https://www.googleapis.com/auth/bigquery.readonly";

    // 初始化GIS授权客户端
    function initAuthClient() {
      const tokenClient = google.accounts.oauth2.initTokenClient({
        client_id: CLIENT_ID,
        scope: REQUIRED_SCOPES,
        callback: handleAuthSuccess,
        error_callback: handleAuthFail
      });

      document.getElementById("authorizeBtn").style.display = "block";
      document.getElementById("authorizeBtn").onclick = () => {
        // 触发授权弹窗，prompt: 'consent'确保首次授权时显示权限说明
        tokenClient.requestAccessToken({ prompt: "consent" });
      };
    }

    // 授权成功后的处理逻辑
    function handleAuthSuccess(response) {
      if (response.access_token) {
        // 将GIS获取的令牌绑定到gapi.client
        gapi.client.setToken({ access_token: response.access_token });
        // 现在安全加载BigQuery API
        gapi.client.load("bigquery", "v2", () => {
          console.log("BigQuery API加载完成");
          sendSampleQuery();
        });
      }
    }

    // 授权失败处理
    function handleAuthFail(error) {
      console.error("授权出错:", error);
      alert("授权失败，请检查配置后重试");
    }

    // 发送BigQuery查询示例
    function sendSampleQuery() {
      gapi.client.bigquery.jobs.query({
        projectId: GCP_PROJECT_ID,
        query: `SELECT name, SUM(number) as total 
                FROM \`bigquery-public-data.usa_names.usa_1910_2013\` 
                WHERE state = "TX" 
                GROUP BY name 
                ORDER BY total DESC 
                LIMIT 10;`
      }).then(res => {
        const rows = res.result.rows;
        let resultHtml = "<h3>查询结果</h3><ul>";
        rows.forEach(row => {
          resultHtml += `<li>${row.f[0].v}: ${row.f[1].v}</li>`;
        });
        resultHtml += "</ul>";
        document.getElementById("resultContainer").innerHTML = resultHtml;
      }, err => {
        console.error("查询失败:", err);
        alert("查询出错，请查看控制台日志");
      });
    }

    // 页面加载完成后初始化授权客户端
    window.onload = initAuthClient;
  </script>
</body>
</html>

• 确认你的GCP项目已启用BigQuery API（在GCP控制台的API库中搜索并启用）
• 客户端ID必须是Web应用类型的OAuth 2.0客户端ID，且已将当前页面域名添加到「已授权的JavaScript来源」列表
• 检查浏览器隐私设置，是否阻止了Google的授权弹窗
• 可以在gapi.client.load的回调中添加日志，确认API是否成功加载

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