【OSS】支付宝小程序直传OSS实践

本文涉及的产品
对象存储 OSS,20GB 3个月
对象存储 OSS,恶意文件检测 1000次 1年
对象存储 OSS,内容安全 1000次 1年
简介: 小程序是当下比较流行的移动应用,例如大家熟知的微信小程序、支付宝小程序等。它是一种全新的开发模式,无需下载和安装,为终端用户提供更优的用户体验。如何在小程序环境下上传文件到OSS也成为开发者比较关心的一个问题。小程序上传文件到OSS是利用OSS提供的PostObject接口来实现表单文件上传到OSS。

步骤1:配置Bucket跨域访问


客户端进行表单直传到OSS时,会从浏览器向OSS发送带有Origin的请求消息。OSS对带有Origin头的请求消息会进行跨域规则(CORS)的验证。因此需要为Bucket设置跨域规则以支持Post方法。


  1. 登录OSS管理控制台
  2. 单击Bucket列表,之后单击目标Bucket名称。
  3. 单击权限管理 > 跨域设置,在跨域设置区域单击设置
  4. 单击创建规则,配置如下图所示。

创建规则.png

说明 为了您的数据安全,实际使用时,来源建议填写实际允许访问的域名。更多配置信息请参见设置跨域访问


步骤2:获取签名


为了您的数据安全,建议使用签名方式上传文件。OSS提供以下两种签名方式的代码:

  • 服务端签名使用服务端签名时,您需要先搭建一个签名服务,之后由客户端调用签名服务生成签名。
  • 服务端签名源码uploadOssHelper.js代码如下:
const crypto = require("crypto-js");
class MpUploadOssHelper {
  constructor(options) {
    this.accessKeyId = options.accessKeyId;
    this.accessKeySecret = options.accessKeySecret;
    this.timeOut = options.timeout || 1; // 限制参数的生效时间(单位:小时)。
    this.maxSize = options.maxSize || 10; // 限制上传文件大小(单位:Mb)。
  }
  createUploadParams() {
    const policy = this.getPolicyBase64();
    const signature = this.signature(policy);
    return {
      OSSAccessKeyId: this.accessKeyId,
      policy: policy,
      signature: signature,
    };
  }
  getPolicyBase64() {
    let date = new Date();
    // 设置Policy过期时间。
    date.setHours(date.getHours() + this.timeOut);
    let srcT = date.toISOString();
    const policyText = {
      expiration: srcT,
      conditions: [
        // 限制上传文件大小。
        ["content-length-range", 0, this.maxSize * 1024 * 1024],
      ],
    };
    const buffer = new Buffer(JSON.stringify(policyText));
    return buffer.toString("base64");
  }
  signature(policy) {
    return crypto.enc.Base64.stringify(
      crypto.HmacSHA1(policy, this.accessKeySecret)
    );
  }
}
module.exports = MpUploadOssHelper;


  • 服务端接口示例

以Express为例,接口代码如下:

const express = require('express');
const app = express();
const MpUploadOssHelper = require("./uploadOssHelper.js");
app.get('/getPostObjectParams', (req, res) => {
  const mpHelper = new MpUploadOssHelper({
    accessKeyId: '<Your AccessKeyId>',
    accessKeySecret: '<Your AccessKeySecret>',
    timeout: 1, // 限制参数的生效时间(单位:小时)。
    maxSize: 10, // 限制上传文件大小(单位:Mb)。
  });
  // 生成参数。
  const params = mpHelper.createUploadParams();
  res.json(params);
})


相关参数如下:

  • accessKeyId: 填写您的AccessKey ID。获取方式请参见创建AccessKey
  • accessKeySecret: 填写您的AccessKey Secret。获取方式请参见创建AccessKey


  • 客户端签名

使用客户端签名时,您需要先在服务端搭建一个STS服务,之后由客户端获取STS临时授权账号并生成签名。

  • 服务端搭建STS服务
