Unable to generate 'sas' Token using angular-azure-blob-service

Question

 if (fileUpload !== null) {
      const baseUrl = this.blob.generateBlobUrl(Config,'testBlobUpload');
      this.config = {
        baseUrl: baseUrl,
        sasToken: Config.sas,
        blockSize: 1024 * 64, // OPTIONAL, default value is 1024 * 32
        file: fileUpload.nativeFile,
        complete: () => {
          console.log('Transfer completed !');
        },
        error: () => {
          console.log('Error !');
        },
        progress: (percent) => {
          //this.percent = percent;
        }
      };
      this.blob.upload(this.config);
    }
    
    
    export const Config: UploadParams = {
        sas:'?sv=2017-07-29&sr=b&sig=q80fVo0wp8SVmTcgae%2BjceUPfKjE3Eb2MYbkClm8EqQ%3D&st=2018-03-06T13%3A49%3A33Z&se=2018-11-01T13%3A49%3A33Z&sp=racw',
        storageAccount: 'vldevstoragefuncapp.blob.core.windows.net/vl2songs',
        containerName: 'vl2songs'
        //?sv=2017-07-29&sr=b&sig=QXVl6BcV47WiOPbM8CeNhmGpC%2FNslyN7qnI%2BopLuXyg%3D&st=2018-03-06T11%3A46%3A49Z&se=2018-11-01T11%3A46%3A50Z&sp=rw
      }

Using Angular5 for uploading media files on Azure blob using angular-azure-blob-service, I am facing issue with generating the 'sas' Token, If anyone Used help me, Thanks

enter image description here

@GauravMantri I have that, Sharing link i am using npmjs.com/package/angular-azure-blob-service You will see, Lib don't have code for generating the 'sas' Token — Vivek Shukla
This library needs SAS token. You will need to generate it elsewhere and then use it in your code. — Gaurav Mantri
Does it means, I need to create a separate API for This? then need to use that for this Lib, right. — Vivek Shukla

Botond Botond · Accepted Answer · 2019-11-01T12:06:18

To generat the SAS token in Angular 2+ you need to install - create-hmac

npm i create-hmac

need to insert to index.html

<head>
  ...

  <script>
    var global = global || window;
    var Buffer = Buffer || [];
    var process = process || {
      env: { DEBUG: undefined },
      version: []
    };
  </script>
</head>

to genrate token -

public generateSasToken(resourceUri: string, signingKey: string, policyName: string, expiresInMins: number) {
    resourceUri = encodeURIComponent(resourceUri);
    let expires = (Date.now() / 1000) + expiresInMins * 60;
    expires = Math.ceil(expires);
    const toSign = resourceUri + '\n' + expires;

    // Use crypto
    const createHmac = require('create-hmac');
    const Buffer = require('buffer').Buffer;
    const hmac = createHmac('sha256', Buffer.from(signingKey, 'base64'));
    hmac.update(toSign);
    const base64UriEncoded = encodeURIComponent(hmac.digest('base64'));

    // Construct authorization string
    let token = 'SharedAccessSignature sr=' + resourceUri + '&sig='
      + base64UriEncoded + '&se=' + expires;
    if (policyName) {
      token += '&skn=' + policyName;
    }
    return token;
}

Unable to generate 'sas' Token using angular-azure-blob-service

1 Answers