Google Picker API是否受JS库弃用影响？求替代实现方案

当前使用方式的合理性说明 #

你当前依赖的apis.google.com/js/api.js（Google Client Library）确实存在部分旧接口弃用的情况，尽管目前Picker相关代码仍能运行，但Google官方已逐步转向**Google Identity Services (GIS)**作为统一的身份验证方案，长期来看旧库存在被移除或功能失效的风险。而你引入的accounts.google.com/gsi/client是官方推荐的新身份验证库，这部分是合规的，问题核心在于Picker的初始化逻辑需要脱离旧Client Library的依赖。

官方推荐的替代实现步骤 #

以下是完全基于GIS和动态加载Picker的合规方案，无需再依赖弃用的api.js：

1. 仅保留GIS库引入 #

移除api.js的脚本标签，只保留GIS的引入：

<script async defer src="https://accounts.google.com/gsi/client" onload="gisLoaded()"></script>

2. 用GIS完成OAuth授权 #

通过GIS的oauth2.initTokenClient方法获取访问令牌，替代旧的gapi.auth2流程：

function initAuth() {
  const tokenClient = google.accounts.oauth2.initTokenClient({
    client_id: '你的OAuth客户端ID',
    scope: 'https://www.googleapis.com/auth/drive.file', // 按需调整权限范围
    callback: (response) => {
      if (response.access_token) {
        loadGooglePicker(response.access_token);
      }
    }
  });

  // 绑定触发Picker的按钮事件
  document.getElementById('open-picker-btn').addEventListener('click', () => {
    tokenClient.requestAccessToken({ prompt: 'consent' });
  });
}

3. 动态加载Picker库并初始化 #

拿到令牌后，动态加载Picker的官方脚本，而非通过gapi.load：

function loadGooglePicker(accessToken) {
  const script = document.createElement('script');
  script.src = 'https://www.google.com/picker/api/js';
  script.onload = () => {
    const picker = new google.picker.PickerBuilder()
      .addView(google.picker.ViewId.DOCUMENTS) // 按需添加视图，比如图片、文件夹等
      .setOAuthToken(accessToken)
      .setDeveloperKey('你的开发者密钥') // 若需访问公共数据则必填，私有数据可选
      .setCallback(pickerCallback)
      .build();
    picker.setVisible(true);
  };
  document.body.appendChild(script);
}

// Picker选择回调
function pickerCallback(data) {
  if (data[google.picker.Response.ACTION] === google.picker.Action.PICKED) {
    const selectedDoc = data[google.picker.Response.DOCUMENTS][0];
    console.log('选中文件ID:', selectedDoc.id, '文件名:', selectedDoc.name);
    // 这里处理选中文件的逻辑
  }
}

// GIS加载完成后初始化授权流程
window.gisLoaded = initAuth;

关键优势 #

• 完全遵循Google最新的身份验证规范，避免旧库弃用风险
• 动态加载Picker库，减少页面初始加载的资源体积
• 权限范围更精细（比如drive.file仅允许访问用户通过Picker选择的文件），符合隐私安全要求

注意事项 #

• 确保在Google Cloud Console中正确配置OAuth客户端ID，添加你的项目域名到授权列表
• 权限范围需根据业务需求调整，比如需要访问用户所有Drive文件可改用https://www.googleapis.com/auth/drive（但会增加审核难度）
• 若需支持多语言，可在Picker脚本URL后添加?hl=zh-CN参数指定语言

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