Uppy项目中Google Drive Picker集成问题解析与解决方案

问题背景

在使用Uppy文件上传库集成Google Drive Picker功能时，开发者常会遇到一些配置问题导致功能无法正常工作。这些问题主要涉及API端点访问错误、身份验证失败以及参数配置不当等方面。

核心问题表现

1. 访问/google-picker/get端点时返回404错误
2. 出现"Unknown RPC service: picker"的错误提示
3. 配置的Google服务提供商无法正常工作

根本原因分析

这些问题通常源于以下几个方面的配置不当：

1. Companion服务配置不完整：未在Companion服务端启用Google Picker端点
2. Google Cloud项目参数错误：使用了错误的项目ID而非项目编号
3. API权限配置不足：未正确启用必要的Google API服务
4. 安全限制设置不当：未正确配置API密钥和OAuth客户端的访问限制

完整解决方案

1. 服务端配置

确保在Uppy Companion服务中启用Google Picker端点：

// 在Companion配置中添加
{
  providerOptions: {
    google: {
      enableGooglePickerEndpoint: true
    }
  }
}

2. Google Cloud控制台配置

在Google Cloud控制台中进行以下设置：

1. 启用必要API：

   • Google Drive Picker API
   • Google Drive API

2. 获取正确参数：

   • 使用项目编号(Project Number)作为appId参数
   • 确保API密钥与客户端ID正确对应

3. 安全限制配置：

   • 为API密钥设置"网站"应用限制
   • 添加前端应用的基础URL到网站限制中
   • 限制API密钥仅能访问Google Picker API
   • 在OAuth客户端ID设置中添加授权JavaScript来源

3. 客户端Uppy配置

uppy.use(GoogleDrivePicker, {
  companionUrl: '你的Companion服务地址',
  clientId: 'Google OAuth客户端ID',
  apiKey: 'Google API密钥',
  appId: 'Google Cloud项目编号', // 注意是数字形式的项目编号
});

测试与验证建议

1. 在多个浏览器中测试功能
2. 检查浏览器控制台和网络请求日志
3. 确保本地开发环境配置了正确的localhost地址
4. 验证所有参数是否与Google Cloud控制台中的设置完全一致

总结

Uppy的Google Drive Picker集成需要前后端协同配置，特别是Google Cloud控制台中的各项设置需要格外注意。通过正确配置服务端端点、使用项目编号作为appId、完善API权限和安全限制，可以解决大多数集成问题。开发者应当仔细检查每个配置项，确保它们与Google Cloud控制台中的设置完全匹配。