React集成Google Identity Services登录遇401错误求助

尝试不借助第三方库实现Google Identity Services登录功能，登录时能正常获取响应，但控制台出现错误：
Failed to load resource: the server responded with a status of 401 ()

你的实现代码：

useEffect(() => {
    try {
      google.accounts.id.initialize({
        client_id:
          "CODE.apps.googleusercontent.com",
        callback: handleCallbackResponse,
      });

      google.accounts.id.renderButton(document.getElementById("buttonDiv"), {
        theme: "outline",
        size: "large",
        text: "continue_with",
      });

      window.google.accounts.id.prompt();
    } catch (e) {
      alert("Error", e);
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);


function handleCallbackResponse(response) {
    //code
  }

return (<div id="buttonDiv"></div>)

可能的原因及解决步骤 #

1. OAuth 2.0客户端配置异常 #

• 检查Google Cloud控制台的已授权JavaScript来源：把你的前端域名（本地开发如http://localhost:3000，生产环境对应实际域名）添加到客户端ID的授权列表中，未授权域名会触发资源请求401。
• 确认已授权重定向URI：即使使用一键登录，部分场景仍需配置和前端访问地址一致的重定向地址，避免验证环节异常。

2. ID Token后端验证问题 #

如果handleCallbackResponse里有用ID Token请求后端接口的逻辑，401大概率出在这里：

• 确保后端验证ID Token时，使用了正确的客户端ID，且严格按照Google规范验证签名、过期时间、受众（audience）等字段。
• 若后端调用Google的tokeninfo接口做验证，检查请求是否被拦截，请求头是否合规。

3. 登录脚本加载问题 #

确认页面中已正确加载Google登录脚本，建议在index.html中添加：

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

脚本加载时机错误可能导致初始化过程中资源请求失败。

4. API权限与启用状态 #

• 检查Google Cloud控制台是否启用了Google Identity API，一键登录依赖该API正常运行。
• 若需获取用户额外信息（如邮箱、头像），确认请求的权限范围（scope）已授权，且用户同意了对应权限。

代码优化建议 #

用React的useRef替代document.getElementById，更符合React的DOM操作规范：

import { useEffect, useRef } from 'react';

// ...

const buttonRef = useRef(null);

useEffect(() => {
  try {
    google.accounts.id.initialize({
      client_id: "CODE.apps.googleusercontent.com",
      callback: handleCallbackResponse,
    });

    google.accounts.id.renderButton(buttonRef.current, {
      theme: "outline",
      size: "large",
      text: "continue_with",
    });

    window.google.accounts.id.prompt();
  } catch (e) {
    console.error("Google登录初始化错误:", e);
  }
}, []);

return <div ref={buttonRef}></div>;

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