透過共用存取簽章上傳Azure Blob

  一般來說,在上傳檔案到Azure時,會先將檔案傳到本地的網站上,再由網站將檔案內容傳到Azure上,如下圖,網站扮演著Proxy Service的角色。

sas-storage-fe-proxy-service
圖片來源:azure.microsoft.com

這樣的方式的好處是,安全性高(金鑰只有網站知道),且可以依商務邏輯調整。但相對的在頻寬及處理的須付出相對的成本。
 
   另一種方式,不透過網站,直接由Client端上傳到Azure上,但這樣的方式要顧慮到金鑰的存取。我們不可能將金鑰放在Client端來使用,這樣太危險了,若是網站應用程式,只要按一下F12就可以輕鬆取得。針對此問題,azure有一解決方案,透過金鑰,依據所需權限、使用期限等..來產生Shared Access Token(簡稱 SAS)。如下圖

sas-storage-provider-service
圖片來源:azure.microsoft.com

實作-透過共用存取簽章上傳


1.取得SAS Token

image_thumb2[1]

2.加入Cross Site Rule

本例為透過jQuery ajax上傳方式,需加入AllowedOrigins才可以上傳到外部網站上。
ps:此為一次性的設定

image_thumb3

3.後端Controller取得SasToken及Container Url

image_thumb

4.前端程式

關於Client程式要直接上傳到Azure,在request的header及body需作一些設定及格式的包裝,例如:header要加上x-ms-blob-content-type及body要加上<BlockList>..等。不過這些細節處理,在github上已有相關的套件可以使用。本例使用 jquery-blobuploader

View

image_thumb1

Script

image_thumb2

測試程式

image_thumb4
  1. 第一次使用,先執行 [Add Cros] 將Cross Site Rule加入。
  2. 上傳檔案,開始上傳時,底下會有progress bar。

範例程式:

https://github.com/kimx/StorageSharedAccessSignatureLab


參考來源


https://azure.microsoft.com/zh-tw/documentation/articles/storage-dotnet-shared-access-signature-part-1/
http://gauravmantri.com/2013/12/01/windows-azure-storage-and-cors-lets-have-some-fun/
https://github.com/orcame/jquery-blobuploader

這個網誌中的熱門文章

[TFS] 分支與合併

[.NET Core] 將專案發行至IIS