Uploading file into azure blob storage using Azure Keyvault credentials with NodeJS and React - Part 1

Hello everyone, in this article I will talk about how we can upload files into azure blob storage using azure keyvault credentials.  

There are multiple ways we can connect to Azure Blob from a webapp(eg. react). Connecting to AzureBlob with static credential is possible directly from React App itself. 

But when we are trying to get the credential stored in Azure Keyvault and using that credential to get access to blob storage then we will need a middle layer like Java or Node etc.

Here I will show an end to end example . First I will create a node application and expose a service which can be called from React/Angular or any application which will allow user select files and upload them into blob storage directly.

Lets get started :

Here is the folder structure we have for the Node application.

There are some dependencies we need to install before we begin. 

My package.json now looks like this :

{

  "name": "azure-blob",

  "version": "1.0.0",

  "description": "",

  "main": "server.js",

  "scripts": {

    "test": "echo \"Error: no test specified\" && exit 1"

  },

  "author": "",

  "license": "ISC",

  "dependencies": {

    "@azure/storage-blob": "^12.0.0",

    "adal-node": "^0.2.1",

    "azure-keyvault": "^3.0.5",

    "azure-storage": "^2.10.3",

    "body-parser": "^1.19.0",

    "express": "^4.17.1",

    "into-stream": "^5.1.1",

    "multer": "^1.4.2"

  }

}

We need express for starting the server, body-parser/into-stream/multer for handling request body / incoming file from web layer. Rest for Azure Keyvault and Blob storage

Under config folder we have AzureConfig.js file , where we are storing some static values

module.exports = Object.freeze({

    clientId:'XXXXX-XXXX-XXXX-XXXXX-XXXXXXXXX',

    clientSecret:'XXXxxxxXXXXxxxxXXXXXXxxxxxxXXXXXXxxxx',

    vaultUri:'https://example-keyvault.com',

    path:'myFolder'

})

Please replace these details with your own. Now let's write server.js, which will handle key-vault authentication as well as expose file upload service.

Import important dependencies :

const express = require('express')

const app = express()

const port = process.env.PORT || 3001

const multer = require('multer')

const fs = require('fs')

const path = require('path')

const {

Aborter,

BlobURL,

BlockBlobURL,

ContainerURL,

ServiceURL,

StorageURL,

SharedKeyCredential,

uploadFileToBlockBlob

} = require('@azure/storage-blob')

Set up disk storage :

const storage = multer.diskStorage({

destination: function (req,file,cb){

cb(null,'./uploads')

},

filename:function (req,file,cb) {

var d = new Date()

var n = d.getTime()

const filename = file.originalname

cb(null,filename)

}

})

const upload = multer({storage:storage})

Will use this upload handler while exposing web service.

Now we will import Azure config while where we have clientId, clientSecret etc details. Which will help us for authentication while we will try to get the azure keyvault details

const constants = require('./config/Azure-Config')

const KeyVault = require('azure-keyvault')

var AuthenticationContext = require('adal-node').AuthenticationContext

const authenticator = function (challange,callback) {

var context = new AuthenticationContext(challange.authorization)

return context.acquireTokenWithClientCredentials(challange.resource,constants.clientId,

constants.clientSecret,function (err,tokenResponse) {

if (err) throw err;

var authorizationValue = tokenResponse.tokenType + ' ' + tokenResponse.accessToken

return callback(null,authorizationValue)

})

}

const getKeyvaultDetails = async () => {

return new Promise((resolve,reject)=>{

var credentials = new KeyVault.KeyVaultCredentials(authenticator)

var client = new KeyVault.KeyVaultClient(credentials)

const secretName = "some-name"

secretVersion = ''

client.getSecret(constants.vaultUri,secretName,secretVersion).then((result)=>{

resolve(result)

})

.catch(err => {

reject(err)

})

})

}

After getting the KeyVault details, we will try to upload the file to node layer first from the UI , then we will transfer the file to AzureBlob and finally we will delete the local(Local to node server) file reference.

const uploadFileToLocal = async (req,res,next,formattedResponse)=> {

const containerName = "folderName"

const sharedKeyCredential = new SharedKeyCredential(formattedResponse.AccountName,formattedResponse.AccountKey)

const pipeline = StorageURL.newPipeline(sharedKeyCredential)

const serviceURL = new ServiceURL(

//formattedResponse.url replace with the key for which you receive the destination URL,this is just an example

`${formattedResponse.url}`,

pipeline

)

const containerURL = ContainerURL.fromServiceURL(serviceURL,containerName)

const file = req.file

const blobName = file.originalname

const blobURL = BlobURL.fromContainerURL(containerURL,blobName)

const blockBlobURL = BlockBlobURL.fromBlobURL(blobURL)

const filePath = path.join('./uploads/',file.originalname)

const uploadBlobResponse = await uploadFileToBlockBlob(Aborter.none,filePath,blockBlobURL)

console.log(`Request Status : ${uploadBlobResponse}`)

return filePath

}

const fileUpload = async(req,res,next) => {

try {

const response = await getKeyvaultDetails()

const formattedResponse = parseKeyVaultResponse(response)

const filePath = await uploadFileToLocal(req,res,next,formattedResponse)

fs.unlinkSync(filePath)

const reply = {success:true}

return res.json(reply)

} catch (error) {

next(error)

}

}

Finally expose the endpoint from Node application and start express server

app.post('/upload/file',upload.single('file'),fileUpload)

app.listen(port,() => console.log(`Server started on port ${port}`))

And we are done from NodeJS end, our application backend is ready and able to transfer file to AzureBlob by validating KeyVault info as well.

Next our job is to Create a React application which will call this endpoint and user will be able to upload file to node layer, so that flow is completed.

Continue to Part 2