如何在React项目中实现Firebase Auth与Google Drive API(gapi)的整合

核心逻辑 #

不需要保留gapi自带的认证登录流程，直接将Firebase Auth登录后获取的Google Access Token注入gapi客户端即可，避免二次登录冲突。

具体实现步骤 #

• 第一步：给Firebase Google登录配置Drive访问权限
  初始化GoogleAuthProvider时必须添加Drive对应的scope，否则拿到的AccessToken没有Drive接口访问权限，修改后的Firebase登录代码如下：

  import { getAuth, signInWithPopup, GoogleAuthProvider } from "firebase/auth";
  
  // 初始化Google登录提供者，添加Drive权限
  const provider = new GoogleAuthProvider();
  provider.addScope('https://www.googleapis.com/auth/drive');
  
  const auth = getAuth();
  signInWithPopup(auth, provider)
    .then((result) => {
      const credential = GoogleAuthProvider.credentialFromResult(result);
      const accessToken = credential.accessToken;
      // 拿到token后传给gapi初始化逻辑
      initGapiDrive(accessToken);
    })
    .catch(err => console.log('登录失败', err));
  

• 第二步：重构gapi初始化逻辑，移除自带的auth2登录流程
  不需要再用gapi.auth2.init做认证，只需要加载Drive客户端，注入拿到的AccessToken即可，修改后的gapi代码如下：

  import { useState, useEffect } from 'react';
  
  const [driveApiReady, setDriveApiReady] = useState(false);
  
  // 只在组件挂载时加载gapi基础库
  useEffect(() => {
    if (!window.gapi) {
      // 没有加载gapi的话可以先动态加载，已经加载的话直接跳过
      const script = document.createElement('script');
      script.src = 'https://apis.google.com/js/api.js';
      script.onload = () => window.gapi.load('client', initDriveClient);
      document.body.appendChild(script);
    } else {
      window.gapi.load('client', initDriveClient);
    }
  }, []);
  
  // 初始化Drive客户端，不需要传认证相关配置
  const initDriveClient = async () => {
    try {
      await window.gapi.client.init({
        apiKey: '你的API KEY',
        discoveryDocs: ['https://www.googleapis.com/discovery/v1/apis/drive/v3/rest'],
      });
      setDriveApiReady(true);
    } catch (err) {
      console.log('Drive客户端初始化失败', err);
    }
  };
  
  // 登录成功拿到Firebase返回的AccessToken后，注入到gapi
  const initGapiDrive = (accessToken) => {
    if (!driveApiReady) return;
    // 直接给gapi设置令牌
    window.gapi.client.setToken({
      access_token: accessToken
    });
    // 令牌注入完成，此时可以正常调用Drive接口
    // 示例：调用Drive文件列表接口
    getDriveFileList();
  };
  
  // 调用Drive接口示例
  const getDriveFileList = async () => {
    try {
      const res = await window.gapi.client.drive.files.list({
        pageSize: 10,
        fields: 'files(id, name)',
      });
      console.log('文件列表：', res.result.files);
    } catch (err) {
      console.log('获取文件列表失败', err);
      // 如果返回401说明令牌过期，可触发Firebase静默刷新登录获取新token重新注入
    }
  };
  

• 第三步：令牌刷新处理
  Google Access Token有效期通常为1小时，过期后可以调用Firebase的signInWithPopup或者signInWithRedirect静默刷新凭证，拿到新的AccessToken后重新调用gapi.client.setToken更新即可。

常见问题排查 #

1. 调用接口返回403无权限：确认Firebase Google登录时已经添加了正确的Drive scope，确认Google Cloud后台已经开启了Drive API权限
2. 调用接口返回401未认证：确认AccessToken未过期，确认已经正确执行了gapi.client.setToken注入令牌

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