如何通过Firebase Auth获取OAuth AccessToken无需用户重复登录？

我使用Firebase Auth进行身份验证，通过signInWithPopup方法可获取UserCredentials对象，从中提取accessToken后就能代表用户调用API，示例代码如下：

const url = new URL(`https://www.googleapis.com/whatever`);

const headers = new Headers();
headers.append('authorization', `Bearer ${userCredentials.accessToken}`);
headers.append('accept', 'application/json');

const response = await fetch(url, {headers});

为避免用户每次加载页面都需要重新登录，我打算使用Firebase的Authentication State Persistence，相关代码：

auth.onAuthStateChanged((user)=>{
  // 业务逻辑处理...
});

但问题在于，onAuthStateChanged的回调仅提供User对象而非UserCredentials对象，无法直接从中获取OAuth AccessToken。

补充细节：我正使用Firebase Auth结合GoogleAuthProvider的弹窗模式连接YouTube Data API v3。

可行解决方案 #

1. 针对Google服务：通过Refresh Token换取Access Token

这是适配YouTube Data API的最优方案，步骤如下：

• 首次登录时获取并保存Refresh Token
  登录时需要配置access_type: 'offline'和prompt: 'consent'参数，确保能拿到Refresh Token：

  const provider = new firebase.auth.GoogleAuthProvider();
  provider.setCustomParameters({
    access_type: 'offline',
    prompt: 'consent'
  });
  const userCredential = await firebase.auth().signInWithPopup(provider);
  // 将Refresh Token存入本地存储
  localStorage.setItem('googleRefreshToken', userCredential.user.refreshToken);
  

• 页面加载时用Refresh Token换取新的Access Token
  在onAuthStateChanged回调中，读取保存的Refresh Token，调用Google的Token端点获取有效Access Token：

  auth.onAuthStateChanged(async (user)=>{
    if (user) {
      const refreshToken = localStorage.getItem('googleRefreshToken');
      if (refreshToken) {
        const tokenResponse = await fetch('https://oauth2.googleapis.com/token', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          },
          body: new URLSearchParams({
            client_id: '你的Google客户端ID',
            client_secret: '你的Google客户端密钥',
            refresh_token: refreshToken,
            grant_type: 'refresh_token'
          })
        });
        const tokenData = await tokenResponse.json();
        const accessToken = tokenData.access_token;
        // 使用accessToken调用YouTube Data API
      }
    }
  });
  

  ⚠️ 注意：客户端密钥直接放在前端存在安全风险，建议通过自己的后端服务中转获取Access Token，前端调用后端接口拿到token即可。

2. 临时方案：首次登录时保存Access Token到本地

如果只是临时场景，可在首次登录成功后将Access Token和过期时间存入本地存储，后续直接读取：

// 首次登录成功后
const userCredential = await firebase.auth().signInWithPopup(provider);
localStorage.setItem('googleAccessToken', userCredential.accessToken);
// Access Token有效期通常为1小时，设置过期时间
localStorage.setItem('tokenExpiry', Date.now() + 3600 * 1000);

// onAuthStateChanged回调中使用
auth.onAuthStateChanged(async (user)=>{
  if (user) {
    let accessToken = localStorage.getItem('googleAccessToken');
    const tokenExpiry = localStorage.getItem('tokenExpiry');
    // 如果token不存在或已过期，需重新获取（比如用Refresh Token）
    if (!accessToken || Date.now() > tokenExpiry) {
      // 执行Refresh Token换token逻辑或提示用户重新登录
    }
    // 使用accessToken调用API
  }
});

3. 若API支持Firebase ID Token：用ID Token替代

如果调用的API接受Firebase的ID Token，可直接通过user.getIdToken()获取：

auth.onAuthStateChanged(async (user)=>{
  if (user) {
    const idToken = await user.getIdToken();
    const headers = new Headers();
    headers.append('authorization', `Bearer ${idToken}`);
    // 后续请求逻辑
  }
});

⚠️ 此方法不适用于YouTube Data API，仅适用于支持Firebase ID Token的服务。

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