鸿蒙环境服务端签名直传

服务端生成签名URL：

const express = require("express");
const mime = require("mime");
const OSS = require("ali-oss");
const app = express();
const port = 3000; // 监听端口

app.use(express.json());

app.use(express.urlencoded({ extended: false }));

app.post("/get_sign_url", async (req, res) => {
  const {
    fileName,
    method,
    headers = {},
    queries = {},
    additionalHeaders = [],
  } = req.body; // 从body中解析出数据
  const client = new OSS({
    region: "yourRegion",
    accessKeyId: "yourstsAccessKey",
    accessKeySecret: "yourstsAccessKeySecret",
    stsToken: "yourSTSToken",
    bucket: "yourBucket",
    authorizationV4: true,
  });

  const reqHeaders = {
    ...headers,
  };

  // 处理一下content-type
  if (fileName && method === "PUT") {
    const fileNameSplit = fileName.split(".");

    reqHeaders["content-type"] = mime.getType(
      fileNameSplit.length > 1 ? fileNameSplit[fileNameSplit.length - 1] : ""
    );
  }

  // 生成V4签名URL
  const url = await client.signatureUrlV4(
    method,
    300,
    {
      headers: reqHeaders,
      queries,
    },
    fileName,
    additionalHeaders
  );

  res.json({
    url,
    contentType: reqHeaders["content-type"],
  });
});

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`);
});

在客户端获取签名并使用签名URL上传文件：

import { http } from '@kit.NetworkKit';
import fs from '@ohos.file.fs';
import { request } from './request';

const serverUrl = 'http://x.x.x.x:3000/get_sign_url'; // 获取签名URL的服务器URL

/**
 * getSignUrl返回数据
 */
export interface ISignUrlResult {
  /** 签名URL */
  url: string;
  /** content-type */
  contentType?: string;
}

/**
 * 获取签名URL
 * @param fileName 文件名称
 * @param req 用于生成V4签名URL的请求信息
 * @param req.method 请求方式
 * @param [req.headers] 请求头
 * @param [req.queries] 请求查询参数
 * @param [req.additionalHeaders] 加签的请求头
 */
const getSignUrl = async (fileName: string, req: {
  method: 'GET' | 'POST' | 'PUT';
  headers?: Record<string, string | number>;
  queries?: Record<string, string>;
  additionalHeaders?: string[];
}): Promise<ISignUrlResult> => {
  console.info('in getSignUrl');

  try {
    const response = await request(serverUrl, {
      method: http.RequestMethod.POST,
      header: {
        'Content-Type': 'application/json'
      },
      extraData: {
        fileName,
        method: req.method,
        headers: req.headers,
        queries: req.queries,
        additionalHeaders: req.additionalHeaders
      },
      expectDataType: http.HttpDataType.OBJECT
    }, 200);
    const result = response.result as ISignUrlResult;

    console.info('success getSignUrl');

    return result;
  } catch (err) {
    console.info('getSignUrl request error: ' + JSON.stringify(err));

    throw err;
  }
};

/**
 * PutObject
 * @param fileUri 文件URI
 */
const putObject = async (fileUri: string): Promise<void> => {
  console.info('in putObject');

  const fileInfo = await fs.open(fileUri, fs.OpenMode.READ_ONLY);
  const fileStat = await fs.stat(fileInfo.fd);
  let signUrlResult: ISignUrlResult;

  console.info('file name: ', fileInfo.name);

  try {
    // 获取PutObject的签名URL
    signUrlResult = await getSignUrl(fileInfo.name, {
      method: 'PUT',
      headers: {
        'Content-Length': fileStat.size
      },
      additionalHeaders: ['Content-Length']
    });
  } catch (e) {
    await fs.close(fileInfo.fd);

    throw e;
  }

  const data = new ArrayBuffer(fileStat.size);

  await fs.read(fileInfo.fd, data);
  await fs.close(fileInfo.fd);

  try {
    // 使用PutObject方法上传文件
    await request(signUrlResult.url, {
      method: http.RequestMethod.PUT,
      header: {
        'Content-Length': fileStat.size,
        'Content-Type': signUrlResult.contentType
      },
      extraData: data
    }, 200);

    console.info('success putObject');
  } catch (err) {
    console.info('putObject request error: ' + JSON.stringify(err));

    throw err;
  }
};

export {
  getSignUrl,
  putObject
};

创建一个OSS Bucket，用于存储Web应用在浏览器环境中直接上传的文件。

1. 登录OSS管理控制台。

2. 在左侧导航栏，单击Bucket 列表，然后单击创建 Bucket。

3. 在创建 Bucket面板，选择快捷创建，按如下说明配置各项参数。

   参数	示例值
   Bucket名称	web-direct-upload
   地域	华东1（杭州）

4. 点击完成创建。

操作一：创建ECS实例

请您进入自定义购买页面，并根据如下各模块的内容，创建或选择购买ECS实例所需的基础资源。

操作二：连接ECS实例

1. 在云服务器ECS控制台的实例列表页面，根据地域、实例ID找到创建好的ECS实例，单击操作列下的远程连接。

2. 在远程连接对话框中，单击通过Workbench远程连接对应的立即登录。

3. 在登录实例对话框中，选择认证方式为SSH密钥认证，用户名为root，输入或上传创建密钥对时下载的私钥文件，单击确定，即可登录ECS实例。

   说明

   私钥文件在创建密钥对时自动下载到本地，请您关注浏览器的下载记录，查找.pem格式的私钥文件。

   

4. 显示如下页面后，即说明您已成功登录ECS实例。

操作三：在访问控制中创建RAM角色

1. 进入RAM访问控制的创建角色页面。

2. 在创建角色页面勾选阿里云服务，单击下一步。

   

3. 勾选普通服务角色，填写角色名称如oss-web-upload。并选择受信服务为云服务器后，单击完成，即可完成创建。

   

4. 单击复制，保存角色的ARN。

   

操作四：在访问控制中创建上传文件的权限策略

1. 在权限策略页面，单击创建权限策略。

2. 在创建权限策略页面，单击脚本编辑，将以下脚本中的<Bucket名称>替换为准备工作中创建的Bucket名称web-direct-upload。

   {
     "Version": "1",
     "Statement": [
       {
         "Effect": "Allow",
         "Action": "oss:PutObject",
         "Resource": "acs:oss:*:*:<Bucket名称>/*"
       }
     ]
   }

3. 然后单击确定，填写策略名称。

操作五：在访问控制为RAM角色授予权限

1. 在角色页面，找到目标RAM角色，然后单击RAM角色右侧的新增授权。

2. 在新增授权页面下的自定义策略页签，选择已创建的自定义权限策略。

3. 单击确定。

操作六：为ECS绑定RAM角色

1. 进入云服务器ECS的实例页面，在页面上方选择ECS实例所处地域，然后在实例页面单击目标实例右侧按钮，单击授予/收回RAM角色。

   

2. 在授予/收回RAM角色弹出框选择目标RAM角色，完成ECS绑定RAM角色。

   

操作一、ECS服务端配置依赖

请执行以下命令安装获取临时访问凭证所需要的依赖项。

sudo pip install oss2
sudo pip install alibabacloud_credentials

<!-- https://mvnrepository.com/artifact/com.aliyun/credentials-java -->
<dependency>
    <groupId>com.aliyun</groupId>
    <artifactId>credentials-java</artifactId>
    <version>0.3.4</version>
</dependency>

<dependency>
    <groupId>com.aliyun.kms</groupId>
    <artifactId>kms-transfer-client</artifactId>
    <version>0.1.0</version>
</dependency>

<dependency>
    <groupId>com.aliyun.oss</groupId>
    <artifactId>aliyun-sdk-oss</artifactId>
    <version>3.17.4</version>
</dependency>

操作二、在ECS服务端获取临时身份凭证

通过在业务服务器集成STS SDK，实现获取临时STS身份凭证，并将其返回给请求者。

from alibabacloud_credentials.client import Client as CredClient
from alibabacloud_credentials.models import Config as CredConfig

def main():
    # 配置ECSRAMRole作为访问凭证。
    credentialConfig = CredConfig(
        type='ecs_ram_role',
        role_name='ecs_role_name'       # 请填写ECS扮演的角色名称。
    )
    credentialsClient = CredClient(credentialConfig)
    credential = credentialsClient.get_credential()

    accesskeyid = credential.access_key_id            # 获取accesskeyid。
    accesskeysecret = credential.access_key_secret    # 获取accesskeysecret。
    security_token = credential.security_token        # 获取security_token。

    print("stsToken:", security_token)
    print("accesskeyid:", accesskeyid)
    print("accesskeysecret:", accesskeysecret)

if __name__ == "__main__":
    main()

import com.aliyun.credentials.models.CredentialModel;
import com.aliyun.oss.common.auth.Credentials;
import com.aliyun.oss.common.auth.CredentialsProvider;
import com.aliyun.oss.common.auth.DefaultCredentials;
import com.aliyun.oss.common.utils.BinaryUtil;

public class vxDemo {
    public static void main(String[] args) {
    
        // 配置ECSRAMRole作为访问凭证。
        com.aliyun.credentials.models.Config config = new com.aliyun.credentials.models.Config();
        config.setType("ecs_ram_role");
        config.setRoleName("ecs_role_name");   // 请填写ECS扮演的角色名称。
        final com.aliyun.credentials.Client credentialsClient = new com.aliyun.credentials.Client(config);
        CredentialsProvider credentialsProvider = new CredentialsProvider() {
            @Override
            public void setCredentials(Credentials credentials) {
            }

            @Override
            public Credentials getCredentials() {
                CredentialModel credential = credentialsClient.getCredential();
                return new DefaultCredentials(credential.getAccessKeyId(), credential.getAccessKeySecret(), credential.getSecurityToken());
            }
        };
        String accessKeyId = credentialsProvider.getCredentials().getAccessKeyId();             //获取accessKeyId。
        String secretAccessKey = credentialsProvider.getCredentials().getSecretAccessKey();     //获取secretAccessKey。
        String securityToken = credentialsProvider.getCredentials().getSecurityToken();         //获取securityToken。

        // 打印临时访问凭证信息。
        System.out.println("stsToken:" + securityToken);
        System.out.println("accessKeyId:" + accessKeyId);
        System.out.println("accesskeySecret:"+ secretAccessKey);
    }
}

客户端向服务端发送一个 POST 请求，包含文件名、HTTP 方法、请求头、查询参数等。服务端接收到请求后，通过OSS Client生成一个签名URL，该URL允许用户上传文件到OSS。

app.post('/get_sign_url', async (req, res) => {
    const {
        fileName,
        method,
        headers = {},
        queries = {},
        additionalHeaders = []
    } = req.body; // 从body中解析出数据
    const client = new OSS({
        region: 'yourRegion',
        // 填入步骤二中返回的临时访问凭证accessKeyId、accessKeySecret、stsToken
        accessKeyId: 'yourstsAccessKey',
        accessKeySecret: 'yourstsAccessKeySecret',
        stsToken: 'yourSTSToken',
        bucket: 'yourBucket',
        authorizationV4: true
    });

    const reqHeaders = {
        ...headers
    };

    // 处理一下content-type
    if (fileName && method === 'PUT') {
        const fileNameSplit = fileName.split('.');

        reqHeaders['content-type'] = mime.getType(fileNameSplit.length > 1 ? fileNameSplit[fileNameSplit.length-1] : '');
    }

    // 生成V4签名URL
    const url = await client.signatureUrlV4(method, 300, {
        headers: reqHeaders,
        queries
    }, fileName, additionalHeaders);

    res.json({
        url,
        contentType: reqHeaders['content-type']
    });
});

使用 @kit.NetworkKit 库的 http 模块来发送 HTTP 请求的异步函数 request。

import { http } from '@kit.NetworkKit';

const request = async (url: string, options: http.HttpRequestOptions, successCode: number[] | number) => {
  const httpRequest = http.createHttp();

  try {
    const httpResponse = await httpRequest.request(url, {
      ...options,
      priority: 1,
      connectTimeout: 60000,
      readTimeout: 60000,
      usingProtocol: http.HttpProtocol.HTTP1_1
    });

    if ((Array.isArray(successCode) && successCode.includes(httpResponse.responseCode)) || httpResponse.responseCode === successCode) {
      const requestID = httpResponse.header['x-oss-request-id'];

      console.info(`request success${requestID ? ', oss request ID: ' + requestID : ''}`);

      return httpResponse;
    } else {
      throw {
        code: httpResponse.responseCode,
        result: httpResponse.result.toString(),
        requestID: httpResponse.header['x-oss-request-id']
      };
    }
  } catch (err) {
    console.info('request error: ' + JSON.stringify(err));

    throw err;
  } finally {
    httpRequest.destroy();
  }
};

export {
  request
};

import { common } from '@kit.AbilityKit';
import abilityAccessCtrl from '@ohos.abilityAccessCtrl';
import picker from '@ohos.file.picker';

// 选择文件
const fileSelect = async (context: common.Context) => {
  const documentSelectOptions = new picker.DocumentSelectOptions();
  const documentViewPicker = new picker.DocumentViewPicker(context);

  documentSelectOptions.maxSelectNumber = 5;


  const documentSelectResult = await documentViewPicker.select(documentSelectOptions);

  return documentSelectResult;
};

export {
  fileSelect
};

客户端发起请求到服务器请求生成签名 URL。请求体包含了文件名、请求方法、头部信息等。成功响应后，返回签名 URL 和 Content-Type。如果请求失败，捕获并抛出错误。

const getSignUrl = async (fileName: string, req: {
  method: 'GET' | 'POST' | 'PUT';
  headers?: Record<string, string | number>;
  queries?: Record<string, string>;
  additionalHeaders?: string[];
}): Promise<ISignUrlResult> => {
  console.info('in getSignUrl');

  try {
    const response = await request(serverUrl, {
      method: http.RequestMethod.POST,
      header: {
        'Content-Type': 'application/json'
      },
      extraData: {
        fileName,
        method: req.method,
        headers: req.headers,
        queries: req.queries,
        additionalHeaders: req.additionalHeaders
      },
      expectDataType: http.HttpDataType.OBJECT
    }, 200);
    const result = response.result as ISignUrlResult;

    console.info('success getSignUrl');

    return result;
  } catch (err) {
    console.info('getSignUrl request error: ' + JSON.stringify(err));

    throw err;
  }
};

获取在服务端生成的签名URL，然后使用PutObject的方法上传文件。

const putObject = async (fileUri: string): Promise<void> => {
  console.info('in putObject');

  const fileInfo = await fs.open(fileUri, fs.OpenMode.READ_ONLY);
  const fileStat = await fs.stat(fileInfo.fd);
  let signUrlResult: ISignUrlResult;

  console.info('file name: ', fileInfo.name);

  try {
    // 获取PutObject的签名URL
    signUrlResult = await getSignUrl(fileInfo.name, {
      method: 'PUT',
      headers: {
        'Content-Length': fileStat.size
      },
      additionalHeaders: ['Content-Length']
    });
  } catch (e) {
    await fs.close(fileInfo.fd);

    throw e;
  }

  const data = new ArrayBuffer(fileStat.size);

  await fs.read(fileInfo.fd, data);
  await fs.close(fileInfo.fd);

  try {
    // 使用PutObject方法上传文件
    await request(signUrlResult.url, {
      method: http.RequestMethod.PUT,
      header: {
        'Content-Length': fileStat.size,
        'Content-Type': signUrlResult.contentType
      },
      extraData: data
    }, 200);

    console.info('success putObject');
  } catch (err) {
    console.info('putObject request error: ' + JSON.stringify(err));

    throw err;
  }
};