如何通过React连接Google Cloud Storage并获取私有对象

绝对不要在React前端代码中硬编码GCS的服务账号密钥、存储桶管理员凭证等敏感信息，会直接导致权限泄露，存在严重安全风险

方案1：后端生成签名URL，前端直接访问 #

这是目前最通用、安全度最高的实现方案，逻辑如下：

• 前端把需要访问的私有对象的存储路径发送给你的后端服务
• 后端使用已授权的GCS服务账号，调用GCS SDK生成该对象的限时签名访问URL，超时时间可根据业务需求自定义（一般建议设置为5分钟到1小时不等）
• 后端把生成的签名URL返回给前端
• React前端直接把URL赋值给img、video等标签的src属性，或者直接跳转访问即可读取私有对象内容

如果是Node.js后端的话，生成签名URL的核心代码参考：

const { Storage } = require('@google-cloud/storage');
const storage = new Storage({
  keyFilename: '你的服务账号密钥文件路径',
  projectId: '你的GCP项目ID'
});

async function generateSignedUrl(bucketName, fileName, expireTime = 300) {
  const options = {
    version: 'v4',
    action: 'read',
    expires: Date.now() + expireTime * 1000, // 单位为毫秒，默认设置5分钟过期
  };
  const [url] = await storage.bucket(bucketName).file(fileName).getSignedUrl(options);
  return url;
}

React前端调用示例：

// React组件内调用后端接口获取签名URL
const fetchObjectUrl = async (objectPath) => {
  const res = await fetch('/你的后端接口地址', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ path: objectPath })
  });
  const signedUrl = await res.text();
  // 直接赋值给资源标签即可正常渲染
  setObjectUrl(signedUrl);
}

方案2：使用Firebase Storage中转（仅适用于GCS存储桶已关联Firebase项目的场景） #

如果你的GCS存储桶已经绑定了Firebase项目，可以直接用Firebase JS SDK在前端访问私有对象，不需要自行开发后端签名逻辑：

• 首先在Firebase控制台开启Storage服务，关联对应的GCS存储桶
• 在Firebase Storage的安全规则中配置好私有对象的访问权限，比如仅允许指定登录用户访问对应路径
• React项目中安装Firebase SDK，初始化Firebase配置后，调用SDK的getDownloadURL方法获取私有对象的访问地址，直接渲染即可

核心代码示例：

import { getStorage, ref, getDownloadURL } from "firebase/storage";

const storage = getStorage();
getDownloadURL(ref(storage, '私有对象的存储路径'))
  .then((url) => {
    // 直接赋值给资源标签即可
    setObjectUrl(url);
  })

注意：如果需要完全无后端参与、纯前端访问GCS私有对象，只能使用临时授权的有限权限凭证，绝对不能将永久权限的服务账号密钥放到前端代码中，否则所有人都可以通过打包后的前端代码拿到密钥，篡改、删除存储桶内的所有资源。

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