JS通过STS访问阿里云OSS

最新推荐文章于 2024-12-09 16:54:44 发布

原创最新推荐文章于 2024-12-09 16:54:44 发布 · 2.9k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#web oss sts #js oss sts #oss sts #web sts #js sts

后台专栏收录该内容

7 篇文章

订阅专栏

本文介绍如何使用JavaScript和阿里云STS服务实现对OSS的临时授权访问。通过引入aliyun-oss-sdk库，结合STS服务器返回的临时授权信息，实现文件上传功能。

JS通过STS访问阿里云OSS

1.假设你已经配置好了STS服务器并能够返回客户端需要的全部信息；要是不知道如何配置，请看我的文章《使用 STS 进行OSS临时授权访问》
2. 需要引入JS文件 http://gosspublic.alicdn.com/aliyun-oss-sdk-4.4.4.min.js
3. 拷贝以下代码测试

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="http://gosspublic.alicdn.com/aliyun-oss-sdk-4.4.4.min.js"></script>
    <script src="**************/js/axios.min.js"></script>
</head>

<style>

</style>

<body class="">
	<div class="">
        <input class="center-block" type="file" id="file" />
	</div>
</body>
    <script>

        document.getElementById('file').addEventListener('change', function (e) {
            var file = e.target.files[0];
            //请求你的STS服务器，获取临时授权；
			axios.get("your-sts-server")
				.then(function (res) {
					res = res.data.data;
					//使用STS临时授权数据初始化OSS对象
					var client = new OSS.Wrapper({
						accessKeyId: res.accessKeyId,
						accessKeySecret: res.accessKeySecret,
						stsToken: res.stsToken,
						endpoint: res.endpoint,
						bucket: res.bucket
					});
					//调用OSS的上传方法，将file上传到res.filepath，这里我的目标文件路径是服务器返回的。
					client.multipartUpload(res.filepath, file, { 
						progress: async function(a, b){	//上传进度回调;
							console.log(a, b);
						}
					})
					.then(function (res) {
						console.log('success');	//上传完成;
					})
					.catch(function (err) {
						console.log('fail');
						console.log(err);
					});
				})
				.catch(function (e) {
					console.log('fail');
					console.log(e);
				});
        });
    </script>
</html>

顺便贴上我的STS服务端代码吧(node.js)

PHP版本服务端代码点这里-拉到底部

let OSS = require('ali-oss');
class ZytAliOss {
	constructor(param) {
		this.accessKeyId = param.accessKeyId;
		this.accessKeySecret = param.accessKeySecret;
		this.rolearn = param.rolearn;
		this.region = param.region;
		this.endpoint = param.endpoint;
		this.bucket = param.bucket;
	}

	async CreateSTS(filepath, policy, expiration, sessionName, callback) {
		try {
			let sts = new OSS.STS({ accessKeyId: this.accessKeyId, accessKeySecret: this.accessKeySecret });
			policy = JSON.stringify(policy);
			let token = await sts.assumeRole(this.rolearn, policy, expiration, sessionName);
			let client = new OSS({
				region: this.region,
				accessKeyId: token.credentials.AccessKeyId,
				accessKeySecret: token.credentials.AccessKeySecret,
				stsToken: token.credentials.SecurityToken,
				bucket: this.bucket
			});
			let res = {};
			res.region = this.region;
			res.endpoint = this.endpoint;
			res.bucket = client.options.bucket;
			res.accessKeyId = client.options.accessKeyId;
			res.accessKeySecret = client.options.accessKeySecret;
			res.stsToken = client.options.stsToken;
			res.filepath = filepath;
			callback(res);
		} catch (e) {
			callback(null);
		}
	}

	async GetWriteSTS(filepath, expiration, sessionName, callback) {
		let policy = {
			Statement: [{
				Action: [
					"oss:PutObject",
					"oss:ListParts",
					"oss:AbortMultipartUpload"
				],
				Effect: "Allow",
				Resource: ["acs:oss:*:*:" + this.bucket + "/" + filepath]
			}],
			Version: "1"
		};
		this.CreateSTS(filepath, policy, expiration, sessionName, callback);
	}

	async GetReadSTS(filepath, expiration, sessionName, callback) {
		let policy = {
			Statement: [{
				Action: [
					"oss:GetObject",
					"oss:ListParts"
				],
				Effect: "Allow",
				Resource: ["acs:oss:*:*:" + this.bucket + "/" + filepath]
			}],
			Version: "1"
		};
		this.CreateSTS(filepath, policy, expiration, sessionName, callback);
	}

}

module.exports = ZytAliOss;

调用


	let oss = new ZytAliOss({
		accessKeyId: accessKeyId
		accessKeySecret: 'accessKeySecret',
		rolearn: 'acs:ram::*************:role/**************',
		region: 'oss-*********',
		bucket: 'bucket',
		endpoint: 'oss-********.aliyuncs.com'
	});
	oss.GetWriteSTS("test.jpg", 15*60, 'zzzz', async function(data){
		res.send({success:true, data:data});
	});