如何在React中通过react-oauth@google获取Refresh Token？

核心问题分析 #

你遇到的redirect_uri_mismatch和invalid_grant错误，以及无法获取refresh token，核心原因是关键配置缺失、前后端配置不一致，以及后端冗余逻辑干扰了授权流程。

分步解决方案 #

1. 修复前端useGoogleLogin配置 #

要获取refresh token，必须开启offline授权模式，这是Google返回可兑换refresh token授权码的必要条件。同时确保scope与后端一致：

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

const login = useGoogleLogin({
    onSuccess: (tokenResponse) => {
      // 将前端拿到的授权码传给后端兑换token
      fetch("/api/v1/refreshtoken", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ code: tokenResponse.code })
      })
      .then(res => res.json())
      .then(data => {
        // 此处可获取包含refresh_token的响应，存入数据库
        console.log("带Refresh Token的响应:", data.tokens);
      });
    },
    onError: (error) => console.log(error),
    scope: "https://www.googleapis.com/auth/business.manage",
    redirect_uri: "http://localhost:4000/api/v1/steps",
    flow: "auth-code",
    access_type: "offline", // 必须添加该参数
    prompt: "consent" // 可选：强制用户重新授权，确保首次授权后仍能拿到refresh token
  });

<button
  className="btn btn-success"
  onClick={() => login()}
>
  Sign in with Google 🚀
</button>

2. 修正后端代码逻辑 #

后端无需重复生成授权URL，直接用前端传入的授权码兑换token即可，同时确保redirectUri与前端完全一致：

const { google } = require("googleapis");

const oauth2client = new google.auth.OAuth2({
  clientId: "你的客户端ID",
  clientSecret: "你的客户端密钥",
  redirectUri: "http://localhost:4000/api/v1/steps", // 与前端配置完全匹配
});

// 保持与前端一致的scope，无需旧版plus前缀的范围
const scopes = ["https://www.googleapis.com/auth/business.manage"];

exports.getRefreshToken = async (req, res) => {
  try {
    const code = req.body.code;
    // 直接用授权码兑换token
    const { tokens } = await oauth2client.getToken(code);
    
    // 提取refresh_token存入数据库
    console.log("Refresh Token:", tokens.refresh_token);
    
    res.json({ tokens });
  } catch (err) {
    console.error("兑换Token失败:", err.response?.data || err.message);
    res.status(400).json({ err: err.response?.data || err.message });
  }
};

// 修正路由路径：开头需添加/
router.route("/api/v1/refreshtoken").post(getRefreshToken);

3. 检查Google Cloud控制台配置 #

• 已授权重定向URI：在API和服务 -> 凭据中，找到你的客户端ID，确保http://localhost:4000/api/v1/steps已添加，注意协议、端口、路径必须与代码完全一致（包括是否带末尾斜杠）。
• OAuth同意屏幕：若处于测试状态，需添加测试用户（你的Google账号）；同时确认已授权范围包含https://www.googleapis.com/auth/business.manage。
• 授权码有效性：授权码仅能使用一次，重复调用会触发invalid_grant错误，确保每次使用新生成的授权码。

常见问题排查 #

• 无法获取refresh token：首次授权后Google可能不再重复返回，添加prompt: "consent"可强制用户重新授权，再次获取refresh token。
• redirect_uri_mismatch：检查前后端redirect_uri的每一个字符是否完全一致，包括大小写、端口、路径。
• invalid_grant：除了授权码重复使用，还可能是客户端ID/密钥错误、授权码过期（有效期10分钟）、或redirect_uri不一致。

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