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

问题描述

您好，我尝试找到一种方法从azure存储中下载文件到azure部署到web应用程序的agaular客户端，直到现在该应用程序已使用msal对AAD fort中的用户进行身份验证，并且在身份验证后我获得了ID令牌，知道我希望经过身份验证的用户将能够从azure存储中下载文件，我已使用rbac在我的存储帐户中为我的用户配置了角色，但是我不知道如何进行安全连接以从azure下载文件，我是否需要服务器如果我需要同时在服务器端和客户端下载文件?或者也许我只能在客户端上下载文件?请帮助我解决这个问题，问候 ，gal

解决方案

我们可以直接使用软件包 @ azure/storage-blob 在客户端中下载文件.同时，您已在角度应用程序中配置了Azure AD身份验证.您可以使用Azure AD身份验证来访问Azure Blob存储.但是请注意，如果使用这种方式，我们需要为用户分配特殊的Azure RABC(存储Blob数据读取器)角色.有关更多详细信息，请参考

hello i try to find a way to download files from azure storage to angaular client that deploayed to web app in azure , till now the app is authenticate the users in fornt of AAD using msal and after authentication i get an id token , know i want that authenticated user will be able to download file from azure storage i configured roles to my users in my storage account using rbac but i don't know how to do secure connection to download the files from azure , do i need a server if though i need to download the files both at server side and client side?or maybe i can do it only in the client side? please help me to solve this problem ,regards ,gal

解决方案

We can directly download file in client with package @azure/storage-blob. Meanwhile, you have configured Azure AD auth in your angular application. You can use Azure AD auth to access Azure blob storage. But please note that we need to assign special Azure RABC (Storage Blob Data Reader) role to the users if we use the way. For more details, pleas refer to here

For example

1. Install sdk

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

1. Implement TokenCredential with token you required from msal

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;
  }
}

1. Downalod

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客户端的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！