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

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


圖片來源:azure.microsoft.com

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


圖片來源:azure.microsoft.com

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

1.取得SAS Token

2.加入Cross Site Rule

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

3.後端Controller取得SasToken及Container Url

4.前端程式

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

View



Script



測試程式

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