aliyun oss 服务端签名后直传_oss如何获取发送上传请求的host

作者：weixin_40725706 | 2024-06-11 11:25:47

踩

oss如何获取发送上传请求的host

aliyun oss 服务端签名后直传

前言

以前的文件上传都是前端将文件流上传到服务端后，服务端进行处理，返回给前端地址，这种方式适合传统单体的系统架构，不将文件服务作为一个单独的服务进行部署，在现在流行的分布式大环境下，传统的文件存储方式已经不适用，文件存储服务以第三方服务的形式，直接调用即可。例如阿里云 OSS，七牛云，腾讯云的COS 等等。这些第三方的文件服务就为我们提供了存储解决方案，既然我们已经不将文件存储在服务端，那我们也没有必要先让前端将文件流传递到服务端，再由服务端将文件上传到第三方文件服务。

下面是博主基于springboot搭建的一套完整的oss直传的DEMO

码云地址：https://gitee.com/jack_whh/oss-policy-springboot.git
码云地址

前端直传官方文档地址

优点：
- 直传文件流不用过服务端，上传速度不受服务端带宽影响。
- 由于文件不过服务端，所以也不占用服务端的系统资源。
缺点：
- 客户端通过JavaScript把AccesssKeyID和AccessKeySecret写在代码里面有泄露的风险。

为解决直传的缺点，所以提出本文介绍重点：服务端签名后直传。

一. 流程介绍

流程如下图所示：
当用户要上传一个文件到OSS，而且希望将上传的结果返回给应用服务器时，需要设置一个回调函数，将请求告知应用服务器。用户上传完文件后，不会直接得到返回结果，而是先通知应用服务器，再把结果转达给用户。

代码实现

安装：

<dependency>
    <groupId>com.aliyun.oss</groupId>
    <artifactId>aliyun-sdk-oss</artifactId>
    <version>3.10.2</version>
</dependency>
1
2
3
4
5

官方地址

前期设置
- 创建bucket 快捷入口
- 修改CORS
获取policy的主要代码

public Map<String, String> getPolicy() {
        // host的格式为 bucketname.endpoint
        final String host = "http://" + ossProperties.getBucket() + "." + ossProperties.getEndpoint();
        // 直传有效截止时间
        long expireEndTime = System.currentTimeMillis() + (ossProperties.getExpireTime() * 1000);
        Date expiration = new Date(expireEndTime);
        PolicyConditions policyConditions = new PolicyConditions();
        // 设置可上传文件的大小
        policyConditions.addConditionItem(PolicyConditions.COND_CONTENT_LENGTH_RANGE, ossProperties.getMin(), ossProperties.getMax());
        // 设置上传文件的前缀、可忽略
        policyConditions.addConditionItem(MatchMode.StartWith, PolicyConditions.COND_KEY, dir);
        // 生成policy
        String postPolicy = ossClient.generatePostPolicy(expiration, policyConditions);
        byte[] binaryData = postPolicy.getBytes(StandardCharsets.UTF_8);
        String encodedPolicy = BinaryUtil.toBase64String(binaryData);
        String postSignature = ossClient.calculatePostSignature(postPolicy);
        // 封装policy等信息
        Map<String, String> aliOssPolicy = new HashMap<>();
        aliOssPolicy.put("ossAccessKeyId", ossProperties.getAccessId());
        aliOssPolicy.put("policy", encodedPolicy);
        aliOssPolicy.put("signature", postSignature);
        aliOssPolicy.put("dir", dir);
        aliOssPolicy.put("host", host);
        aliOssPolicy.put("expire", String.valueOf(expireEndTime / 1000));
        aliOssPolicy.put("callback", getCallBackBody());
        return aliOssPolicy;
    }