const OSS = require('ali-oss')
const STS = OSS.STS
const express = require('express');
const app = express();
const stsClient = new STS({
  accessKeyId: '<Your AccessKeyId>',
  accessKeySecret: '<Your AccessKeySecret>',
  bucket: '<Your bucket name>'
});
async function getToken() {
    const STS_ROLE = '<STS_ROLE>'  // 指定角色的ARN。格式:acs:ram::$accountID:role/$roleName。
    const STSpolicy = {
      Statement: [
        {
          Action: ['oss:*'],
          Effect: 'Allow',
          Resource: ['acs:oss:*:*:*']
        }
      ],
      Version: '1'
    };
    const result = await stsClient.assumeRole(
      STS_ROLE,
      STSpolicy,
      3600 // STS过期时间,单位:秒。
    );
    const { credentials } = result;
    return credentials;
}
app.get('/getToken', async (req, res) => {
  // 获取STS。
  const credentials = await getToken()
  console.log(credentials.AccessKeyId)
  console.log(credentials.AccessKeySecret)
  console.log(credentials.SecurityToken)
  res.json(credentials);
})

相关参数如下:

  • accessKeyId: 填写您的AccessKey ID。获取方式请参见创建AccessKey
  • accessKeySecret: 填写您的AccessKey Secret。获取方式请参见创建AccessKey
  • bucket:填写您的OSS存储空间名称。
  • STS_ROLE:填写用于授权的RAM角色的ARN值。详情请参见查看RAM角色基本信息


  • 客户端获取STS临时账号并生成签名
import crypto from 'crypto-js';
import { Base64 } from 'js-base64';
// 计算签名。
function computeSignature(accessKeySecret, canonicalString) {
  return crypto.enc.Base64.stringify(crypto.HmacSHA1(canonicalString, accessKeySecret));
}
const date = new Date();
date.setHours(date.getHours() + 1);
const policyText = {
  expiration: date.toISOString(), // 设置policy过期时间。
  conditions: [
    // 限制上传大小。
    ["content-length-range", 0, 1024 * 1024 * 1024],
  ],
};
async function getFormDataParams() {
  const credentials = await axios.get('/getToken')
  const policy = Base64.encode(JSON.stringify(policyText)) // policy必须为base64的string。
  const signature = computeSignature(credentials.AccessKeySecret, policy)
  const formData = {
    OSSAccessKeyId: credentials.AccessKeyId,
    signature,
    policy,
    'x-oss-security-token': credentials.SecurityToken 
  }
  return formData
}


步骤3:使用支付宝小程序上传


支付宝小程序上传文件参考代码如下:

const host = '<host>';
const signature = '<signatureString>';
const ossAccessKeyId = '<accessKey>'; 
const policy = '<policyBase64Str>';
const securityToken = '<x-oss-security-token>';
const key = '<object name>'
my.chooseImage({
  chooseImage: 1,
  success: res => {
    const path = res.apFilePaths[0];
    my.uploadFile({
        url: host,
        fileType: 'image',
        fileName: 'file',
        filePath: path,
        formData: {
            key,
            policy,
            OSSAccessKeyId: ossAccessKeyId,
            signature,
            success_action_status: '200',
            // 'x-oss-security-token': securityToken // 使用STS签名时必传。
        },
        success: (res) => {
          // 默认上传成功状态码为204,此处被success_action_status设置为200。
          if (res.statusCode === 200) {
            console.log('上传成功');
          }
          my.alert({ content: 'success info: ' + res.data });
        },
        fail: err => {
          console.log(err);
        }
    });
  }
});


相关参数如下:

  • host:填写存储空间的访问域名,例如https://test.oss-cn-zhangjiakou.aliyuncs.com。若您的存储空间已绑定自定义域名,建议填写您的自定义域名。
  • signature:填写步骤2中获取到的signature信息。
  • ossAccessKeyId:填写您的AccessKey ID,若是通过STS获取的临时用户,则填写临时用户的AccessKey ID。
  • policy:填写步骤2中获取到的policy信息。
  • key:设置文件上传至OSS后的文件路径。例如需要将myphoto.jpg上传至test文件夹下,此处填写test/myphoto.jpg。
  • securityToken:若使用STS认证,此项填写客户端签名时获取到的SecurityToken。
