support csp

tencentyun · Sep 10, 2018 · 1adea99 · 1adea99
1 parent d48456c
commit 1adea99
Show file tree

Hide file tree

Showing 6 changed files with 104 additions and 9 deletions.
diff --git a/csp/README.md b/csp/README.md
@@ -0,0 +1,89 @@
+# CSP 使用 COS JavaScript SDK
+
+### SDK 获取
+
+对象存储服务的 XML JS SDK 资源 github 地址：[tencentyun/cos-js-sdk-v5](https://github.com/tencentyun/cos-js-sdk-v5)。
+
+演示示例 Demo 下载地址：[XML JS SDK CSP Demo](https://github.com/tencentyun/cos-js-sdk-v5/tree/master/csp/csp.html)。
+
+### 开发准备
+
+1. 首先，JS SDk 需要浏览器支持基本的 HTML5 特性，以便支持 ajax 上传文件和计算文件 md5 值。
+2. 到COS 对象存储控制台创建存储桶，得到 Bucket（存储桶名称） 和 Region（地域名称）
+3. 到控制台密钥管理获取您的项目 SecretId 和 SecretKey。
+4. 配置 CORS 规则，配置例子如下图：
+![cors](//mc.qcloudimg.com/static/img/2e7791e9274ce3ebf8b25bbeafcd7b45/image.png)
+
+> 关于文章中出现的 SecretId、SecretKey、Bucket 等名称的含义和获取方式请参考：[COS 术语信息](https://cloud.tencent.com/document/product/436/7751)
+
+## 快速入门
+### 计算签名
+
+由于签名计算放在前端会暴露 SecretId 和 SecretKey，我们把签名计算过程放在后端实现，前段通过 ajax 向后端获取签名结果，正式部署时请再后端加一层自己网站本身的权限检验。其他语言，请参照对应的 [XML SDK](https://cloud.tencent.com/document/product/436/6474) 文档。
+
+
+### 上传例子
+
+1. 创建 test.html，填入下面的代码，修改里面的 Bucket 和 Region。
+2. 部署好后端的签名服务，并修改 getAuthorization 里的签名服务地址。
+3. 把 test.html 放在 Web 服务器下，然后在浏览器访问页面，测试文件上传。
+
+```html
+<input id="file-selector" type="file">
+<script src="dist/cos-js-sdk-v5.min.js"></script>
+<script>
+var Bucket = 'test-1250000000';
+var Region = 'ap-guangzhou';
+
+// 初始化实例
+var cos = new COS({
+    CompatibilityMode: true,
+    ServiceDomain: 'http://cos.default.xxx.com', // 这里替换成 getService 域名
+    Domain: 'http://{Bucket}.cos.{Region}.xxx.com', 这里替换成 API 域名格式模板
+    getAuthorization: function (options, callback) {
+        // 异步获取签名
+        $.get('../server/sts.php', {
+            bucket: options.Bucket,
+            region: options.Region,
+        }, function (data) {
+            callback({
+                TmpSecretId: data.TmpSecretId,
+                TmpSecretKey: data.TmpSecretKey,
+                XCosSecurityToken: data.XCosSecurityToken,
+                ExpiredTime: data.ExpiredTime,
+            });
+        });
+    }
+});
+
+// 监听选文件
+document.getElementById('file-selector').onchange = function () {
+    
+    var file = this.files[0];
+    if (!file) return;
+
+    // 分片上传文件
+    cos.sliceUploadFile({
+        Bucket: Bucket,
+        Region: Region,
+        Key: file.name,
+        Body: file,
+    }, function (err, data) {
+        console.log(err, data);
+    });
+
+};
+</script>
+```
+
+## webpack 引入方式
+
+支持 webpack 打包的场景，可以用 npm 引入作为模块
+```shell
+npm i cos-js-sdk-v5 --save
+```
+
+## 其他文档和例子
+
+1. 更多例子请参阅 [XML JavaScript SDK Demo](https://github.com/tencentyun/cos-js-sdk-v5/blob/master/demo)。
+2. 完整接口文档请参阅 [XML JavaScript SDK 接口文档](https://cloud.tencent.com/document/product/436/12260)。
diff --git a/demo/csp.html → csp/csp.html b/demo/csp.html → csp/csp.html
@@ -47,7 +47,7 @@ <h1>cos-js-sdk-v5</h1>
     var cos = new COS({
         CompatibilityMode: true,
         ServiceDomain: 'http://cos.default.xxx.com',
-        Domain: 'http://{{Bucket}}-{{AppId}}.cos.{{Region}}.xxx.com',
+        Domain: 'http://{Bucket}.cos.{Region}.xxx.com',
         getAuthorization: function () {
             var url = '../server/sts.php';
             var xhr = new XMLHttpRequest();

diff --git a/test/csp.html → csp/test.html b/test/csp.html → csp/test.html
@@ -6,15 +6,15 @@
           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>cos-js-sdk-v5-demo</title>
-    <link rel="stylesheet" href="./qunit-2.4.0.css">
+    <link rel="stylesheet" href="../test/qunit-2.4.0.css">
 </head>
 <body>
 
 <h1 id="qunit-header">cos-js-sdk-v5</h1>
 <h2 id="qunit-banner"></h2>
 <ol id="qunit-tests"></ol>
 
-<script src="./qunit-2.4.0.js"></script>
+<script src="../test/qunit-2.4.0.js"></script>
 <script src="../dist/cos-js-sdk-v5.js"></script>
 <script>
     var config = {
@@ -54,7 +54,7 @@ <h2 id="qunit-banner"></h2>
         SecretKey: config.SecretKey,
         CompatibilityMode: true,
         ServiceDomain: 'http://cos.default.yun.ccb.com',
-        Domain: 'http://{{Bucket}}-{{AppId}}.cos.{{Region}}.yun.ccb.com',
+        Domain: 'http://{Bucket}.cos.{Region}.yun.ccb.com',
         // 可选参数
         FileParallelLimit: 3,    // 控制文件上传并发数
         ChunkParallelLimit: 3,   // 控制单个文件下分片上传并发数

diff --git a/dist/cos-js-sdk-v5.js b/dist/cos-js-sdk-v5.js
@@ -5577,12 +5577,13 @@ function getUrl(params) {
     var protocol = params.protocol || (util.isBrowser && location.protocol === 'http:' ? 'http:' : 'https:');
     if (!domain) {
         if (['cn-south', 'cn-south-2', 'cn-north', 'cn-east', 'cn-southwest', 'sg'].indexOf(region) > -1) {
-            domain = '{{Bucket}}-{{AppId}}.{{Region}}.myqcloud.com';
+            domain = '{Bucket}.{Region}.myqcloud.com';
         } else {
-            domain = '{{Bucket}}-{{AppId}}.cos.{{Region}}.myqcloud.com';
+            domain = '{Bucket}.cos.{Region}.myqcloud.com';
         }
     }
     domain = domain.replace(/\{\{AppId\}\}/ig, appId).replace(/\{\{Bucket\}\}/ig, shortBucket).replace(/\{\{Region\}\}/ig, region).replace(/\{\{.*?\}\}/ig, '');
+    domain = domain.replace(/\{AppId\}/ig, appId).replace(/\{BucketName\}/ig, shortBucket).replace(/\{Bucket\}/ig, longBucket).replace(/\{Region\}/ig, region).replace(/\{.*?\}/ig, '');
     if (!/^[a-zA-Z]+:\/\//.test(domain)) {
         domain = protocol + '//' + domain;
     }

diff --git a/dist/cos-js-sdk-v5.min.js b/dist/cos-js-sdk-v5.min.js
diff --git a/src/base.js b/src/base.js
@@ -1744,15 +1744,20 @@ function getUrl(params) {
     var protocol = params.protocol || (util.isBrowser && location.protocol === 'http:' ? 'http:' : 'https:');
     if (!domain) {
         if (['cn-south', 'cn-south-2', 'cn-north', 'cn-east', 'cn-southwest', 'sg'].indexOf(region) > -1) {
-            domain = '{{Bucket}}-{{AppId}}.{{Region}}.myqcloud.com';
+            domain = '{Bucket}.{Region}.myqcloud.com';
         } else {
-            domain = '{{Bucket}}-{{AppId}}.cos.{{Region}}.myqcloud.com';
+            domain = '{Bucket}.cos.{Region}.myqcloud.com';
         }
     }
     domain = domain.replace(/\{\{AppId\}\}/ig, appId)
         .replace(/\{\{Bucket\}\}/ig, shortBucket)
         .replace(/\{\{Region\}\}/ig, region)
         .replace(/\{\{.*?\}\}/ig, '');
+    domain = domain.replace(/\{AppId\}/ig, appId)
+        .replace(/\{BucketName\}/ig, shortBucket)
+        .replace(/\{Bucket\}/ig, longBucket)
+        .replace(/\{Region\}/ig, region)
+        .replace(/\{.*?\}/ig, '');
     if (!/^[a-zA-Z]+:\/\//.test(domain)) {
         domain = protocol + '//' + domain;
     }