Quick start: browser - SDK Reference| Alibaba Cloud Documentation Center

This document describes how to quickly access the OSS service in the BrowserJS-SDK, including uploading/downloading files and viewing file lists.

Note: Since the Alibaba Cloud account AccessKey gives you permission to access all APIs, we recommend that you not use the AK that can cause configuration leak by following the Alibaba Cloud Security Best Practices. Therefore, you must create and use STS (temporary account permission) to authorize the client.

For demo project, see example.

Bucket settings

The CORS settings of the bucket must be enabled to access OSS directly in a browser:

Set allowed origins to *
Set allowed methods to PUT, GET, POST, DELETE, and HEAD
Set allowed headers to *
Set expose headers to ETag x-oss-request-id

Note: Set the CORS rule as the first option.

cors

Use the SDK

Currently, browsers do not support direct bucket-related operations (for example, list buckets, and get/set bucket logging/referer/website/cors), but support object-related operations (for example, upload/download files, and view file lists).

Include the SDK

First, include the following tags in the <head> of the HTML file:

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

For more introduction methods, see Installation.

Create a client using new OSS.Wapper(). OSS.Wrapper provides an asynchronous API similar to the callback method to process the returned results in .then() and process errors in .catch().

Build an STS Server and obtain temporary authorization information from the client

Activate the STS service for your account. If the service has been activated, you can skip this step. To activate the STS service, see STS Activation. For more information on how to configure OSS authorization policy, see RAM and STS authorization policy configuration.
Apply the exclusive STS signature service through the STS SDK or API. To help you quickly get started with the STS service, we provide demo programs in multiple languages:
- NodeJS: Download address
- PHP: Download address
- Java: Download address
- Ruby: Download address
  
  Note: The demo program is only used as reference for STS feature implementation. To implement STS features in the production environment, you must develop codes required for authentication and other functions.

Initiate requests to the STS service built in the frontend (browser) to obtain the STS temporary authorization information.

<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>

View file lists

<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>

The parameter region refers to the region used when you applied for OSS, such as oss-cn-hangzhou. The completeregion list can be viewed in OSS Nodes.

Open the HTML file in the browser, and open the Chrome Developer Console to view the list filesresult.

list

Note: A browser is an untrusted environment. An extremely high risk occurs if you store the AccessKeyID and AccessKeySecret in a browser. We recommend that you only use plaintext settings for testing purposes. STS authentication mode or self-signed mode is recommended for business applications. For more information, see Resource Access Management and Direct Transfer on a Mobile Device.

Upload files

We use the multipartUpload API to upload files. For more information about multipartUpload, see Multipart upload.

<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>'
          });
          //storeAs indicates the uploaded object name and file indicates the uploaded file
          client.multipartUpload(storeAs, file).then(function (result) {
            console.log(result);
          }).catch(function (err) {
            console.log(err);
          });
        });
    });
  </script>
</body>

upload

Download files

You cannot directly operate on files in the browser. Therefore, the download link of a file is generated using the signed URL method, andyou can download the file by clicking the link.

<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