使用阿里云OSS的服务端签名后直传功能的流程分析

2023-07-16 15:50:03 78

网站一般都会有上传功能，而对象存储服务oss是一个很好的选择。可以快速的搭建起自己的上传文件功能。
该文章以使用阿里云的OSS功能为例，记录如何在客户端使用阿里云的对象存储服务。

服务端签名后直传

背景

采用JavaScript客户端直接签名（参见JavaScript客户端签名直传）时，AccessKeyID和AcessKeySecret会暴露在前端页面，因此存在严重的安全隐患。因此，OSS提供了服务端签名后直传的方案。

流程介绍

流程如下图所示：

本示例中，Web端向服务端请求签名，然后直接上传，不会对服务端产生压力，而且安全可靠。但本示例中的服务端无法实时了解用户上传了多少文件，上传了什么文件。如果想实时了解用户上传了什么文件，可以采用服务端签名直传并设置上传回调。

创建对象存储

1.创建bucket

快捷入口：https://oss.console.aliyun.com/bucket

bucket读写权限为：公共读

2.添加子用户分配权限

鼠标移至右上角的用户头像当中，点击添加AccessKey管理,然后选择使用子用户AccessKey，因为使用子用户可以只分配OSS的读写权限。这样比较安全。
访问方式选择：编程访问(即使用AccessKeyID和AccessKeySecret,通过API或开发工具访问)

然后点击子用户的添加权限操作。
权限选择：AliyunOSSFullAccess（管理对象存储服务（OSS）权限）

3.保存AccessKey信息

创建了用户后，会展示这么一个页面

此时你需要保存好AccessKeyID和AccessSecret，否则这个页面关闭后就找不到了。

maven依赖


com.aliyun.oss
aliyun-sdk-oss
3.10.2

最新版本可以看这里：https://help.aliyun.com/document_detail/32009.html?spm=a2c4g.11186623.6.807.39fb4c07GmTHoV

测试上传

测试代码

//Endpoint以杭州为例，其它Region请按实际情况填写。
Stringendpoint="http://oss-cn-hangzhou.aliyuncs.com";
//阿里云主账号AccessKey拥有所有API的访问权限，风险很高。强烈建议您创建并使用RAM账号进行API访问或日常运维，请登录https://ram.console.aliyun.com创建RAM账号。
StringaccessKeyId="";
StringaccessKeySecret="";

//创建OSSClient实例。
OSSossClient=newOSSClientBuilder().build(endpoint,accessKeyId,accessKeySecret);

//创建PutObjectRequest对象。
PutObjectRequestputObjectRequest=newPutObjectRequest("","test",newFile("C:\Users\82131\Desktop\logo.jpg"));

//上传文件。
ossClient.putObject(putObjectRequest);

//关闭OSSClient。
ossClient.shutdown();

测试成功后就可以看到test图片了,如图：

服务端签名实现流程

修改CORS

客户端进行表单直传到OSS时，会从浏览器向OSS发送带有Origin的请求消息。OSS对带有Origin头的请求消息会进行跨域规则（CORS）的验证。因此需要为Bucket设置跨域规则以支持Post方法。
进入bucket后，选择权限管理-》跨域设置-》创建规则

后端代码

@RestController
publicclassOssController{

@RequestMapping("/oss/policy")
publicMappolicy(){
StringaccessId="";//请填写您的AccessKeyId。
StringaccessKey="";//请填写您的AccessKeySecret。
Stringendpoint="oss-cn-shenzhen.aliyuncs.com";//请填写您的endpoint。
Stringbucket="bucket-name";//请填写您的bucketname。
Stringhost="https://"+bucket+"."+endpoint;//host的格式为bucketname.endpoint

Stringformat=newSimpleDateFormat("yyyy-MM-dd").format(newDate());
Stringdir=format+"/";//用户上传文件时指定的前缀。

MaprespMap=newLinkedHashMap();
//创建OSSClient实例。
OSSossClient=newOSSClientBuilder().build(endpoint,accessId,accessKey);
try{
longexpireTime=30;
longexpireEndTime=System.currentTimeMillis()+expireTime*1000;
Dateexpiration=newDate(expireEndTime);
//PostObject请求最大可支持的文件大小为5GB，即CONTENT_LENGTH_RANGE为5*1024*1024*1024。
PolicyConditionspolicyConds=newPolicyConditions();
policyConds.addConditionItem(PolicyConditions.COND_CONTENT_LENGTH_RANGE,0,1048576000);
policyConds.addConditionItem(MatchMode.StartWith,PolicyConditions.COND_KEY,dir);

StringpostPolicy=ossClient.generatePostPolicy(expiration,policyConds);
byte[]binaryData=postPolicy.getBytes("utf-8");
StringencodedPolicy=BinaryUtil.toBase64String(binaryData);
StringpostSignature=ossClient.calculatePostSignature(postPolicy);

respMap.put("accessid",accessId);
respMap.put("policy",encodedPolicy);
respMap.put("signature",postSignature);
respMap.put("dir",dir);
respMap.put("host",host);
respMap.put("expire",String.valueOf(expireEndTime/1000));

}catch(Exceptione){
//Assert.fail(e.getMessage());
System.out.println(e.getMessage());
}finally{
ossClient.shutdown();
}
returnrespMap;
}
}

更详细的详细请查看这里：https://help.aliyun.com/document_detail/91868.html?spm=a2c4g.11186623.2.15.a66e6e28WZXmSg

前端代码

以element-ui组件为例，上传前BeforeUpload先调用后端的policy接口获取签名信息，然后带着签名等信息和图片直接上传到aliyun的OSS。
上传组件singleUpload.vue，需要改动action的地址：bucket的外网域名（在bucket的概览里面可以看到）,该文件是谷粒商城项目的一个上传组件，我只是copy过来修改了一点点。

引用SingleUpload组件的页面的示例代码：

总结

该文主要由学习谷粒商城项目的实践过程，技术难度并不大，阿里云官网有文档可以查阅。
快捷入口：[https://help.aliyun.com/product/31815.html?spm=a2c4g.11186623.6.540.28c66d39lLTogx]https://help.aliyun.com/product/31815.html?spm=a2c4g.11186623.6.540.28c66d39lLTogx

到此这篇关于使用阿里云OSS的服务端签名后直传功能的文章就介绍到这了,更多相关服务端签名后直传内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

使用阿里云OSS的服务端签名后直传功能的流程分析

热门推荐

随机推荐