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

Question

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

Answer 1

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

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

3. 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);
    }
  }
}