如何使用服务主体使用C＃访问Angular中的Azure Blob容器映像

如何解决如何使用服务主体使用C＃访问Angular中的Azure Blob容器映像

我们如何使用“服务主体（OAuth）”身份验证来代替连接字符串，SAS令牌和其他方法。

服务主体通常从Azure提供“客户端ID”，“客户端机密”和“租户ID”值。

解决方法

解决此问题的步骤如下：

• 生成OAuth令牌
• 创建令牌凭证对象。
• 获取Azure云容器参考。
• 获取blob参考，读取流并转换为基本64个字节
• 在Angular 6+页面中显示字节数组图像

命名空间：

using Microsoft.IdentityModel.Clients.ActiveDirectory;
using Microsoft.WindowsAzure.Storage;
using Microsoft.WindowsAzure.Storage.Auth;
using Microsoft.WindowsAzure.Storage.Blob;

步骤1：生成OAuth令牌-使用客户端ID和客户端机密，生成访问令牌。我们稍后将使用它进行身份验证。

public string GetUserOAuthToken()
{
    const string ResourceId = "https://storage.azure.com/";
    const string AuthInstance = "https://login.microsoftonline.com/{0}/";
    string authority = string.Format(CultureInfo.InvariantCulture,AuthInstance,ConfigHelper.AzStorAccTenantId);
    AuthenticationContext authContext = new AuthenticationContext(authority);
    var clientCred = new ClientCredential(ConfigHelper.AzStorAccClientId,ConfigHelper.AzStorAccClientSecret);
    AuthenticationResult result = authContext.AcquireTokenAsync(ResourceId,clientCred).Result;
    return result.AccessToken;
}

第2步：创建令牌凭证对象

public bool GenerateTokenCredentials()
{
    if (string.IsNullOrEmpty(authenticationError))
    {
        string authenticationResult = GetUserOAuthToken();
        if (string.IsNullOrEmpty(authenticationResult))
        {
            return false;
        }
        else
        {
            _tokenCredentials = new TokenCredential(authenticationResult);
            //_tokenCredentials is a global object
            return true;
        }
    }
    else
    {
        return false;
    }
}

第3步：获取Azure云容器参考

public CloudBlobContainer CreateCloudBlobContainer()
{
    try
    {
        GenerateTokenCredentials();
        StorageCredentials storageCredentials = new StorageCredentials(_tokenCredentials);
        CloudStorageAccount cloudStorageAccount = new CloudStorageAccount(storageCredentials,ConfigHelper.AzStorAccName,ConfigHelper.AzStorageEndPoint,useHttps: true);
        CloudBlobClient blobClient = cloudStorageAccount.CreateCloudBlobClient();
        return blobClient.GetContainerReference(ConfigHelper.AzStorAccBlobContName);
    }
    catch (Exception ex)
    {

    }
    return null;
}

第4步：获取Blob参考，读取流，并转换为基本64字节

public async Task<string> DownloadFile(string blobFileName)
{
    try
    {
        CloudBlobContainer blobContainer = CreateCloudBlobContainer();
        var blob = blobContainer.GetBlobReference(blobFileName);
        blob.FetchAttributes();
        var stream = await blob.OpenReadAsync();
        var byteData = ReadFully(stream);
        string byteImageUrl = string.Format("data:image/{0};base64," + Convert.ToBase64String(byteData),GetBlobImageExtension(blobFileName));
        return byteImageUrl;
    }
    catch (Exception ex)
    {

    }
    return string.Empty;
}

Helper私有方法

private byte[] ReadFully(Stream input)
{
    byte[] buffer = new byte[16 * 1024];
    using (MemoryStream ms = new MemoryStream())
    {
        int read;
        while ((read = input.Read(buffer,buffer.Length)) > 0)
        {
            ms.Write(buffer,read);
        }
        return ms.ToArray();
    }
}

private string GetBlobImageExtension(string blobFileName)
{
    string extension = Path.GetExtension(blobFileName).Trim().ToLower().Replace(".",string.Empty);
    string formattedExtensionForByteArray = !string.IsNullOrEmpty(extension) ? extension.Equals("svg") ? extension + "+xml" : extension : string.Empty;
    return formattedExtensionForByteArray;
}

步骤5：在Angular 6+中显示字节数组图像

<img [src]="LogoFileName" class="logo" />

• 打字稿

LogoFileName: SafeResourceUrl;
this.LogoFileName = this.sanitizer.bypassSecurityTrustResourceUrl(responseLogoFileName);

这是使用Azure Blobs容器映像并显示它们而不将其下载到驱动器的完整工作示例。