如何无需SAS密钥从浏览器上传至Azure Blob Storage？基于Azure AD实现类似亚马逊Cognito+S3的安全上传机制

你提到的SAS密钥安全隐患确实存在——静态SAS没有用户关联性，一旦泄露会带来全局风险。Azure生态里对应的解决方案就是用Azure AD认证用户身份，结合RBAC权限控制，让已登录用户获得专属的短期访问令牌来上传Blob，完全不需要依赖静态SAS，这和AWS Cognito+S3的逻辑一致。

下面是具体的实现步骤和代码示例：

一、核心架构思路 #

1. 用Azure AD（或Azure AD B2C面向外部用户）完成用户身份认证
2. 为用户/用户组分配Blob存储的细粒度RBAC权限（比如仅允许上传到指定容器）
3. 前端通过Azure AD SDK获取用户专属的短期访问令牌
4. 用该令牌初始化BlobServiceClient，直接从浏览器上传文件

二、具体配置与实现 #

1. 配置Azure AD应用注册 #

首先在Azure Portal里注册一个单页应用（SPA）：

• 进入Azure AD → 应用注册 → 新建注册
• 填写应用名称，选择“单页应用(SPA)”作为平台，设置你的React应用重定向URI（比如http://localhost:3000）
• 注册完成后，记录下客户端ID和租户ID
• 进入“API权限” → 添加权限 → 选择“Microsoft APIs” → 找到“Azure Storage”
• 添加委派权限：user_impersonation（允许用户以自己的身份访问Blob存储）
• 如果是企业租户，需要管理员同意该权限

2. 配置Blob存储的RBAC权限 #

确保已登录用户拥有Blob上传的权限：

• 进入你的Azure Blob存储账户 → 访问控制(IAM) → 添加角色分配
• 选择角色：Storage Blob Data Contributor（或更细粒度的自定义角色，比如仅允许上传）
• 将权限分配给目标用户或用户组

3. React前端代码实现 #

首先安装依赖：

npm install @azure/msal-react @azure/msal-browser @azure/storage-blob @azure/core-auth

配置MSAL认证

创建authConfig.js文件：

export const msalConfig = {
  auth: {
    clientId: "你的Azure AD应用客户端ID",
    authority: "https://login.microsoftonline.com/你的租户ID",
    redirectUri: "http://localhost:3000", // 你的React应用地址
  },
  cache: {
    cacheLocation: "sessionStorage",
    storeAuthStateInCookie: false,
  },
};

// 请求Blob存储的权限范围
export const loginRequest = {
  scopes: ["https://storage.azure.com/user_impersonation"],
};

上传组件实现

import { MsalProvider, useMsal, useMsalAuthentication } from "@azure/msal-react";
import { PublicClientApplication } from "@azure/msal-browser";
import { BlobServiceClient } from "@azure/storage-blob";
import { TokenCredential } from "@azure/core-auth";
import { msalConfig, loginRequest } from "./authConfig";

// 初始化MSAL实例
const pca = new PublicClientApplication(msalConfig);

function App() {
  return (
    <MsalProvider instance={pca}>
      <BlobUploader />
    </MsalProvider>
  );
}

function BlobUploader() {
  const { instance } = useMsal();
  // 自动处理登录状态，获取当前账户
  const { account } = useMsalAuthentication(loginRequest);

  const handleFileUpload = async (event) => {
    if (!account) {
      alert("请先登录后再上传文件");
      return;
    }

    try {
      // 静默获取访问令牌（MSAL会自动处理缓存和刷新）
      const tokenResponse = await instance.acquireTokenSilent({
        ...loginRequest,
        account: account,
      });
      const accessToken = tokenResponse.accessToken;

      // 创建TokenCredential对象，用于BlobServiceClient授权
      const tokenCredential = {
        getToken: async () => ({
          token: accessToken,
          expiresOnTimestamp: Date.now() + 3600 * 1000, // 令牌有效期1小时，MSAL会自动刷新
        }),
      };

      // 初始化BlobServiceClient（无需SAS密钥）
      const blobAccountName = "你的Blob存储账户名";
      const blobServiceClient = new BlobServiceClient(
        `https://${blobAccountName}.blob.core.windows.net`,
        tokenCredential
      );

      // 上传文件到指定容器
      const file = event.target.files[0];
      const containerName = "目标容器名";
      const containerClient = blobServiceClient.getContainerClient(containerName);
      const blockBlobClient = containerClient.getBlockBlobClient(file.name);

      await blockBlobClient.upload(file, file.size);
      alert("文件上传成功！");
    } catch (error) {
      console.error("上传失败:", error);
      alert("上传失败，请检查权限或网络连接");
    }
  };

  return (
    <div style={{ padding: "2rem" }}>
      {account ? (
        <>
          <p>当前登录用户: {account.username}</p>
          <input type="file" onChange={handleFileUpload} />
        </>
      ) : (
        <button onClick={() => instance.loginRedirect(loginRequest)}>
          登录以上传文件
        </button>
      )}
    </div>
  );
}

export default App;

三、安全优势与最佳实践 #

• 用户专属权限：每个用户的令牌都是独立的，仅对该用户有效，避免了SAS密钥的全局风险
• 短期令牌：令牌默认有效期1小时，MSAL会自动刷新，即使泄露也不会长期有效
• 细粒度控制：通过RBAC可以限制用户仅能访问特定容器、仅能执行上传操作，最小化权限范围
• 可审计：所有用户的Blob操作都会被记录在Azure AD登录日志和Blob存储诊断日志中，便于追踪

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