feat: handle browser compatibility alone

ali-sdk · Oct 25, 2017 · c50cc9e · c50cc9e
1 parent 984baa1
commit c50cc9e
Show file tree

Hide file tree

Showing 31 changed files with 54,837 additions and 11 deletions.
diff --git a/.gitignore b/.gitignore
@@ -34,3 +34,5 @@ yarn.lock
 
 #mac temp file
 .DS_Store
+/example/node_modules/
+/example/public/index.js
diff --git a/browser-build.js b/browser-build.js
@@ -2,6 +2,7 @@
 
 var path = require('path');
 var pkg = require('./package.json');
+var fs = require('fs');
 
 var license = [
   '// Aliyun OSS SDK for JavaScript v' + pkg.version,
@@ -17,6 +18,8 @@ function build(options, callback) {
 
   console.error('Building with options: %j', options);
 
+  fs.writeFileSync(path.resolve(__dirname + '/lib/browser/version.js')
+    , 'exports.version="' + pkg.version+'"');
   var browserify = require('browserify');
   var aliasify = require('aliasify');
   var babelify = require('babelify');
@@ -26,12 +29,12 @@ function build(options, callback) {
     fullPaths: false,
     standalone: 'OSS'
   };
-  browserify(brOpts).add('./browser.js')
+  browserify(brOpts).add('./lib/browser.js')
     .transform(babelify, {
       "global": true,
       "presets": ["es2015"],
       "plugins": ["transform-runtime"],
-      "only": ['lib/*', 'node_modules/co-gather/*'],
+      "only": ['lib/*', 'node_modules/co-gather/*', 'shims/*'],
     }).transform(aliasify, {
       global: true,
       aliases: {

diff --git a/example/README.md b/example/README.md
@@ -0,0 +1,58 @@
+# OSS in Browser
+
+Play with OSS right in the browser!
+
+![Demo](screenshot.png?raw=true "OSS in Browser")
+
+## Browser support
+
+- IE >= 10 & Edge
+- Major versions of Chrome/Firefox/Safari
+- Major versions of Android/iOS/WP
+
+## Setup
+
+### Bucket setup
+
+As browser-side javascript involves CORS operations. You need to setup
+your bucket CORS rules to allow CORS operations:
+
+- set allowed origins to '*'
+- allowed methods to 'PUT, GET, POST, DELETE, HEAD'
+- set allowed headers to '*'
+- expose 'ETag' in expose headers
+
+### STS setup
+
+As we don't want to expose the accessKeyId/accessKeySecret in the
+browser, a [common practice][oss-sts] is to use STS to grant temporary
+access.
+
+### App setup
+
+Fill in your appServer address and bucket name in `app.js`:
+
+```js
+var appServer = '<your STS app server>';
+var bucket = '<your bucket name>';
+var region = 'oss-cn-hangzhou';
+```
+
+Build the JS file
+
+```
+    npm install && webpack
+``` 
+
+
+Then set env and start the server
+
+```
+   ALI_SDK_STS_ID={your sts accessKeyId} ALI_SDK_STS_SECRET={your sts accessKeySecret} ALI_SDK_STS_ROLE={your rolearn} node server/app.js
+```
+
+Open the `http://localhost:3000` in browser
+
+
+[node-sts-app-server]: https://github.com/rockuw/node-sts-app-server
+[oss-sts]: https://help.aliyun.com/document_detail/oss/practice/ram_guide.html
diff --git a/example/index.html b/example/index.html
@@ -0,0 +1,114 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>OSS in Browser</title>
+  <link rel="stylesheet" href="static/bootstrap.min.css" />
+  <link rel="stylesheet" href="static/style.css" />
+  <script src="static/index.js"></script>
+</head>
+<body>
+  <div id="main">
+    <div class="page-header">
+      <h1>OSS <small>in</small> Browser</h1>
+    </div>
+    <table>
+      <tr>
+        <td>
+          <div class="panel panel-primary">
+            <div class="panel-heading">Upload file</div>
+            <div class="panel-body">
+              <form action="" class="form-horizontal">
+                <div class="form-group">
+                  <label>Select file</label>
+                  <input type="file" id="file" />
+                </div>
+                <div class="form-group">
+                  <label>Store as</label>
+                  <input type="text" class="form-control" id="object-key-file" value="object" />
+                </div>
+                <div class="form-group">
+                  <input type="button" class="btn btn-primary" id="file-button" value="Upload" />
+                </div>
+              </form>
+              <br />
+              <div class="progress">
+                <div id="progress-bar"
+                     class="progress-bar"
+                     role="progressbar"
+                     aria-valuenow="0"
+                     aria-valuemin="0"
+                     aria-valuemax="100" style="min-width: 2em;">
+                  0%
+                </div>
+              </div>
+            </div>
+          </div>
+        </td>
+        <td>
+          <div class="panel panel-success">
+            <div class="panel-heading">Upload content</div>
+            <div class="panel-body">
+              <form action="" class="form-horizontal">
+                <div class="form-group">
+                  <label>Content</label>
+                  <textarea class="form-control" id="file-content" rows="3">Hello, OSS!</textarea>
+                </div>
+                <div class="form-group">
+                  <label>Store as</label>
+                  <input type="text" class="form-control" id="object-key-content" value="object" />
+                </div>
+                <div class="form-group">
+                  <input type="button" class="btn btn-primary" id="content-button" value="Save" />
+                </div>
+              </form>
+            </div>
+          </div>
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <div class="panel panel-info">
+            <div class="panel-heading">List files</div>
+            <div class="panel-body">
+              <table class="table table-striped" id="list-files-table">
+                <tr>
+                  <th>Key</th>
+                  <th>Size</th>
+                  <th>LastModified</th>
+                </tr>
+              </table>
+              <input type="button" class="btn btn-primary" id="list-files-button" value="Refresh" />
+            </div>
+          </div>
+        </td>
+        <td>
+          <div class="panel panel-warning">
+            <div class="panel-heading">Download file</div>
+            <div class="panel-body">
+              <form action="" class="form-horizontal">
+                <div class="form-group">
+                  <label>Object key</label>
+                  <input type="text" class="form-control" id="dl-object-key" value="object" />
+                </div>
+                <div class="form-group">
+                  <label>Save as</label>
+                  <input type="text" class="form-control" id="dl-file-name" value="filename" />
+                </div>
+                <div class="form-group">
+                  <input type="button" class="btn btn-primary" id="dl-button" value="Download" />
+                </div>
+              </form>
+            </div>
+          </div>
+        </td>
+      </tr>
+      <tr>
+        <td colspan="2">
+          Powered by
+          <a href="https://www.aliyun.com/product/oss">OSS</a> &
+          <a href="https://github.com/ali-sdk/ali-oss">ali-oss</a></td>
+      </tr>
+    </table>
+  </div>
+</body>
+</html>
diff --git a/example/index.js b/example/index.js
@@ -0,0 +1,141 @@
+'use strict';
+// require("babel-polyfill")
+
+var $ = require('jquery');
+var OSS = require('..');
+
+var appServer = '/sts';
+var bucket = '<bucket-name>';
+var region = 'oss-cn-hangzhou';
+
+var Buffer = OSS.Buffer;
+var OSS = OSS.Wrapper;
+var STS = OSS.STS;
+
+// Play without STS. NOT SAFE! Because access key id/secret are
+// exposed in web page.
+
+// var client = new OSS({
+//   region: 'oss-cn-hangzhou',
+//   accessKeyId: '<access-key-id>',
+//   accessKeySecret: '<access-key-secret>',
+//   bucket: '<bucket-name>'
+// });
+//
+// var applyTokenDo = function (func) {
+//   return func(client);
+// };
+
+var applyTokenDo = function (func) {
+  var url = appServer;
+  return $.ajax({
+    url: url
+  }).then(function (result) {
+    var creds = result;
+    var client = new OSS({
+      region: region,
+      accessKeyId: creds.AccessKeyId,
+      accessKeySecret: creds.AccessKeySecret,
+      stsToken: creds.SecurityToken,
+      bucket: bucket
+    });
+
+    return func(client);
+  });
+};
+
+var progress = function (p) {
+  return function (done) {
+    var bar = document.getElementById('progress-bar');
+    bar.style.width = Math.floor(p * 100) + '%';
+    bar.innerHTML = Math.floor(p * 100) + '%';
+    done();
+  }
+};
+
+var uploadFile = function (client) {
+  var file = document.getElementById('file').files[0];
+  var key = document.getElementById('object-key-file').value.trim() || 'object';
+  console.log(file.name + ' => ' + key);
+
+  return client.multipartUpload(key, file, {
+    progress: progress
+  }).then(function (res) {
+    console.log('upload success: %j', res);
+    return listFiles(client);
+  });
+};
+
+var uploadContent = function (client) {
+  var content = document.getElementById('file-content').value.trim();
+  var key = document.getElementById('object-key-content').value.trim() || 'object';
+  console.log('content => ' + key);
+
+  return client.put(key, new Buffer(content)).then(function (res) {
+    return listFiles(client);
+  });
+};
+
+var listFiles = function (client) {
+  var table = document.getElementById('list-files-table');
+  console.log('list files');
+
+  return client.list({
+    'max-keys': 100
+  }).then(function (result) {
+    var objects = result.objects.sort(function (a, b) {
+      var ta = new Date(a.lastModified);
+      var tb = new Date(b.lastModified);
+      if (ta > tb) return -1;
+      if (ta < tb) return 1;
+      return 0;
+    });
+
+    var numRows = table.rows.length;
+    for (var i = 1; i < numRows; i ++) {
+      table.deleteRow(table.rows.length - 1);
+    }
+
+    for (var i = 0; i < Math.min(3, objects.length); i ++) {
+      var row = table.insertRow(table.rows.length);
+      row.insertCell(0).innerHTML = objects[i].name;
+      row.insertCell(1).innerHTML = objects[i].size;
+      row.insertCell(2).innerHTML = objects[i].lastModified;
+    }
+  });
+};
+
+var downloadFile = function (client) {
+  var object = document.getElementById('dl-object-key').value.trim();
+  var filename = document.getElementById('dl-file-name').value.trim();
+  console.log(object + ' => ' + filename);
+
+  var result = client.signatureUrl(object, {
+    response: {
+      'content-disposition': 'attachment; filename="' + filename + '"'
+    }
+  });
+  window.location = result;
+
+  return result;
+};
+
+window.onload = function () {
+  document.getElementById('file-button').onclick = function () {
+    applyTokenDo(uploadFile);
+  }
+
+  document.getElementById('content-button').onclick = function () {
+    applyTokenDo(uploadContent);
+  }
+
+  document.getElementById('list-files-button').onclick = function () {
+    applyTokenDo(listFiles);
+  }
+
+  document.getElementById('dl-button').onclick = function () {
+    applyTokenDo(downloadFile);
+  }
+
+  applyTokenDo(listFiles);
+};
diff --git a/example/package.json b/example/package.json
@@ -0,0 +1,31 @@
+{
+  "name": "oss-in-browser",
+  "version": "1.0.0",
+  "description": "Play with OSS right in the browser!",
+  "main": "app.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/rockuw/oss-in-browser.git"
+  },
+  "author": "",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/rockuw/oss-in-browser/issues"
+  },
+  "homepage": "https://github.com/rockuw/oss-in-browser#readme",
+  "dependencies": {
+    "babel-polyfill": "^6.26.0",
+    "co": "^4.6.0",
+    "express": "^4.16.2",
+    "jquery": "^3.2.1"
+  },
+  "devDependencies": {
+    "babel-core": "^6.26.0",
+    "babel-loader": "^7.1.2",
+    "babel-preset-env": "^1.6.1",
+    "webpack": "^3.8.1"
+  }
+}
diff --git a/example/public/bootstrap.min.css b/example/public/bootstrap.min.css