以安全的方式将大文件从 Azure 存储 Blob 下载到 angular 客户端

Question

你好我试图找到一种方法将文件从 azure 存储下载到部署到 azure 中的 web 应用程序的 angaular 客户端，直到现在该应用程序使用 msal 以 AAD 形式对用户进行身份验证，并且在身份验证后我得到一个 id令牌，知道我希望经过身份验证的用户能够从 azure 存储下载文件我使用 rbac 在我的存储帐户中为我的用户配置了角色，但我不知道如何进行安全连接以从 azure 下载文件，我需要吗一个服务器，如果我需要在服务器端和客户端下载文件？或者我只能在客户端下载？请帮我解决这个问题，问候，加仑

Answer 1

我们可以直接在客户端下载文件@azure/storage-blob。同时，您已在 angular 应用程序中配置了 Azure AD 身份验证。您可以使用 Azure AD 身份验证来访问 Azure blob 存储。但是请注意，如果我们使用这种方式，我们需要为用户分配特殊的Azure RABC (Storage Blob Data Reader)角色。更多细节请参考here

例如

安装sdk

npm install @azure/storage-blob @azure/core-http

使用您需要的 msal

TokenCredential

import {
  TokenCredential,
  GetTokenOptions,
  AccessToken,
} from '@azure/core-http';

export class MyCredential implements TokenCredential {
  private tokens: string;
  constructor(token: string) {
    this.tokens = token;
  }
  public async getToken(
    scopes: string | string[],
    options?: GetTokenOptions
  ): Promise<AccessToken> {
    var result = new MyToken(this.tokens);

    console.log(result);
    return result;
  }
}

class MyToken implements AccessToken {
  token: string;
  expiresOnTimestamp: number;

  constructor(token: string) {
    this.token = token;
  }
}

下载

import { AuthResponse } from 'msal';
import { HttpClient } from '@angular/common/http';
import { MyCredential } from './MyCredential';
import { BlobServiceClient } from '@azure/storage-blob';

@Component({
  selector: 'app-download',
  templateUrl: './download.component.html',
  styleUrls: ['./download.component.css'],
})
export class DownloadComponent implements OnInit {
  constructor(private msalService: MsalService, private http: HttpClient) {}

  ngOnInit(): void {}

  async download(data) {
    try {
      console.log(data);
      let tokenResponse: AuthResponse;
      if (this.msalService.getAccount()) {
        tokenResponse = await this.msalService.acquireTokenSilent({
          scopes: ['https://storage.azure.com/user_impersonation'],
        });
      } else {
        tokenResponse = await this.msalService.acquireTokenPopup({
          scopes: ['https://storage.azure.com/user_impersonation'],
        });
      }

      //console.log(tokenResponse.accessToken);
      var cer = new MyCredential(tokenResponse.accessToken);
      var client = new BlobServiceClient(
        'https://<accountName>.blob.core.windows.net/',
        cer
      );

      var ca = client.getContainerClient(data.container);
      var blob = ca.getBlobClient(data.fileName  );
var properties = await blob.getProperties();
      var result = await blob.download(0, properties.contentLength, {
        onProgress: (progress) => {
          console.log(`You have download ${progress.loadedBytes} bytes`);
        },
        maxRetryRequests：10
      });
      // it will return  browser Blob
      var fileBlob = await result.blobBody;
      const url = window.URL.createObjectURL(fileBlob);
      window.open(url);
    } catch (error) {
      console.log(error);
    }
  }
}

以安全的方式将大文件从 Azure 存储 Blob 下载到 angular 客户端

download large files from azure storage blob to angular client in secure way

download

azure-storage

angular