React谷歌登录后无法存储数据：Google ID Token获取及传递问题

前端已完成Google登录，但后端存储数据时始终收到"Google ID token is missing in the response"提示。不清楚Google ID Token从何处获取，且确认它和client_id不是同一内容。

前端代码（React） #

function handleCallbackResponse(response) {
    // 检查响应是否包含Google ID Token
    if (response.credential && response.credential.id_token) {
      var googleIdToken = response.credential.id_token;

      // 将Google ID Token发送到后端
      axios
        .post("http://your_back_end_url/register", {
          googleAccessToken: googleIdToken, // 向服务器发送Google ID Token
        })
        .then((backendResponse) => {
          console.log("Backend response:", backendResponse.data);
          navigate("/"); // 登录成功后跳转到指定页面
        })
        .catch((error) => {
          console.error("Error making the backend request:", error);
          // 按需处理错误
        });
    } else {
      // 处理响应中缺少Google ID Token的情况
      console.error("Google ID token is missing in the response.");
      // 按需处理错误
    }
  }

  useEffect(() => {
    /* global google */
    window.google.accounts.id.initialize({
      client_id: "YOUR_CLIENT_ID",
      callback: handleCallbackResponse,
    });

    return () => {};
  }, []);

  const handleCustomGoogleSignIn = () => {
    // 触发Google登录流程
    window.google.accounts.id.prompt();
  };

后端代码（PHP） #

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    // 假设接收JSON格式的用户数据
    $inputJSON = file_get_contents('php://input');
    $data = json_decode($inputJSON, true);

    // 验证Google Token
    $client = new Google_Client(['client_id' => 'YOUR_CLIENT_ID']); // 替换为实际的Client ID
    $payload = $client->verifyIdToken($data['googleAccessToken']);

    if ($payload) {
        // 从Google获取的用户数据
        $googleUserData = [
            'name' => $payload['name'],
            'email' => $payload['email'],
        ];

        // 从Config类获取数据库连接（假设连接正常）
        $objDb = new Config();
        $conn = $objDb->connect();

        // 准备并执行SQL语句，将用户数据插入users表
        $sql = "INSERT INTO users (name, email) VALUES (:name, :email)";
        $stmt = $conn->prepare($sql);
        $stmt->execute($googleUserData);

        // 返回成功响应
        $response = [
            'message' => 'User data stored successfully',
        ];

        echo json_encode($response);
    } else {
        // Token验证失败
        http_response_code(401); // 未授权
        echo json_encode(['error' => 'Token verification failed']);
    }
} else {
    http_response_code(405); // 方法不允许
    echo json_encode(['error' => 'Invalid request method']);
}

问题分析与修复方案 #

1. 核心问题：Token获取路径错误 #

Google One Tap登录的response对象中，ID Token直接存储在response.credential字段，而非response.credential.id_token。原前端代码的判断逻辑错误，导致无法正确捕获Token，进而触发缺失提示。

2. 前端代码修正 #

修改handleCallbackResponse函数的Token获取逻辑：

function handleCallbackResponse(response) {
    // 正确获取Google ID Token
    if (response.credential) {
      var googleIdToken = response.credential;

      axios
        .post("http://your_back_end_url/register", {
          googleAccessToken: googleIdToken,
        })
        .then((backendResponse) => {
          console.log("后端响应:", backendResponse.data);
          navigate("/");
        })
        .catch((error) => {
          console.error("请求后端出错:", error);
        });
    } else {
      console.error("响应中缺少Google ID Token.");
    }
  }

3. 关键概念区分 #

• Client ID：是你在Google Cloud控制台创建的应用固定标识，用于标识你的应用，不会随登录请求变化。
• Google ID Token：是Google在用户登录成功后颁发的临时身份令牌，包含用户姓名、邮箱等信息，后端通过验证该令牌确认用户身份，每次登录生成的令牌不同。

4. 额外检查项 #

• 确保前端初始化时的client_id拼写正确（原代码中YOUR_CLINET_ID是拼写错误，应为YOUR_CLIENT_ID）；
• 后端需确保已安装Google Client Library，可通过composer require google/apiclient安装。

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