如果所有的资源都来自Azure，那么我们应该在您的案例中使用管理身份或服务原则（也在后台使用管理身份）链接。
在您的示例中，您有两个Azure资源

1. Azure Blob存储
2. App Service（作为reactjs应用程序托管）下面是如何连接和读取blob的分步说明

在AppService中（作为React应用程序托管）

1.转到您的应用服务
1.然后单击Identity in Left panel

1. Then On System assigned托管标识
   1.按下clicking save按钮后，将生成Object Id. x1c 0d1x
   在Azure Blob存储中
   1.转到Your blob storage account
   1.已单击Access Control（IAM）
   1.单击Role Assignment（RBAC）
   1.单击Add > Add Role assignment
   

1.根据需要选择Role，如Storage Blob Data Reader
1.单击Next〉Select Managed Identity〉Select Member
1.然后是Select your Subscription，然后是App Service
1.然后显示List of Managed identity〉Select your App Service需要与存储连接的设备
1.然后单击Select，再单击Next

1.将step 4中生成的object id与下面的网格

匹配
1.然后单击Next〉Next〉Review + assign
现在在React Js应用程序中
1.我们可以将这些two Dependencies添加到package.json中，然后执行npm i来安装。x1c4d 1x
1.现在connect blob storage with DefaultAzureCredential from @azure/identity package：-当我们直接使用服务原则或托管身份将一个azure的权限/访问权限授予另一个azure资源时，我们将使用默认azure凭据，然后azure会自动验证它们。代码For Import package

import { DefaultAzureCredential } from "@azure/identity";
               // we're using these objects from the storage sdk - there are others for different needs
               import { BlobServiceClient, BlobItem } from "@azure/storage-blob";

1. Create service client and container

const blobStorageClient = new BlobServiceClient(
                // this is the blob endpoint of your storage acccount. Available from the portal 
               // they follow this format: <accountname>.blob.core.windows.net for Azure global
               // the endpoints may be slightly different from national clouds like US Gov or Azure China
                 "https://<your storage account name>.blob.core.windows.net/",
                   new DefaultAzureCredential()
                 )

             // this uses our container we created earlier
        var containerClient = blobStorageClient.getContainerClient("your container name");

1.获取blob列表

let blobs = containerClient.listBlobsFlat();
        for await (const blob of blobs) {
         console.log(`Blob ${i++}: ${blob.name}`);
  }

1.下载blob

const blobClient = containerClient.getBlobClient(blobName);

  // Get blob content from position 0 to the end
  // In Node.js, get downloaded data by accessing downloadBlockBlobResponse.readableStreamBody
  const downloadBlockBlobResponse = await blobClient.download();
  const downloaded = (
    await streamToBuffer(downloadBlockBlobResponse.readableStreamBody)
  ).toString();
  console.log("Downloaded blob content:", downloaded);

  // [Node.js only] A helper method used to read a Node.js readable stream into a Buffer
  async function streamToBuffer(readableStream) {
    return new Promise((resolve, reject) => {
      const chunks = [];
      readableStream.on("data", (data) => {
        chunks.push(data instanceof Buffer ? data : Buffer.from(data));
      });
      readableStream.on("end", () => {
        resolve(Buffer.concat(chunks));
      });
      readableStream.on("error", reject);
    });
  }

有关更多详细信息，请访问以下链接

1. Azure Storage Blob client library for JavaScript - version 12.12.0
2. Quickstart: Manage blobs with JavaScript SDK in Node.js