本樣本講解在服務端通過PHP程式碼完成簽名,並且服務端設定了上傳後回調,然後通過表單直傳數據到OSS。

背景

採用服務端簽名後直傳方案有個問題:用戶上傳數據後,很多場景下,應用伺服器需要知道用戶上傳了哪些檔案以及檔案名稱,如果是圖片的話,還需要知道圖片的大小等。為此OSS提供了上傳回調方案。OSS回調完成後,應用伺服器再返回結果給客戶端。這樣服務端就可以即時了解用戶上傳了什麼檔案。

Demo

您可以通過樣例體驗服務端簽名直傳並設定上傳回調的效果:PC瀏覽器測試樣例

原理介紹

服務端簽名直傳並設定上傳回調的邏輯圖如下:

流程如下:
  1. 用戶嚮應用伺服器請求上傳Policy和回調。
  2. 應用伺服器返回上傳Policy和回調設定。
  3. 用戶直接向OSS傳送檔案上傳請求。
  4. OSS根據用戶的回調設定,發送回調請求給應用伺服器。
  5. 應用伺服器返迴響應給OSS。
  6. OSS將應用伺服器返回的內容返回給用戶。
    说明
    如果應用伺服器返回成功,那麼OSS就返回成功給用戶;如果應用伺服器返回失敗,那麼OSS也返回失敗給用戶。這樣確保了用戶上傳成功和失敗的檔案,應用伺服器都會收到通知。

簡單講,就是用戶要上傳一個檔案到OSS,而且希望上傳完畢的時候自己的應用伺服器能夠知道這件事,這時就需要設定一個回呼函數,把這件事告知用戶的應用伺服器。這樣當OSS收到用戶的上傳請求之後開始上傳,上傳完之後不會直接給用戶返回結果,而是先通知用戶的應用伺服器,然後再把結果轉達給用戶。

前提條件

  • Web伺服器已部署。
  • Web伺服器對應的網域名稱可通過公網訪問。

步驟 1:下載並安裝Plugload

Plupload是一款簡單易用且功能強大的檔案上傳工具, 支援多種上傳方式,包括html5、flash、silverlight,、html4。它會智能檢測當前環境,選擇最適合的上傳方式,並且會優先採用Html5方式。請參見Plupload官網進行下載和安裝。

步驟 2:下載應用伺服器代碼

步驟 3:修改設定檔

本樣本採用PHP編寫。將下載包解壓後,修改以下檔案:
  • php/get.php檔案:
    1. $id= ‘<yourAccessKeyId>’; $key= <yourAccessKeySecrety’; $host = http://post-test.oss-cn-hangzhou.aliyuncs.com‘; $callbackUrl = “http://oss-demo.aliyuncs.com:23450“; $callback_param = array(‘callbackUrl’=>$callbackUrl, ‘callbackBody’=>’filename=${object}&size=${size}&mimeType=${mimeType}&height=${imageInfo.height}&width=${imageInfo.width}’, ‘callbackBodyType’=>”application/x-www-form-urlencoded”);
    • $id:您的AccessKeyId
    • $key:您的AessKeySecret
    • $host:格式為BucketName.Endpoint,例如post-test.oss-cn-hangzhou.aliyuncs.com
      说明
      關於Endpoint的介紹,請參見Endpoint(訪問網域名稱)
    • $callbackUrl:設定回調URL,即回調伺服器位址,用於處理應用伺服器與OSS之前的通訊。例如http://abc.com:8080/callback.php。OSS會在檔案上傳完成後,把檔案上傳資訊通過此回調URL發送給應用伺服器。
    • $callback_param:選擇性參數,用於設定callbackBody和callbackBodyType等選項。
  • upload.js檔案

    將變數severUrl改成伺服器部署的地址,用於處理瀏覽器和應用伺服器之間的通訊。例如http://abc.com:8080/oss-h5-upload-js-php-callback/get.php

步驟 4:設定CORS

HTML表單直接上傳到OSS會產生跨域請求。為了瀏覽安全,需要為Bucket設定跨域規則(CORS),支援Post方法。

具體操作步驟請參見設定跨域訪問。設定如下圖所示:



说明
在低版本IE瀏覽器,Plupload會以Flash方式執行。您需要設定crossdomain.xml ,設定方法請參見OSS Web直傳—使用Flash上傳

