快速開始-瀏覽器 - 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