React集成react-google-drive-picker提示API开发者密钥无效如何解决

1. 校验API密钥有效性 #

• 你代码中developerKey字段填写的必须是Google Cloud控制台对应项目下创建的API密钥，不要和OAuth客户端ID、客户端密钥三类参数混淆
• 该API密钥必须提前开启「Google Picker API」、「Google Drive API」两个服务权限，未开启对应服务的密钥会直接判定为无效
• 若你给API密钥配置了访问域名限制，需要把当前React项目的运行域名（本地开发默认是http://localhost:3000）添加到允许访问的列表中

2. 调整代码配置 #

你当前代码的参数结构无需改动，直接替换为校验后的有效参数即可。如果你的项目已经提前获取到用户的OAuth2.0访问令牌，可以开启token参数传入令牌，优先级高于密钥鉴权，可直接规避密钥校验失败问题，修改后的核心代码如下：

const handleOpenPicker = () => {
  openPicker({
    // 此处替换为你创建的Web应用类型OAuth客户端ID
    clientId: "你的有效OAuth客户端ID",
    // 此处替换为你校验过的有效API密钥
    developerKey: "你的有效API密钥",
    viewId: "DOCS",
    // 已有OAuth令牌的情况下打开下一行，可跳过密钥校验
    // token: 你的用户OAuth访问令牌,
    showUploadView: true,
    showUploadFolders: true,
    supportDrives: true,
    multiselect: true,
  })
}

3. 本地生效验证 #

修改参数后重启React开发服务，清除浏览器缓存后重新点击按钮测试即可。

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