React-Native连接Azure Blob Storage报错，寻求替代连接方案

我尝试在React-Native应用中连接Azure Blob Storage，运行代码时遇到错误：[Error: Account connection string is only supported in Node.js environment]。想确认是否无法在React-Native中用连接字符串连接Azure，同时需要可行的替代方案。

原代码如下：

import { BlobServiceClient} from "@azure/storage-blob";

const downloadfirmwareFile=async()=>{
    try{
        const blobServiceClient=BlobServiceClient.fromConnectionString(azureConnectionString)
        const containerClient=blobServiceClient.getContainerClient(azureContainerName)
        const blobClient=containerClient.getBlobClient({filepath}) //exact location where the file is stored
        const downloadedBlobResponse= await blobClient.download(0)
        const downloadedBlob= await downloadedBlobResponse.blobBody
        if(!downloadedBlob){
            console.log("Blob data is undefined")
            return;
        }
        else{
            const arrayBuffer= await downloadedBlob.arrayBuffer()
            const binaryData= Buffer.from(arrayBuffer).toString()
            const filePath=`${RNFS.DocumentDirectoryPath}/downloaded-file.bin`
            await RNFS.writeFile(filePath,binaryData,'binary')
            console.log("file created")
        }
    }
    catch(error){
        console.log(error)
    }
}

原本期望这段代码能在React-Native中连接Azure Blob Storage并下载文件，但未能成功实现。

是的，连接字符串仅支持Node.js环境，React-Native属于客户端环境，无法直接使用这种方式连接Azure Blob Storage。以下是两种可行的替代方案：

方案一：使用SAS URL直接访问Blob #

生成Blob的共享访问签名（SAS）URL，直接通过HTTP请求下载文件，无需依赖@azure/storage-blob库，更适合客户端环境。

修改后的代码示例： #

import RNFS from 'react-native-fs';

const downloadfirmwareFile = async () => {
  try {
    // 替换为你的Blob SAS URL
    const blobSasUrl = "https://yourstorageaccount.blob.core.windows.net/yourcontainer/yourfile.bin?sv=2023-11-03&st=2024-05-20T00%3A00%3A00Z&se=2024-05-30T00%3A00%3A00Z&sr=b&sp=r&sig=your_sas_signature";
    const filePath = `${RNFS.DocumentDirectoryPath}/downloaded-file.bin`;

    // 发起HTTP GET请求下载文件
    const response = await fetch(blobSasUrl);
    if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
    
    // 将响应转为ArrayBuffer并写入本地文件
    const arrayBuffer = await response.arrayBuffer();
    await RNFS.writeFile(filePath, Buffer.from(arrayBuffer), 'binary');
    
    console.log("文件下载成功");
  } catch (error) {
    console.log("下载失败:", error);
  }
};

方案二：使用Azure AD令牌进行身份验证 #

如果需要更安全的长期访问（避免SAS URL过期问题），可以通过后端服务获取Azure AD访问令牌，然后在React-Native中使用令牌初始化BlobServiceClient。

修改后的代码示例： #

import { BlobServiceClient, TokenCredential } from "@azure/storage-blob";
import RNFS from 'react-native-fs';

const downloadfirmwareFile = async () => {
  try {
    // 从你的后端服务获取Azure AD访问令牌
    const tokenResponse = await fetch('https://your-backend-service/get-blob-token');
    const { accessToken } = await tokenResponse.json();

    // 使用令牌初始化BlobServiceClient
    const blobServiceClient = new BlobServiceClient(
      `https://yourstorageaccount.blob.core.windows.net`,
      {
        getToken: async () => ({ token: accessToken, expiresOnTimestamp: Date.now() + 3600 * 1000 })
      } as TokenCredential
    );

    const containerClient = blobServiceClient.getContainerClient(azureContainerName);
    const blobClient = containerClient.getBlobClient("your-file-path.bin");
    
    const downloadedBlobResponse = await blobClient.download(0);
    const downloadedBlob = await downloadedBlobResponse.blobBody;
    
    if (!downloadedBlob) {
      console.log("Blob数据为空");
      return;
    }

    const arrayBuffer = await downloadedBlob.arrayBuffer();
    const filePath = `${RNFS.DocumentDirectoryPath}/downloaded-file.bin`;
    await RNFS.writeFile(filePath, Buffer.from(arrayBuffer), 'binary');
    
    console.log("文件下载成功");
  } catch (error) {
    console.log("下载失败:", error);
  }
};

注意事项： #

• SAS URL方案更简单，适合临时访问场景，注意设置合理的过期时间和权限。
• Azure AD令牌方案需要后端配合生成令牌，避免在客户端暴露敏感凭证，安全性更高。

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