OSS在url中包含签名

WHY

为什么要用到签名？不是提供url可以直接在浏览器访问oss上的资源吗？

其实，用户创建一个Bucket时，如果不指定Bucket权限，OSS会自动为该Bucket设置private权限。权限如下：

Bucket权限

即浏览器没有权限直接通过url访问oss上的资源。报错如下：

报错截图

所以想用url直接在浏览器访问oss资源，请先确认Bucket权限，再确认oss跨域允许跨域的来源设置相关内容。

• 设置跨域访问

WHAT

什么是签名？

OSS通过使用AccessKeyId/ AccessKeySecret对称加密的方法来验证某个请求的发送者身份。当用户想以个人身份向OSS发送请求时，需要首先将发送的请求按照OSS指定的格式生成签名字符串；然后使用AccessKeySecret对签名字符串进行加密产生验证码。 OSS收到请求以后，会通过AccessKeyId找到对应的AccessKeySecret，以同样的方法提取签名字符串和验证码，如果计算出来的验证码和提供的一样即认为该请求是有效的；否则，OSS将拒绝处理这次请求，并返回HTTP 403错误。

官方一堆臭长的解释，表示还是不明白。反正通过在url中包含签名要的东西如下：

• OSSAccessKeyId
• Expires
• Signature

HOW

怎么生成签名？

带签名的例子

    http://oss-example.oss-cn-hangzhou.aliyuncs.com/oss-api.pdf?OSSAccessKeyId=nz2pc56s936**9l&Expires=1141889120&Signature=vjbyPxybdZaNmGa%2ByT272YEAiv4%3D

URL中包含的三个参数当中，前两个参数都好说，OSSAccessKeyId你肯定知道是什么，Expires就是一个时间戳，用来校验访问时间的有效性。重点是第三个参数Signature。

Signature的算法

它是通过由AccessKeySecret和请求方式、content-md5、content-type、过期时间、ossheader、访问oss的资源地址，这一堆参数经过hmac-sha1加密，然后在进行base64，最后再utf-8编码。这些过程都可以通过相应的在线工具，进行测试生成自己带签名的url，进行测试访问。

如果测试仍然存在问题，可以使用这个可视化的签名工具

下载位置

2019年3月27日更新

很多同学可能还不明白，文档说了半天，签名到底是什么玩意？怎么生成的？

有使用过 oss browser 这个工具吗？没有用过请移步下载使用。 oss browser 是一个图形化管理oss资源的工具。

oss browser

点击获取地址，可以得到该资源的一个链接，将这个链接直接放到浏览器地址栏，是可以直接访问的。当然，这又回到文章的开头，假如你没有设置过这个Bucket的权限，那么oss上的资源默认是私有的。你可以对比一下，私有权限和公共权限，两个链接有何不同。对的，不同的部分就是，私有权限的链接，后面多了一串东西，那玩意就是签名。

公共权限：http://trinasolartestcopy.oss-cn-shanghai.aliyuncs.com/201806281652392/290/Report/report.pdf

私有权限：http://trinasolartestcopy.oss-cn-shanghai.aliyuncs.com/201806281652392/290/Report/report.pdf?OSSAccessKeyId=LTAIVCbWPSTG9J7H&Expires=1553746617&Signature=sJiMjrA3RuxuklKHWiHPMX9tAWk%3D

这次更新，再解读一下如何在 react 中使用oss，以及如何生成签名。

1. 安装 ali-oss 插件
   npm install ali-oss --save-dev
2. 引用
   import OSS from 'ali-oss';
3. 使用（上传文件）

        let client = new OSS(
             {
               region: 'oss-cn-shanghai',//换成你自己的
               accessKeyId: 'XXX(换成你自己的)',
               accessKeySecret: 'XXX(换成你自己的)',
               bucket: 'trinasolartestcopy',//oss browser根目录文件夹的名字，换成你自己的
               secure: true
             }
        );
        let path=' 201806281652392/290/Report/report.pdf ';//上传的路径
        client.put(path, blob)
        .then((res)=>{
           console.log("PDF报告上传成功")
        })
        .catch((res)=>{
            console.log(res)
        })

4. 查看，果然上传成功了

   
   查看上传结果

5. 生成带签名的url链接

        let path=' 201806281652392/290/Report/report.pdf '
        let OssSignUrl=client.signatureUrl(
            path,
            {expires: 3600, 'process' : 'image/resize,w_200,h_200'}//设置过期时间，设置图片宽高
        );
        console.log(OssSignUrl)//返回带签名的url链接

参考文档