利用STS临时密钥服务快速搭建直传页面的实践

# 拉取 COS STS SDK 代码:

git clone [https://github.com/tencentyun/qcloud-cos-sts-sdk.git](https://github.com/tencentyun/qcloud-cos-sts-sdk.git)

# 本次使用nodejs环境，进入到nodejs里的demo文件夹

cd qcloud-cos-sts-sdk/nodejs/demo/

# 全局安装express

npm install express-generator -g

# 安装所需要的包模块

npm install body-parser request express 

var bodyParser = require('body-parser');
var STS = require('../index');
var express = require('express');

// 配置参数
var config = {
    secretId: 'AKID****************',
    secretKey: '**********',
    proxy: '',
    durationSeconds: 1800,

    // 放行判断相关参数
    bucket: 'buckettest-1250000000',
    region: 'ap-guangzhou',
    allowPrefix: '*', // 这里改成允许的路径前缀，可以根据自己网站的用户登录态判断允许上传的具体路径，例子： a.jpg 或者 a/* 或者 * (使用通配符*存在重大安全风险, 请谨慎评估使用)
    // 简单上传和分片，需要以下的权限，其他权限列表请看 https://cloud.tencent.com/document/product/436/31923
    allowActions: [
        // 简单上传
        'name/cos:PutObject',
        'name/cos:PostObject',
        // 分片上传
        'name/cos:InitiateMultipartUpload',
        'name/cos:ListMultipartUploads',
        'name/cos:ListParts',
        'name/cos:UploadPart',
        'name/cos:CompleteMultipartUpload'
    ],
};


// 创建临时密钥服务
var app = express();
app.use(bodyParser.json());

// 支持跨域访问
app.all('*', function (req, res, next) {
    res.header('Content-Type', 'application/json');
    res.header('Access-Control-Allow-Origin', '*');
    res.header('Access-Control-Allow-Headers', 'origin,accept,content-type');
    if (req.method.toUpperCase() === 'OPTIONS') {
        res.end();
    } else {
        next();
    }
});

// 临时密钥接口
app.all('/sts', function (req, res, next) {

    // TODO 这里根据自己业务需要做好放行判断

    // 获取临时密钥
    var shortBucketName = config.bucket.substr(0, config.bucket.lastIndexOf('-'));
    var appId = config.bucket.substr(1 + config.bucket.lastIndexOf('-'));
    var policy = {
        'version': '2.0',
        'statement': [{
            'action': config.allowActions,
            'effect': 'allow',
            'principal': { 'qcs': ['*'] },
            'resource': [
                'qcs::cos:' + config.region + ':uid/' + appId + ':prefix//' + appId + '/' + shortBucketName + '/' + config.allowPrefix,
            ],
        }],
    };
    STS.getCredential({
        secretId: config.secretId,
        secretKey: config.secretKey,
        proxy: config.proxy,
        durationSeconds: config.durationSeconds,
        policy: policy,
    }, function (err, tempKeys) {
        var result = JSON.stringify(err || tempKeys) || '';
        res.send(result);
    });
});
app.all('*', function (req, res, next) {
    res.writeHead(404);
    res.send({ code: 404, codeDesc: 'PageNotFound', message: '404 page not found' });
});

// 启动签名服务
app.listen(3333);
console.log('app is listening at http://127.0.0.1:3333');

node sts-server.js
# 启动 STS 服务，会看到控制台打印的app is listening at http://127.0.0.1:3333

http://42.194.201.209:3333/sts)

http://42.194.201.209:3333/sts

{

"expiredTime": 1592792349,

"expiration": "2020-06-22T02:19:09Z",

"credentials": {

"sessionToken": "mfHiMQfhfPUOF67lopyh9KwkCx0mSumV828468f4042e7bd968906ff80cf77ae7bwh6DeY15XgJ6\_Ddr9HmT7SOs38bO-nN8ih7izzRM1H2KJDDE46goteDHe2W1qD9YIRY34bIWpFT6HIvRyKKHBGCCZ\_SvTvJX\_lRnJU5CCksmsuWlxe5qEzJBvzVmn3GrqZ5-5HaOydNKiuhZKo1PphORN-ViyIFOVYSbkWCG3zR3UGig1FomKOBusLpXLkaYa3b9MuasHsmJs71Rv9jE1gLRjpxi3\_eRA19sFun6nzkDGD3WeuYgqx\_Rf05dOkJAxe2lO6o5t8b5jGUICbdCQThh1b695yw529ffHsR14IHxYMMBuXp\_OShDooOBssD-lZquKBhq9LI4MfWELSHu3qiq\_-JagSWMIT\_CXYmaw6na6U6Tl4syX78XaZCHwoncIOJg-ADiFOxGAF7cEcafPDaiO-Q0dbTuNBQ7Fc2ZlkTTlznhYuj45tlXJ6\_hBwrfCY9RRVUQmoBI8CZJ0\_C1ExUHUf2p9g4gGZ1fX8yqNY",

"tmpSecretId": "AKIDrXn4jL7XfaZ-Tj-Qt5VYPGjtt637\_\_z57hXYV31EtA4gne4n-RD\_D7mspOrMfVI8",

"tmpSecretKey": "ytqC8ZYE7y3ZrUmmKbnZHxB/ZBNc6jEFHMooRisvI8I="

},

"requestId": "fd494be7-0998-462f-9649-baebacaf2f47",

"startTime": 1592790549

} 

[root@VM-0-11-centos data]# mkdir cos-web-test
[root@VM-0-11-centos data]# cd cos-web-test/
[root@VM-0-11-centos cos-web-test]# express --view=pug

   create : public/
   create : public/javascripts/
   create : public/images/
   create : public/stylesheets/
   create : public/stylesheets/style.css
   create : routes/
   create : routes/index.js
   create : routes/users.js
   create : views/
   create : views/error.pug
   create : views/index.pug
   create : views/layout.pug
   create : app.js
   create : package.json
   create : bin/
   create : bin/www
   install dependencies:
     $ npm install

   run the app:
     $ DEBUG=cos-web-test:* npm start

npm install
npm start

http://42.194.201.209:3000

app.use('/', indexRouter);
app.use('/users', usersRouter);

# 需要添加的行
app.use('/cos', express.static('public'));

// catch 404 and forward to error handler
app.use(function (req, res, next) {
  next(createError(404));
});

<!doctype html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>Ajax Put 上传</title>
    <style>
        h1,
        h2 {
            font-weight: normal;
        }
 
        #msg {
            margin-top: 10px;
        }
    </style>
