React项目中如何获取Firebase Auth刷新后的有效访问令牌？

核心说明 #

• 你用onIdTokenChanged监听到的currentUser是Firebase返回的用户对象，它自带的getIdToken()方法可以拿到最新的Firebase ID令牌（用于你自己的后端接口鉴权），但这不是调用Google Drive API需要的Google访问令牌
• Firebase默认不会自动刷新第三方（Google）的访问令牌，你需要额外处理Google令牌的刷新逻辑

代码修改方案 #

1. 调整登录逻辑，获取Google刷新令牌 #

首先初始化Google认证提供者时添加离线访问参数，确保能拿到刷新令牌：

const provider = new GoogleAuthProvider();
// 新增自定义参数，确保能拿到Google刷新令牌
provider.setCustomParameters({
  access_type: "offline",
  prompt: "consent"
});
provider.addScope('https://www.googleapis.com/auth/drive'); // 确保你已经申请了Drive权限

修改登录函数，存储拿到的Google访问令牌和刷新令牌：

const login = async () => {
  signInWithPopup(auth, provider)
    .then((result) => {
      const credential = GoogleAuthProvider.credentialFromResult(result);
      const googleAccessToken = credential.accessToken;
      const googleRefreshToken = credential.refreshToken;
      // 把两个令牌存到全局状态/本地存储，供其他模块调用
      localStorage.setItem('google_access_token', googleAccessToken);
      localStorage.setItem('google_refresh_token', googleRefreshToken);
      setUser(result.user);
    })
}

2. 令牌刷新处理 #

如果你需要的是Firebase ID令牌（用于自有服务鉴权）

直接在onIdTokenChanged回调里调用getIdToken()即可拿到最新令牌：

onIdTokenChanged(auth, async (currentUser) => {
  if (currentUser) {
    // 拿到最新的Firebase ID令牌
    const freshIdToken = await currentUser.getIdToken();
    // 存到全局状态供其他模块使用
    setIdToken(freshIdToken);
    setUser(currentUser);
  } else {
    setUser(null);
    setIdToken(null);
  }
});

如果你需要的是Google访问令牌（用于调用Drive API）

你可以封装一个单独的刷新方法，在调用Drive API前判断令牌是否过期，如果过期就用存储的刷新令牌换取新的访问令牌：

// 封装刷新Google访问令牌的方法
const refreshGoogleAccessToken = async () => {
  const refreshToken = localStorage.getItem('google_refresh_token');
  if (!refreshToken) throw new Error('无刷新令牌，请重新登录');
  const res = await fetch('https://oauth2.googleapis.com/token', {
    method: 'POST',
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
    body: new URLSearchParams({
      client_id: '你的Google OAuth客户端ID',
      client_secret: '你的Google OAuth客户端密钥',
      refresh_token: refreshToken,
      grant_type: 'refresh_token'
    })
  });
  const data = await res.json();
  const newAccessToken = data.access_token;
  // 更新存储的访问令牌
  localStorage.setItem('google_access_token', newAccessToken);
  return newAccessToken;
}

调用Drive API前，先调用这个方法拿到最新的有效令牌即可。

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