下面介绍如何在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-x.x.x.min.js"></script>
    

    想了解其他引入方式可参考安装介绍

    通过new OSS来创建client,创建后返回的是Promise, 类似于callback的方式,在.then()中处理返回的结果,在.catch()中处理错误。

  • 搭建STS Server 并从客户端获取临时授权信息
    1. 为账号开通STS服务,如果已开通可以跳过,开通STS请参见STS开通说明, 具体OSS授权 Policy配置参见RAM和STS授权策略(Policy)配置
    2. 借助STS的SDK或API应用专属的STS签名服务。为了方便大家快速理解,提供了多个语言的版本Demo程序供参考:
      说明 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>
      
  • 查看文件列表
    <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的开发者控制台,就可以看到list文 件的结果了。



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

    下面使用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>
    


  • 下载文件

    在浏览器中不能直接操作文件,因此采用签名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>