相关实践学习
借助OSS搭建在线教育视频课程分享网站
本教程介绍如何基于云服务器ECS和对象存储OSS,搭建一个在线教育视频课程分享网站。
相关文章
|
23小时前
|
监控 小程序 前端开发
小程序全栈开发中的WebSocket实时通信实践
【10月更文挑战第3天】随着移动互联网的发展,小程序因便捷的用户体验和社交传播能力,成为企业拓展业务的新渠道。本文探讨了小程序全栈开发中的WebSocket实时通信实践,包括其实时通信、长连接及双向通信的特点,并通过实时聊天、推送、游戏和监控等功能的实现,展示了WebSocket在小程序中的应用。开发者需注意安全性、性能及兼容性等问题,以保障小程序的稳定运行和用户体验。
14 7
|
2月前
|
监控 小程序 安全
小程序全栈开发中的WebSocket实时通信实践是一种高效的开发模式。
随着移动互联网的发展,小程序成为企业拓展业务的新渠道。WebSocket作为一种实时通信协议,可在小程序中实现如实时聊天、推送、游戏等功能。它支持客户端与服务器间的全双工长连接通信,优于传统HTTP。开发者需注意安全、性能及兼容性等问题,以优化体验并保障稳定运行。掌握WebSocket有助于提升小程序功能性与用户体验。
42 1
|
2月前
|
缓存 小程序 定位技术
深度剖析:支付宝小程序走向成功的关键要素和实践路径
【8月更文挑战第27天】随着移动互联网的发展,小程序已成为各大平台不可或缺的一部分。支付宝小程序凭借其强大的生态系统和便捷服务脱颖而出。本文将通过案例和代码分析成功的支付宝小程序的打造过程:首先注重良好的用户体验,包括简洁的界面设计与快速响应;充分利用支付宝的功能如支付和地理位置服务吸引用户;进行性能优化如合理代码结构和缓存机制提升运行效率;采取精准营销策略增加用户关注度;并持续更新优化以适应市场变化和用户需求。
51 0
|
4月前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp微信小程序的“返家乡”高校暑期社会实践微信小程序的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的“返家乡”高校暑期社会实践微信小程序的详细设计和实现
23 1
|
4月前
|
文字识别 小程序 算法
视觉智能开放平台产品使用合集之通过小程序接入视觉智能开放平台API能力,不是上海地域的OSS链接,该怎么办
视觉智能开放平台是指提供一系列基于视觉识别技术的API和服务的平台,这些服务通常包括图像识别、人脸识别、物体检测、文字识别、场景理解等。企业或开发者可以通过调用这些API,快速将视觉智能功能集成到自己的应用或服务中,而无需从零开始研发相关算法和技术。以下是一些常见的视觉智能开放平台产品及其应用场景的概览。
|
4月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的“返家乡”高校暑期社会实践微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的“返家乡”高校暑期社会实践微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的面向智慧教育的实习实践系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的面向智慧教育的实习实践系统附带文章源码部署视频讲解等
22 0
|
4月前
|
小程序 前端开发 Java
(JAVA)支付宝小程序登录相关(authToken获取用户唯一userId、encryptedData解密手机号)
(JAVA)支付宝小程序登录相关(authToken获取用户唯一userId、encryptedData解密手机号)
265 0
|
4月前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的实践项目管理系统附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的实践项目管理系统附带文章和源代码部署视频讲解等
21 0
|
5月前
|
JavaScript Java 测试技术
返家乡”高校暑期社会实践微信小程序+springboot+vue.js附带文章和源代码设计说明文档ppt
返家乡”高校暑期社会实践微信小程序+springboot+vue.js附带文章和源代码设计说明文档ppt
33 0