快速开始_Browser.js_SDK 参考_对象存储 OSS_阿里云技术文档

下面介绍如何在Browser.js SDK中快速使用OSS服务，包括上传文件、下载文件和查看文件列表等。

注意云账号AccessKey拥有所有API访问权限，建议遵循阿里云安全最佳实践，在客户端不要使用会泄露配置的AK（AccessKeyId 和 AccessKeySecret），所以请使用STS方式（临时账号权限）给客户端授权。

STS场景说明：临时账号权限（STS）。

更多有关浏览器的使用请参考：浏览器应用

示例工程请参考：example

Bucket设置

从浏览器中直接访问OSS需要开通Bucket的CORS设置：

将allowed origins设置成 *
将allowed methods设置成 PUT, GET, POST, DELETE, HEAD
将allowed headers设置成 *
将expose headers设置成 etagx-oss-request-id

注意请将该条CORS规则设置成所有CORS规则的第一条。

快速开始_Browser.js_SDK 参考_对象存储 OSS 阿里云技术文档第1张

使用SDK

目前浏览器中不能直接进行Bucket相关的操作，例如GetBucket (ListObjects)、GetBucketLogging、GetBucketReferer等。但是可以进行Object相关的操作，例如PutObject、GetObject等。

包含SDK
在html文件的<head>中包含如下标签：
```
<script src="http://gosspublic.alicdn.com/aliyun-oss-sdk-x.x.x.min.js"></script>
					
```
想了解其他引入方式可参考安装介绍。

通过new OSS来创建client，创建后返回的是Promise，类似于callback的方式，在.then()中处理返回的结果，在.catch()中处理错误。
搭建STS Server 并从客户端获取临时授权信息
1. 为账号开通STS服务，如果已开通可以跳过，开通STS请参见STS临时授权访问OSS，具体OSS授权Policy配置参见RAM和STS授权策略（Policy）配置
2. 借助STS的SDK或API应用专属的STS签名服务。为了方便大家快速理解，OSS提供了多个语言版本的Demo程序供参考：
  - Node.js: 下载地址
  - PHP: 下载地址
  - Java: 下载地址
  - Ruby: 下载地址
  说明 Demo程序仅供STS功能实现参考。在具体的生产环境使用时，请自行开发鉴权等业务所需代码。
3. 在前端（浏览器）向搭建的STS服务发起请求，获取STS临时授权信息。
```
<script type="text/javascript">
  // OSS.urlib是sdk内部封装的发送请求的逻辑，开发者可以使用任何发送请求的库向`sts-server`发送请求
  OSS.urllib.request("http://your_sts_server/", {method: 'GET'}, (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>
							
```

上传文件

下面使用multipartUpload接口来上传文件，multipartUpload的使用请参考multipartUpload。

<body>
  <input type="file" id="file" />
  <script type="text/javascript">
    document.getElementById('file').addEventListener('change', function (e) {
      let file = e.target.files[0];
      let storeAs = 'upload-file';
      console.log(file.name + ' => ' + storeAs);
      // OSS.urlib是sdk内部封装的发送请求的逻辑，开发者可以使用任何发送请求的库向`sts-server`发送请求
      OSS.urllib.request("http://your_sts_server/", {method: 'GET'}, (err, response) => {
          if (err) {
            return alert(err);
          }
          try {
            result = JSON.parse(response);
          } catch (e) {
            return alert('parse sts response info error: ' + e.message);
          }
          let client = new OSS({
            accessKeyId: result.AccessKeyId,
            accessKeySecret: result.AccessKeySecret,
            stsToken: result.SecurityToken,
            endpoint: '<oss endpoint>',
            bucket: '<Your bucket name>'
          });
          //storeAs表示上传的object name , file表示上传的文件
          client.multipartUpload(storeAs, file).then(function (result) {
            console.log(result);
          }).catch(function (err) {
            console.log(err);
          });
        });
    });
  </script>
</body>

快速开始_Browser.js_SDK 参考_对象存储 OSS 阿里云技术文档第2张

下载文件

在浏览器中不能直接操作文件，因此采用签名URL的方式来生成文件的下载链接，用户只需要单击链接即可下载文件。

<body>
  <input type="button" id="download" value="Download" />
  <script type="text/javascript">
    document.getElementById('download').addEventListener('click', function (e) {
      let objectKey = 'test/download_file';
      let saveAs = 'download_file';
      console.log(objectKey + ' => ' + saveAs);
      // OSS.urlib是sdk内部封装的发送请求的逻辑，开发者完全可以使用任何发请求的库向`sts-server`发送请求
      OSS.urllib.request("http://your_sts_server/", {method: 'GET'}, (err, response) => {
          if (err) {
            return alert(err);
          }
          try {
            result = JSON.parse(response);
          } catch (e) {
            return alert('parse sts response info error: ' + e.message);
          }
          let client = new OSS({
            accessKeyId: result.AccessKeyId,
            accessKeySecret: result.AccessKeySecret,
            stsToken: result.SecurityToken,
            endpoint: '<oss endpoint>',
            bucket: '<Your bucket name>'
          });
          let result = client.signatureUrl(objectKey, {
            expires: 3600,
            response: {
              'content-disposition': 'attachment; filename="' + saveAs + '"'
            }
          });
          console.log(result);
          window.location = result;
        });
    });
  </script>
</body>

快速开始_Browser.js_SDK 参考_对象存储 OSS 阿里云技术文档第3张

查看文件列表

<script type="text/javascript">
OSS.urllib.request("http://your_sts_server/", {method: 'GET'}, (err, response) => {    
  if (err) {
    return alert(err);
  }

  try {
    result = JSON.parse(response);
  } catch (e) {
    return alert('parse sts response info error: ' + e.message);
  }

  let client = new OSS({
    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的开发者控制台，即可查看列举文件的结果。

快速开始_Browser.js_SDK 参考_对象存储 OSS 阿里云技术文档第4张

注意浏览器是不受信任的环境，如果把AccessKeyId和AccessKeySecret直接保存在浏览器端，存在极高的风险。建议只在测试时使用明文设置，业务应用中请使用 STS鉴权模式和自签名模式，详细说明请参考访问控制、移动端直传。

快速开始_Browser.js_SDK 参考_对象存储 OSS

快速开始

Bucket设置

使用SDK

版权声明

评论