@react-oauth/google谷歌登录未返回access_token问题求助

使用@react-oauth/google的GoogleLogin组件时，默认只会返回ID Token（对应响应里的credential字段），如果需要获取access_token来调用谷歌用户信息API，可通过以下步骤调整配置：

1. 修改GoogleLogin组件参数 #

在Login.js中，给GoogleLogin添加scope和responseType属性，指定所需权限与返回令牌类型：

import { GoogleLogin } from "@react-oauth/google";

const responseMessage = (response) => {
  console.log(response);
  // 此时response会包含access_token字段
  setUser(response);
};

<GoogleLogin
  onSuccess={responseMessage}
  onError={errorMessage}
  scope="profile email"
  responseType="token id_token"
/>;

• scope：声明需要的用户权限，profile和email是调用用户信息API的基础权限，可按需添加其他权限
• responseType：设置为token id_token，表示同时返回Access Token和ID Token

2. 确认响应结构 #

修改配置后，登录成功的响应会新增access_token字段，示例结构如下：

{
  "clientId": "你的客户端ID",
  "credential": "ID Token字符串",
  "select_by": "用户选择方式",
  "access_token": "目标Access Token",
  "expires_in": 3600,
  "token_type": "Bearer"
}

3. 调整用户信息API调用 #

现在可以直接用response.access_token调用API，修改后的useEffect代码如下：

useEffect(() => {
  if (user?.access_token) {
    axios
      .get("https://www.googleapis.com/oauth2/v1/userinfo", {
        headers: {
          Authorization: `Bearer ${user.access_token}`,
          Accept: "application/json",
        },
      })
      .then((res) => {
        setProfile(res.data);
        setEmail(res.data.email);
      })
      .catch((err) => console.log(err));
  }
}, [user]);

注意：无需在URL中拼接access_token参数，通过Authorization请求头传递即可。

额外提醒 #

• 需在Google Cloud控制台的OAuth同意屏幕中添加对应的scope，若应用面向外部用户，需提交审核后才能启用这些权限
• access_token默认有效期为3600秒，过期后需重新获取或使用刷新令牌（需额外配置prompt=consent等参数）

内容的提问来源于stack exchange，提问作者Kiran S youtube channel