</head>
 
<body>
 
    <h1>Ajax Put 上传</h1>
 
    <input id="fileSelector" type="file">
    <input id="submitBtn" type="submit">
 
    <div id="msg"></div>
 
    <script src="https://unpkg.com/cos-js-sdk-v5/demo/common/cos-auth.min.js"></script>
    <script>
        (function () {
            // 请求用到的参数
            var Bucket = 'shuoweiwu-125****742';
            var Region = 'ap-guangzhou';
            var protocol = location.protocol === 'https:' ? 'https:' : 'http:';
            var prefix = protocol + '//' + Bucket + '.cos.' + Region + '.myqcloud.com/';
 
            // 对更多字符编码的 url encode 格式
            var camSafeUrlEncode = function (str) {
                return encodeURIComponent(str)
                    .replace(/!/g, '%21')
                    .replace(/'/g, '%27')
                    .replace(/\(/g, '%28')
                    .replace(/\)/g, '%29')
                    .replace(/\*/g, '%2A');
            };
 
            // 计算签名
            var getAuthorization = function (options, callback) {
                // var url = 'http://127.0.0.1:3000/sts-auth' +
                // 在这里填入临时密钥STS服务URL地址
                var url = 'http://42.194.201.209:3333/sts';
                var xhr = new XMLHttpRequest();
                xhr.open('GET', url, true);
                xhr.onload = function (e) {
                    var credentials;
                    try {
                        credentials = (new Function('return ' + xhr.responseText))().credentials;
                    } catch (e) { }
                    if (credentials) {
                        callback(null, {
                            XCosSecurityToken: credentials.sessionToken,
                            Authorization: CosAuth({
                                SecretId: credentials.tmpSecretId,
                                SecretKey: credentials.tmpSecretKey,
                                Method: options.Method,
                                Pathname: options.Pathname,
                            })
                        });
                    } else {
                        console.error(xhr.responseText);
                        callback('获取签名出错');
                    }
                };
                xhr.onerror = function (e) {
                    callback('获取签名出错');
                };
                xhr.send();
            };
 
            // 上传文件
            var uploadFile = function (file, callback) {
                var Key = 'dir/' + file.name; // 这里指定上传目录和文件名
                getAuthorization({ Method: 'PUT', Pathname: '/' + Key }, function (err, info) {
 
                    if (err) {
                        alert(err);
                        return;
                    }
 
                    var auth = info.Authorization;
                    var XCosSecurityToken = info.XCosSecurityToken;
                    var url = prefix + camSafeUrlEncode(Key).replace(/%2F/g, '/');
                    var xhr = new XMLHttpRequest();
                    xhr.open('PUT', url, true);
                    xhr.setRequestHeader('Authorization', auth);
                    XCosSecurityToken && xhr.setRequestHeader('x-cos-security-token', XCosSecurityToken);
                    xhr.upload.onprogress = function (e) {
                        console.log('上传进度 ' + (Math.round(e.loaded / e.total * 10000) / 100) + '%');
                    };
                    xhr.onload = function () {
                        if (/^2\d\d$/.test('' + xhr.status)) {
                            var ETag = xhr.getResponseHeader('etag');
                            callback(null, { url: url, ETag: ETag });
                        } else {
                            callback('文件 ' + Key + ' 上传失败，状态码：' + xhr.status);
                        }
                    };
                    xhr.onerror = function () {
                        callback('文件 ' + Key + ' 上传失败，请检查是否没配置 CORS 跨域规则');
                    };
                    xhr.send(file);
                });
            };
 
            // 监听表单提交
            document.getElementById('submitBtn').onclick = function (e) {
                var file = document.getElementById('fileSelector').files[0];
                if (!file) {
                    document.getElementById('msg').innerText = '未选择上传文件';
                    return;
                }
                file && uploadFile(file, function (err, data) {
                    console.log(err || data);
                    document.getElementById('msg').innerText = err ? err : ('上传成功，ETag=' + data.ETag);
                });
            };
        })();
    </script>
 
</body>
 
</html>

http://42.194.201.209:3000/cos/test.html