前端JS应用如何获取终端用户Google Drive文件链接？

为什么必须使用API凭证？ #

• Google的OAuth 2.0机制要求所有调用其API的应用必须通过客户端ID/API凭证标识身份，这是为了验证应用的合法性，防止恶意应用滥用用户数据。
• 你使用的凭证仅用来证明"你的应用是经过Google备案的"，完全不会关联到你的个人Drive账号。用户授权的是他们自己的账号数据给你的应用，和你的账号没有任何关系。
• 没有凭证的话，Google无法确认请求来源的合法性，会直接拒绝所有API调用，这是平台的安全规则，不是你找错了资料。

前端JavaScript实现步骤 #

1. 配置Google Cloud项目与凭证 #

• 登录Google Cloud控制台，新建项目。
• 在「API和服务」中启用Google Drive API。
• 进入「凭据」页面，创建「OAuth客户端ID」：
  • 应用类型选「Web应用」。
  • 设置授权的JavaScript来源（你的前端域名，本地开发可填http://localhost:端口号）和重定向URI（前端处理授权回调的页面，比如http://localhost:3000/callback）。
  • 记录生成的客户端ID，后续代码会用到。

2. 前端实现授权与文件选择 #

<script src="https://apis.google.com/js/api.js"></script>
<script>
// 初始化API客户端
function initClient() {
  gapi.client.init({
    clientId: '你的客户端ID',
    scope: 'https://www.googleapis.com/auth/drive.readonly', // 仅请求只读权限，降低用户授权门槛
    discoveryDocs: ['https://www.googleapis.com/discovery/v1/apis/drive/v3/rest']
  }).then(() => {
    gapi.auth2.getAuthInstance().isSignedIn.listen(updateSigninStatus);
    updateSigninStatus(gapi.auth2.getAuthInstance().isSignedIn.get());
  });
}

// 处理登录状态变更
function updateSigninStatus(isSignedIn) {
  if (isSignedIn) {
    pickDriveFile();
  } else {
    gapi.auth2.getAuthInstance().signIn();
  }
}

// 启动Google文件选择器
function pickDriveFile() {
  const picker = new google.picker.PickerBuilder()
    .addView(google.picker.ViewId.DOCUMENTS) // 可指定文件类型，比如IMAGES、VIDEOS等
    .setOAuthToken(gapi.auth.getToken().access_token)
    .setCallback(pickerCallback)
    .build();
  picker.setVisible(true);
}

// 文件选择回调，获取文件链接
function pickerCallback(data) {
  if (data[google.picker.Response.ACTION] === google.picker.Action.PICKED) {
    const file = data[google.picker.Response.DOCUMENTS][0];
    const fileId = file[google.picker.Document.ID];
    // 生成可直接在新窗口打开的预览链接
    const fileUrl = `https://drive.google.com/file/d/${fileId}/view`;
    // 这里可将fileUrl存储到前端本地存储或后端
    console.log('选中文件链接:', fileUrl);
  }
}

// 加载Picker库并初始化
function loadPicker() {
  gapi.load('picker', () => {
    initClient();
  });
}

window.onload = loadPicker;
</script>

3. 权限注意事项 #

• 仅请求drive.readonly权限即可，不要申请多余权限，用户更容易通过授权。
• 如果需要长期访问文件链接，建议引导用户将文件设置为「任何人可查看」；若用私有链接，需携带临时的access_token，有效期较短，适合临时访问场景。

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