Display Images stored in a Blob Container on a Web App using shared access signature (SAS)

Display Images in a Blob Container using Shared access signature (SAS). The access level of the container is set to private.

Every SAS is signed with a key. You can sign a SAS in one of two ways:

• With a key created using Azure Active Directory (Azure AD) credentials. A SAS that is signed with Azure AD credentials is a user delegation SAS.

• With the storage account key. Both a service SAS and an account SAS are signed with the storage account key.

Service SAS

https://docs.microsoft.com/en-us/azure/storage/blobs/sas-service-create?tabs=dotnet

Account SAS

https://docs.microsoft.com/en-us/azure/storage/common/storage-account-sas-create-dotnet?toc=%2Fazure%2Fstorage%2Fblobs%2Ftoc.json&tabs=dotnet

Will be using account SAS with the storage account key.

Trying the same using Asp.Net core 6.

Github Link : https://github.com/ElstonMisquitta88/BlobSASDemo

Create a new ASP.NET Core web app

dotnet new webapp -n AzureFriday -f net6.0
dotnet add package Azure.Storage.Blobs --version 12.10.0
dotnet dev-certs https --trust

In appsettings.json we will add the following keys to be used

  "K_StorageAccountName": "demo",
  "K_StorageAccountKey": "Key Value",
  "K_StorageAccountBlobUri": "https://<name>.blob.core.windows.net",

Code to Fetch Blobs from the container

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using Azure.Storage.Blobs;
using Azure.Storage.Blobs.Models;
using Azure.Storage.Sas;
using System;
using System.IO;
using System.Text;
using System.Threading.Tasks;
using Azure.Core;
using Azure.Identity;
using Azure.Storage;


namespace AzureFriday.Pages
{
    public class Sample1Model : PageModel
    {
        public List<string> LstBlobContents { get; set; }

        // requires using Microsoft.Extensions.Configuration;
        private readonly IConfiguration Configuration;

        public Sample1Model(IConfiguration configuration)
        {
            Configuration = configuration;
        }

        public void OnGet()
        {
            // Create a service level SAS that only allows reading from service level APIs
            AccountSasBuilder sas = new AccountSasBuilder
            {
                // Allow access to blobs
                Services = AccountSasServices.Blobs,

                // Allow access to the service level APIs
                ResourceTypes = AccountSasResourceTypes.All,

                // Access expires in 1 hour!
                ExpiresOn = DateTimeOffset.UtcNow.AddHours(1)
            };
            // Allow read access
            sas.SetPermissions(AccountSasPermissions.All);

            // Create a SharedKeyCredential that we can use to sign the SAS token
            string StorageAccountName = Configuration["K_StorageAccountName"];
            string StorageAccountKey = Configuration["K_StorageAccountKey"];
            StorageSharedKeyCredential credential = new StorageSharedKeyCredential(StorageAccountName, StorageAccountKey);

            // Build a SAS URI
            string StorageAccountBlobUri = Configuration["K_StorageAccountBlobUri"];
            UriBuilder sasUri = new UriBuilder(StorageAccountBlobUri);
            sasUri.Query = sas.ToSasQueryParameters(credential).ToString();

            // Create a client that can authenticate with the SAS URI
            string containerName = "data";
            BlobServiceClient service = new BlobServiceClient(sasUri.Uri);

            List<string> numberList = new List<string>();
            foreach (BlobItem blob in service.GetBlobContainerClient(containerName).GetBlobs())
            {
                BlobClient blobClient = service.GetBlobContainerClient(containerName).GetBlobClient(blob.Name);
                numberList.Add(blobClient.Uri.ToString());
            }
            LstBlobContents = numberList;
        }
    }
}

Code to Render Images on Page

@page
@model AzureFriday.Pages.Sample1Model
@{

    foreach (var item in Model.LstBlobContents)
    {
        <p>
        <img src=@item width="200" height="150">
        </p>
    }
}