如何通过后端生成Token替代Azure连接串，实现React前端上传Blob至Azure存储？

当然可以通过后端生成带过期时间的短期访问凭证供前端使用，这是避免暴露存储连接串的标准最佳实践，完全可行。以下是具体实现方案和Azure配置要求：

一、Azure账户所需配置 #

• 容器权限：确保你的Blob存储容器设置为私有（默认就是私有，若之前改为公开需改回），禁止匿名访问。
• 权限分配（可选但推荐）：如果用Azure AD令牌模式，需在Azure AD中给后端服务（或应用注册）分配存储Blob数据贡献者角色（针对目标容器或存储账户）；如果用SAS Token模式，后端需持有存储账户的账户密钥，或启用Managed Identity并分配对应权限（Managed Identity更安全，不用手动管理密钥）。

二、后端生成凭证的两种简洁方式 #

方式1：简化版SAS Token生成（解决你觉得复杂的问题） #

用Azure官方SDK可以快速生成容器或Blob级别的SAS Token，不用手动拼接签名逻辑。以Node.js为例：

const { BlobServiceClient } = require("@azure/storage-blob");

// 后端从环境变量读取连接串（绝对不要暴露给前端）
const connectionString = process.env.AZURE_STORAGE_CONNECTION_STRING;
const blobServiceClient = BlobServiceClient.fromConnectionString(connectionString);
const containerClient = blobServiceClient.getContainerClient("your-audio-container");

// 生成有效期15分钟、仅允许上传的SAS URL
const sasUploadUrl = await containerClient.generateSasUrl({
  expiresOn: new Date(Date.now() + 15 * 60 * 1000), // 15分钟后过期
  permissions: "w" // 仅允许写入（上传）操作
});

// 返回给前端：直接返回这个完整的SAS URL，前端可直接PUT上传

前端拿到这个URL后，直接用fetch上传Blob：

fetch(sasUploadUrl, {
  method: "PUT",
  headers: { "Content-Type": "audio/mpeg" }, // 匹配你的音频格式
  body: recordedAudioBlob
});

方式2：类似Speech SDK的Azure AD令牌模式 #

这种模式和你熟悉的Speech Token流程一致，后端向Azure AD请求针对Blob存储的访问令牌，返回给前端使用：

后端代码（Node.js，用Managed Identity）：

const { DefaultAzureCredential } = require("@azure/identity");

const credential = new DefaultAzureCredential();
// 请求Blob存储的访问令牌
const tokenResponse = await credential.getToken("https://storage.azure.com/.default");
const accessToken = tokenResponse.token;

// 返回给前端：令牌 + 存储账户名 + 容器名 + 要上传的Blob文件名
res.json({
  accessToken,
  accountName: "your-storage-account",
  containerName: "your-audio-container",
  blobName: `audio-${Date.now()}.wav`
});

前端上传代码：

const { accessToken, accountName, containerName, blobName } = await fetch("/api/get-upload-token").then(res => res.json());
const uploadUrl = `https://${accountName}.blob.core.windows.net/${containerName}/${blobName}`;

fetch(uploadUrl, {
  method: "PUT",
  headers: {
    "Authorization": `Bearer ${accessToken}`,
    "Content-Type": "audio/wav"
  },
  body: recordedAudioBlob
});

三、核心流程总结 #

1. 前端完成音频录制，得到Blob数据。
2. 前端向后端发起请求，获取短期上传凭证（SAS URL或Azure AD令牌+存储信息）。
3. 前端直接用凭证调用Azure Blob Storage API完成上传，全程不接触存储连接串。

四、关键注意事项 #

• 凭证有效期设为15-30分钟即可，避免泄露后被滥用。
• 后端要加用户权限校验，确保只有合法用户能获取上传凭证。
• 优先使用Managed Identity代替账户密钥，减少密钥泄露风险。

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