private String getCallBackBody() {
        Map<String, String> map = new HashMap<>();
        map.put("callbackUrl", ossProperties.getCallbackUrl());
        map.put("callbackBody", "filename=${object}&size=${size}&mimeType=${mimeType}&height=${imageInfo.height}&width=${imageInfo.width}");
        map.put("callbackBodyType", "application/x-www-form-urlencoded");
        String s = JSON.toJSONString(map);
        String base64CallbackBody = null;
        try {
            base64CallbackBody = BinaryUtil.toBase64String(s.getBytes("utf-8"));
        } catch (UnsupportedEncodingException e) {
            e.printStackTrace();
        }
        return base64CallbackBody;
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

主要参数说明：

{
"accessid":"6MKO******4AUk44",
"host":"http://post-test.oss-cn-hangzhou.aliyuncs.com",
"policy":"eyJleHBpcmF0aW9uIjoiMjAxNS0xMS0wNVQyMDo1Mjoy******Jjdb25kaXRpb25zIjpbWyJjdb250ZW50LWxlbmd0aC1yYW5nZSIsMCwxMDQ4NTc2MDAwXSxbInN0YXJ0cy13aXRoIiwiJGtleSIsInVzZXItZGlyXC8iXV19",
"signature":"VsxOcOudx******z93CLaXPz+4s=",
"expire":1446727949,
"callback":"eyJjYWxsYmFja1VybCI6Imh0dHA6Ly9vc3MtZGVtby5hbGl5dW5jcy5jdb206MjM0NTAiLCJjYWxsYmFja0hvc3QiOiJvc3MtZGVtby5hbGl5dW5jcy5jdb20iLCJjYWxsYmFja0JvZHkiOiJmaWxlbmFtZT0ke29iamVjdH0mc2l6ZT0ke3NpemV9Jm1pbWVUeXBlPSR7bWltZVR5cGV9JmhlaWdodD0ke2ltYWdlSW5mby5oZWlnaHR9JndpZHRoPSR7aW1hZ2VJdbmZvLndpZHRofSIsImNhbGxiYWNrQm9keVR5cGUiOiJhcHBsaWNhdGlvbi94LXd3dy1mb3JtLXVybGVuY29kZWQifQ==",
"dir":"user-dirs/"
}
1
2
3
4
5
6
7
8
9

accessid 密钥key
host oss的上传地址
signature 签名
expire 密钥过期时间
callback 回调的base64编码
dir 要上传的指定文件夹

上述示例的callback内容采用的是Base64编码。经过Base64解码后的内容如下：

{"callbackUrl":"http://oss-demo.aliyuncs.com:23450",
"callbackBody":"filename=${object}&size=${size}&mimeType=${mimeType}&height=${imageInfo.height}&width=${imageInfo.width}",
"callbackBodyType":"application/x-www-form-urlencoded"}
1
2
3

内容解析如下：
- CallbackUrl：OSS往这个服务器发送的URL请求上传成功后，oss向服务端发送的回调地址，需是公网地址。
- callbackHost：OSS发送这个请求时，请求头部所带的Host头。
- callbackBody：OSS请求时，发送给应用服务器的内容，可以包括文件的名称、大小、类型。如果是图片，可以是图片的高度、宽度。
- callbackBodyType：请求发送的Content-Type。
前端代码，这里使用vue+element-ui 写的一个小页面

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <title>上传图片</title>
</head>
<body>
<div id="app">
    <div class="div-center-class">
        <el-upload
                class="upload-demo"
                action="#"
                drag
                :http-request="httpRequestHandle"
        >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>
        <div v-if="imgUrl">
            <img :src="imgUrl"></img>
        </div>
    </div>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<!--import  axios -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data: function () {
            return {
                imgUrl: ''
            }
        },
        methods: {
            getpolicy(file) {
                _that = this
                axios.get('ali/oss/getpolicy')
                    .then(function (response) {
                        let {ossAccessKeyId, policy, signature, host, callback} = response.data.data;
                        let formData = new FormData();
                        formData.append("key", `${new Date().getTime()}_${file.name}`);
                        formData.append("success_action_status", 200);  // 让服务端返回200，不设置则默认返回204。
                        formData.append("OssAccessKeyId", ossAccessKeyId);
                        formData.append("policy", policy);
                        formData.append("signature", signature);
                        formData.append("callback", callback);
                        formData.append("file", file); // 必须放在最后
                        // 发送 POST 请求
                        _that.axiosPost("post", host, formData).then(function (res) {
                            _that.imgUrl = res
                        })
                    })
            },
            httpRequestHandle(options) {
                let {file} = options;
                this.getpolicy(file);
            },
            //封装
            //axios封装post请求
            axiosPost(method, url, data) {
                let result = axios({
                    method: method,
                    url: url,
                    data: data
                }).then(resp => {
                    return resp.data.data;
                }).catch(error => {
                    return "exception=" + error;
                });
                return result;
            }
        }
    })
