Accessing Azure Storage from a VSTS extension


The Visual Studio Team Services (VSTS) extension framework gives you the ability to store data in the data storage of an extension. This is the ideal location for data that is retrieved or collected by the extension itself but the corresponding APIs are not accessible from outside of the extension context. If your extension requires deep interaction with external data, Azure Storage is a valid option to store data close to VSTS.

Let’s explore how to access Azure Blog Storage from your VSTS extension.

Outline

To get this scenario working you essentially need to configure your Azure Storage, to make it accessible over an HTTPS endpoint, and from JavaScript which runs in the extension.

Azure Storage (Blob)

  • In the Azure Portal start by creating an Azure Storage and a Container for Blobs with Access Type “Private”.
  • Upload/ store your data in this container. In a production scenario Azure Web Jobs could write the data to this blob container. For this demo case we’re uploading the list of countries in a JSON formatted text file to this container.
    1_ContainerBlob
  • On Storage Account level, an appropriate Shared Access Signature (SAS) according to the intended operations must be configured. This gives you a SAS token which is signed by one of the account keys and which provides only the defined access to the storage account resources.
    • The SAS token is just added as a URL parameter to the URL of the Blob: https://vstseval.blob.core.windows.net/vstsdata/countries.json<SAS token>
      2_SAS
  • Additionally, you need to configure a Cross Origin Resource Sharing  rule (CORS) to allow client side access from ‘https://<publisherid>.gallery.vsassets.io’ to the SAS URI-endpoint.
    3_CORS

With these steps, everything is prepared to access the data in the Azure Storage Blob from your VSTS extension securely.

VSTS Extension

It’s now possible for you to target the SAS endpoint URL and load the data from the extension. This JavaScript snippet works from everywhere in an extension:

$(“#loadBtn”).click(function(){
  $.ajax({url: https://vstseval.blob.core.windows.net/vstsdata/countries.json<SAS token>,
success: function(result){
$(“#loadCnt”).html(result);
}});

<div id=”loadCnt”></div>
<input type=”button” value=”Get External Content” id=”loadBtn”>

Instead of hard coding the URL to the SAS endpoint it is a much better practice to store this information in a Service Endpoint of the VSTS project. Service Endpoints allow you to manage who is allowed to access the data and to store information encrypted. Use the queryServiceEnpoints method to retrieve the information and use it in the statement above.

Here’s the result of this walk-through: A simple VSTS extension with a contribution point under the navigation node “Work”:

4_Action

Comments (0)

Skip to main content