步驟 5:設定上傳回調解析

  • PHP:
    • 應用伺服器回調程式碼:下載地址
    • 運行方法:將解壓包部署到Apache環境下,因為PHP本身語言的特點,某些數據頭部的獲取會依賴於環境。請參考例子根據實際環境進行修改。
  • Java:
    • 應用伺服器回調程式碼:下載地址
    • 運行方法:解壓後運行java -jar oss-callback-server-demo.jar 9000(9000為啟動並執行通信埠,可以自己指定)
      说明
      注意這個jar例子在java 1.7運行通過,如果有問題可以自己依據提供的代碼進行修改。這是一個maven項目。
  • Python:
    • 應用伺服器回調程式碼:下載地址
    • 運行方法:解壓後直接運行python callback_app_server.py即可,程式自實現了一個簡單的http server,運行該程式可能需要安裝rsa的依賴。
  • Ruby:
    • 應用伺服器回調程式碼:下載地址
    • 運行方法: ruby aliyun_oss_callback_server.rb

步驟 6:體驗上傳回調

  1. 將應用伺服器代碼zip包解壓到web根目錄下。
  2. 在Web瀏覽器中輸入<Web應用伺服器位址>/oss-h5-upload-js-php-callback/index.html,例如http://abc.com:8080/oss-h5-upload-js-php-callback/index.html
  3. 選擇一個或多個檔案進行上傳。
  4. 上傳成功後,通過控制台查看上傳結果。

核心代碼解析

本樣本的更多細節,如上傳簽名、設定隨機檔案名等請參見服務端簽名直傳—核心代碼解析

代碼要添加的內容如下:
  1. new_multipart_params = { key : key + ${filename}’, policy’: policyBase64, OSSAccessKeyId’: accessid, success_action_status : 200’, //讓服務端返回200,不設定則預設返回204 ‘callback’:  callbackbody, ‘signature’: signature, };

上述的callbackbody是PHP服務端返回的。在本例中,從PHP服務端獲取到的內容如下:

  1. {“accessid”:”6MKOqxGiGU4AUk44”,“host”:”http://post-test.oss-cn-hangzhou.aliyuncs.com“,“policy”:”eyJleHBpcmF0aW9uIjoiMjAxNS0xMS0wNVQyMDo1MjoyOVoiLCJjdb25kaXRpb25zIjpbWyJjdb250ZW50LWxlbmd0aC1yYW5nZSIsMCwxMDQ4NTc2MDAwXSxbInN0YXJ0cy13aXRoIiwiJGtleSIsInVzZXItZGlyXC8iXV19”,“signature”:”VsxOcOudxDbtNSvz93CLaXPz+4s=”,“expire”:1446727949,“callback”:”eyJjYWxsYmFja1VybCI6Imh0dHA6Ly9vc3MtZGVtby5hbGl5dW5jcy5jdb206MjM0NTAiLCJjYWxsYmFja0hvc3QiOiJvc3MtZGVtby5hbGl5dW5jcy5jdb20iLCJjYWxsYmFja0JvZHkiOiJmaWxlbmFtZT0ke29iamVjdH0mc2l6ZT0ke3NpemV9Jm1pbWVUeXBlPSR7bWltZVR5cGV9JmhlaWdodD0ke2ltYWdlSW5mby5oZWlnaHR9JndpZHRoPSR7aW1hZ2VJdbmZvLndpZHRofSIsImNhbGxiYWNrQm9keVR5cGUiOiJhcHBsaWNhdGlvbi94LXd3dy1mb3JtLXVybGVuY29kZWQifQ==”,”dir”:”user-dirs/“}

上面提到callbackbody,就是上述返回結果裡面的callback內容經過base64編碼後生成的。

解碼後的內容如下:

  1. {“callbackUrl”:”http://oss-demo.aliyuncs.com:23450“,“callbackHost”:”oss-demo.aliyuncs.com”,“callbackBody”:”filename=${object}&size=${size}&mimeType=${mimeType}&height=${imageInfo.height}&width=${imageInfo.width}”,“callbackBodyType”:”application/x-www-form-urlencoded”}

內容解析如下:

  • CallbackUrl:OSS往這個機器發送的URL請求。
  • callbackHost:OSS發送這個請求時,要求標頭部所帶的Host頭。
  • callbackBody:OSS請求時,發送給應用伺服器的內容,可以包括檔案的名稱、大小、類型。如果是圖片,可以是圖片的高度、寬度。
  • callbackBodyType:請求發送的Content-Type。
樣本程式只是完成了如何檢查應用伺服器收到的簽名, 您需要自行增加對應用伺服器收到回調的內容的格式解析 。
说明

您的應用伺服器收到的回調請求有可能沒有Authotization頭,這是因為有些 Web應用伺服器會將Authorization頭自行解析掉,比如apache2,因此需要設定成不解析這個頭部。以apache2為例,具體設定方法如下:

  1. 開啟rewrite模組,執行命令:a2enmod rewrite
  2. 修改設定檔 /etc/apache2/apache2.conf(根據apache2的安裝路徑不同會有不一樣)。將Allow Override設定成All,然後添加以下兩個配置項:
    • RewriteEngine on
    • RewriteRule .* - [env=HTTP_AUTHORIZATION:%{HTTP:Authorization},last]