</script>
<style>
    .div-center-class {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
</style>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91

前端上传OSS回调

请求路由需和上面的callbackurl一致。

 @PostMapping("/ali/oss/callback")
 public R ossCallback(HttpServletRequest request) throws IOException {
//        request 只能获取一次
        String body = ossComponent.GetPostBody(request.getInputStream(), Integer.parseInt(request.getHeader("content-length")));
        String[] strings = body.split("&");
        String filename = strings[0].split("=")[1];
        boolean b = ossComponent.VerifyOSSCallbackRequest(request,body);
        if (b) {
            String url = ossComponent.getUrl(filename);
            return R.success(url);
        }else {
            return R.error("上传失败");
        }
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14

回调后，我们需要对请求进行校验，校验方法如下：

/**
     * 验证上传回调的Request
     *
     * @param request
     * @return
     * @throws NumberFormatException
     * @throws IOException
     */
    public boolean VerifyOSSCallbackRequest(HttpServletRequest request,String ossCallbackBody)
            throws NumberFormatException, IOException {
        boolean ret = false;
        String autorizationInput = new String(request.getHeader("Authorization"));
        String pubKeyInput = request.getHeader("x-oss-pub-key-url");
        byte[] authorization = BinaryUtil.fromBase64String(autorizationInput);
        byte[] pubKey = BinaryUtil.fromBase64String(pubKeyInput);
        String pubKeyAddr = new String(pubKey);
        if (!pubKeyAddr.startsWith("http://gosspublic.alicdn.com/")
                && !pubKeyAddr.startsWith("https://gosspublic.alicdn.com/")) {
            System.out.println("pub key addr must be oss addrss");
            return false;
        }
        String retString = executeGet(pubKeyAddr);
        retString = retString.replace("-----BEGIN PUBLIC KEY-----", "");
        retString = retString.replace("-----END PUBLIC KEY-----", "");
        String queryString = request.getQueryString();
        String uri = request.getRequestURI();
        String decodeUri = java.net.URLDecoder.decode(uri, "UTF-8");
        String authStr = decodeUri;
        if (queryString != null && !queryString.equals("")) {
            authStr += "?" + queryString;
        }
        authStr += "\n" + ossCallbackBody;
        ret = doCheck(authStr, authorization, retString);
        return ret;
    }

    /**
     * 获取Post消息体
     *
     * @param is
     * @param contentLen
     * @return
     */
    public String GetPostBody(InputStream is, int contentLen) {
        if (contentLen > 0) {
            int readLen = 0;
            int readLengthThisTime = 0;
            byte[] message = new byte[contentLen];
            try {
                while (readLen != contentLen) {
                    readLengthThisTime = is.read(message, readLen, contentLen - readLen);
                    if (readLengthThisTime == -1) {// Should not happen.
                        break;
                    }
                    readLen += readLengthThisTime;
                }
                return new String(message);
            } catch (IOException e) {
            }
        }
        return "";
    }

   

    /**
     * 验证RSA
     *
     * @param content
     * @param sign
     * @param publicKey
     * @return
     */
    private boolean doCheck(String content, byte[] sign, String publicKey) {
        try {
            KeyFactory keyFactory = KeyFactory.getInstance("RSA");
            byte[] encodedKey = BinaryUtil.fromBase64String(publicKey);
            PublicKey pubKey = keyFactory.generatePublic(new X509EncodedKeySpec(encodedKey));
            java.security.Signature signature = java.security.Signature.getInstance("MD5withRSA");
            signature.initVerify(pubKey);
            signature.update(content.getBytes());
            boolean bverify = signature.verify(sign);
            return bverify;

        } catch (Exception e) {
            e.printStackTrace();
        }

        return false;
    }

    /**
     * 获取public key
     *
     * @param url
     * @return
     */
    @SuppressWarnings({"finally"})
    private String executeGet(String url) {
        BufferedReader in = null;

        String content = null;
        try {
            // 定义HttpClient
            @SuppressWarnings("resource")
            DefaultHttpClient client = new DefaultHttpClient();
            // 实例化HTTP方法
            HttpGet request = new HttpGet();
            request.setURI(new URI(url));
            HttpResponse response = client.execute(request);

            in = new BufferedReader(new InputStreamReader(response.getEntity().getContent()));
            StringBuffer sb = new StringBuffer("");
            String line = "";
            String NL = System.getProperty("line.separator");
            while ((line = in.readLine()) != null) {
                sb.append(line + NL);
            }
            in.close();
            content = sb.toString();
        } catch (Exception e) {
        } finally {
            if (in != null) {
                try {
                    in.close();// 最后要关闭BufferedReader
                } catch (Exception e) {
                    e.printStackTrace();
                }
            }
            return content;
        }
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132

校验成功后，获取图片的URL返回给前端
- 获取图片链接的地址

 /**
     * 获得url链接
     *
     * @param key
     * @return
     */
    public String getUrl(String key) {
        if (StringUtils.isBlank(key)) {
            return "";
        }
        Date expiration = new Date(System.currentTimeMillis() + 3600L * 1000 * 24 * 365 * 10);
        URL url = ossClient.generatePresignedUrl(ossProperties.getBucket(), key, expiration);
        if (url != null) {
            return url.toString();
        }
        return null;
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

key 为上传文件的文件名。
这里可以设置图片链接的有限期。

====================================================================

以上就是配置服务端签名后直传文件的步骤。

下面是博主基于springboot搭建的一套完成的oss直传的DEMO