如何为Firebase Storage图片生成签名URL？SvelteKit防盗链场景

Firebase官方SDK确实没有直接提供getSignedUrl的专属文档，因为这个功能属于底层Google Cloud Storage（GCS）的核心能力——Firebase Storage本质就是托管在GCS上的，所以你需要借助GCS的官方SDK来实现签名URL生成，下面是适配SvelteKit的完整实现步骤：

1. 安装依赖 #

在项目中安装GCS SDK：

npm install @google-cloud/storage

2. 配置服务账号密钥 #

• 登录Firebase控制台，进入项目设置 > 服务账号，点击生成新的私钥，下载JSON格式的密钥文件。
• 将密钥文件内容存入SvelteKit的环境变量（比如.env.local），注意不要将密钥提交到版本控制：

  GOOGLE_APPLICATION_CREDENTIALS='{"type": "service_account", ...}' # 完整的密钥JSON内容
  FIREBASE_STORAGE_BUCKET="你的存储桶名称.appspot.com"
  

3. 编写签名URL生成的API路由 #

在SvelteKit的src/routes/api/get-signed-url/+server.js（或.ts）中编写后端逻辑，确保密钥不会暴露到前端：

import { Storage } from '@google-cloud/storage';
import { env } from '$env/dynamic/private';

export async function GET({ url }) {
  const filePath = url.searchParams.get('path');
  if (!filePath) {
    return new Response(JSON.stringify({ error: '缺少文件路径参数' }), { status: 400 });
  }

  const storage = new Storage({
    credentials: JSON.parse(env.GOOGLE_APPLICATION_CREDENTIALS)
  });
  const bucket = storage.bucket(env.FIREBASE_STORAGE_BUCKET);
  const file = bucket.file(filePath);

  // 配置签名URL的有效期（比如1小时）和访问权限
  const options = {
    version: 'v4',
    action: 'read',
    expires: Date.now() + 3600 * 1000 // 1小时后过期
  };

  try {
    const [signedUrl] = await file.getSignedUrl(options);
    return new Response(JSON.stringify({ signedUrl }), { status: 200 });
  } catch (err) {
    return new Response(JSON.stringify({ error: err.message }), { status: 500 });
  }
}

4. 前端调用API并展示图片 #

在Svelte组件中，调用上述API获取签名URL后渲染图片：

<script>
  let signedUrl = '';
  const filePath = 'users/avatar.jpg'; // 替换为实际的存储文件路径

  async function loadSignedUrl() {
    const res = await fetch(`/api/get-signed-url?path=${encodeURIComponent(filePath)}`);
    const data = await res.json();
    if (data.signedUrl) {
      signedUrl = data.signedUrl;
    }
  }

  loadSignedUrl();
</script>

{#if signedUrl}
  <img src={signedUrl} alt="用户上传图片" />
{:else}
  <p>加载图片中...</p>
{/if}

额外防盗链措施 #

• 设置GCS存储桶的CORS规则，限制只有你的域名能访问资源。
• 签名URL的有效期不要设置过长，根据实际需求调整（比如短时间内的临时访问）。
• 在前端不要直接暴露原始存储路径，通过后端API统一获取签名URL。

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