React中使用@react-oauth/google获取Google API手机号的方法

• 确认权限与Scope配置
  你已添加PhonenNumber.read权限，但需确保：

  • 在Google Cloud控制台的OAuth同意屏幕中，该权限已加入已授权范围；若应用处于测试状态，仅添加的测试用户能获取敏感权限，发布后可面向所有用户
  • 请求的scope必须包含https://www.googleapis.com/auth/userinfo.phone，同时保留基础的email和profile

• 修改GoogleLogin组件配置
  默认组件仅请求基础信息，需显式指定包含手机号权限的scope，并配置返回Access Token：

• 调用People API获取手机号
  ID Token（jwtDecode解析的内容）不会包含手机号，必须用登录后获取的Access Token调用Google People API提取手机号。

修改后的完整代码 #

import logo from "./logo.svg";
import React from "react";
import {
  GoogleOAuthProvider,
  GoogleLogin,
} from "@react-oauth/google";
import "./App.css";
import jwtDecode from "jwt-decode";

function App() {
  const fetchUserPhone = async (accessToken) => {
    try {
      const response = await fetch(
        "https://people.googleapis.com/v1/people/me?personFields=phoneNumbers",
        {
          headers: {
            Authorization: `Bearer ${accessToken}`,
          },
        }
      );
      const data = await response.json();
      // 提取用户手机号（取第一个关联号码）
      const phoneNumber = data.phoneNumbers?.[0]?.value;
      console.log("用户手机号:", phoneNumber);
      return phoneNumber;
    } catch (error) {
      console.error("获取手机号失败:", error);
    }
  };

  return (
    <>
      <div
        className="App"
        style={{
          display: "flex",
          flex: 1,
          height: "100vh",
          justifyContent: "center",
          alignItems: "center",
        }}
      >
        Hi There, Welcome
        <GoogleOAuthProvider clientId="102719035032-plab3dv29ukb37k4kubscgsdgnlibs94.apps.googleusercontent.com">
          <GoogleLogin
            // 指定包含手机号权限的scope
            scope="email profile https://www.googleapis.com/auth/userinfo.phone"
            // 设置同时返回ID Token和Access Token
            responseType="token id_token"
            onSuccess={(credentialResponse) => {
              const { credential, access_token } = credentialResponse;
              // 解析基础用户信息
              let userData = jwtDecode(credential);
              console.log("基础用户信息:", userData);
              // 调用API获取手机号
              if (access_token) {
                fetchUserPhone(access_token);
              }
            }}
            onError={() => {
              console.log("Login Failed");
            }}
          />
        </GoogleOAuthProvider>
      </div>
    </>
  );
}

export default App;

关键说明 #

• responseType="token id_token"：必须配置此参数才能同时获取ID Token（基础信息）和Access Token（用于调用People API），默认仅返回ID Token
• personFields=phoneNumbers：调用API时指定仅获取手机号字段，减少不必要的数据传输
• 若出现权限错误，检查OAuth同意屏幕的权限是否已发布，或当前登录用户是否在测试用户列表（应用未发布时）

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