快速開始-瀏覽器 - SDK參考

下面介紹如何在BrowserJS-SDK中快速使用訪問OSS服務，包括上傳/下載檔案和查看檔案清單。

注意：雲帳號AccessKey擁有所有API存取權限，建議遵循阿里雲安全最佳實務，在用戶端不要使用會泄露配置的ak，所以請建立並使用STS方式（臨時帳號許可權）給用戶端授權。

STS場景說明：臨時帳號許可權（STS）
更多有關瀏覽器的使用請參考：瀏覽器應用
樣本工程請參考：example

Bucket設定

從瀏覽器中直接存取OSS需要開通Bucket的CORS設定：

將allowed origins設定成 *
將allowed methods設定成 PUT, GET, POST, DELETE, HEAD
將allowed headers設定成 *
將expose headers設定成 ETag x-oss-request-id

注意：請將該條CORS規則設定成所有CORS規則的第一條。

使用SDK

目前瀏覽器中不能直接進行Bucket相關的操作（例如list buckets, get/set bucket logging/referer/website/cors）。但是可以進行Object相關的操作（例如上傳/下載檔案，查看檔案清單等）。

包含SDK

首先在html檔案的<head>中包含如下標籤：

 
  <script src="http://gosspublic.alicdn.com/aliyun-oss-sdk-4.4.4.min.js"></script>

想瞭解其他引入方式可參考安裝介紹。

通過new OSS.Wapper()來建立client，OSS.Wrapper提供了非同步介面，類似於callback的方式，在.then()中處理返回的結果，在.catch()中處理錯誤。

搭建STS Server 並從用戶端獲取臨時授權資訊

為帳號開通STS服務，如果已開通可以跳過，開通STS請參見STS開通說明。
藉助STS的SDK或API應用專屬的STS簽名服務。為了方便大家快速理解，提供了多個語言的版本Demo程式供參考：
- NodeJS: 下載地址
- PHP: 下載地址
- Java: 下載地址
- Ruby: 下載地址
  
  說明：Demo程式僅供STS功能實現參考，生產環境使用請自行開發鑒權等業務所需代碼。

在前端（瀏覽器）中向搭建的STS服務發起請求，獲取STS臨時授權資訊。

   
    <script type="text/javascript">
    OSS.urllib.request("http://your_sts_server/",
                       {method: 'GET'}, 
                       function (err, response) {
     if (err) {
       return alert(err);
     }
     try {
       result = JSON.parse(response);
     } catch (e) {
       errmsg = 'parse sts response info error: ' + e.message;
       return alert(errmsg);
     }
     // console.log(result)
    })
    </script>

查看檔案清單

 
  <script type="text/javascript">
  OSS.urllib.request("http://your_sts_server/",
                        {method: 'GET'}, 
                        function (err, response) {
        if (err) {
          return alert(err);
        }
        try {
          result = JSON.parse(response);
        } catch (e) {
          return alert('parse sts response info error: ' + e.message);
        }
        var client = new OSS.Wrapper({
          accessKeyId: result.AccessKeyId,
          accessKeySecret: result.AccessKeySecret,
          stsToken: result.SecurityToken,
          endpoint: '<oss endpoint>',
          bucket: '<Your bucket name>'
        });
  
        client.list({
          'max-keys': 10
        }).then(function (result) {
          console.log(result);
        }).catch(function (err) {
          console.log(err);
        });
  });
  </script>

其中region參數是指您申請OSS服務時的區域，例如oss-cn-hangzhou。完整的區域列表可以在OSS服務節點查看。

在瀏覽器中開啟html檔案，然後開啟Chrome的開發人員控制台，就可以看到list文件的結果了。

list

注意：瀏覽器是不受信任的環境，如果把AccessKeyId和AccessKeySecret直接保存在瀏覽器端，存在極高的風險。建議只在測試時使用明文設定，業務應用中請使用 STS鑒權模式 和 自簽名模式 ,詳細說明請參考存取控制、移動端直傳。

上傳檔案

下面使用multipartUpload介面來上傳檔案：

 
  <body>
    <input type="file" id="file" />
    <script type="text/javascript">
      document.getElementById('file').addEventListener('change', function (e) {
        var file = e.target.files[0];
        var storeAs = 'upload-file';
        console.log(file.name + ' => ' + storeAs);
        OSS.urllib.request("http://your_sts_server/",
                        {method: 'GET'}, 
                        function (err, response) {
            if (err) {
              return alert(err);
            }
            try {
              result = JSON.parse(response);
            } catch (e) {
              return alert('parse sts response info error: ' + e.message);
            }
            var client = new OSS.Wrapper({
              accessKeyId: result.AccessKeyId,
              accessKeySecret: result.AccessKeySecret,
              stsToken: result.SecurityToken,
              endpoint: '<oss endpoint>',
              bucket: '<Your bucket name>'
            });
  
            client.multipartUpload(storeAs, file).then(function (result) {
              console.log(result);
            }).catch(function (err) {
              console.log(err);
            });
          });
      });
    </script>
  </body>

upload

下載檔案

在瀏覽器中不能直接操作檔案，因此採用簽名URL的方式來組建檔案的下載連結，使用者只需要單擊連結就可以下載檔案。

 
  <body>
    <input type="button" id="download" value="Download" />
    <script type="text/javascript">
      document.getElementById('download').addEventListener('click', function (e) {
        var objectKey = 'test/download_file';
        var saveAs = 'download_file';
        console.log(objectKey + ' => ' + saveAs);
        OSS.urllib.request("http://your_sts_server/",
                        {method: 'GET'}, 
                        function (err, response) {
            if (err) {
              return alert(err);
            }
            try {
              result = JSON.parse(response);
            } catch (e) {
              return alert('parse sts response info error: ' + e.message);
            }
            var client = new OSS.Wrapper({
              accessKeyId: result.AccessKeyId,
              accessKeySecret: result.AccessKeySecret,
              stsToken: result.SecurityToken,
              endpoint: '<oss endpoint>',
              bucket: '<Your bucket name>'
            });
            var result = client.signatureUrl(objectKey, {
              expires: 3600,
              response: {
                'content-disposition': 'attachment; filename="' + saveAs + '"'
              }
            });
            console.log(result);
            window.location = result;
          });
      });
    </script>
  </body>

download_with_sts