# wasmrs

**Repository Path**: arhao/wasmrs

## Basic Information

- **Project Name**: wasmrs
- **Description**: web中的WASM模块
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-10-28
- **Last Updated**: 2025-10-29

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

1、前端 web 为增加安全性，使用 Rust + WASM + IndexedDB + 加密库存储模块，构建 JS 的库，保存 token 及用户信息。请编写程序，并详细注释

## 快速构建与浏览器验证

下面步骤假定你已安装 Rust 工具链并已添加 wasm 目标：

```bash
# 如果尚未添加目标，请先运行：
# 添加 WASM 目标
rustup target add wasm32-unknown-unknown

# 安装 wasm-pack
curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh

# 使用 wasm-pack 构建（生成 pkg/ 目录）：
wasm-pack build --target web --out-dir pkg

# 或者，先构建 wasm 包（release 模式示例）：
cargo build --target wasm32-unknown-unknown --release
# 然后 使用 wasm-bindgen 生成浏览器可用的绑定（需先安装 wasm-bindgen-cli）：
wasm-bindgen target/wasm32-unknown-unknown/release/wasmrs.wasm --out-dir ./pkg --target web

```
生成的 `pkg/` 目录包含 `wasmrs.wasm` 与 JS 绑定文件，示例前端可以通过 `import` 或 `<script type="module">` 加载。

## 浏览器端使用示例（简体中文说明）

以下示例假定你已通过 `wasm-bindgen` 生成并在网页中加载了 WASM 包（示例里用 `wasm` 作为导入对象）：

```javascript
// 假设已经运行过 wasm-bindgen 生成并通过脚本加载/初始化
// import init, * as wasm from './pkg/wasmrs.js';
// await init('./pkg/wasmrs_bg.wasm');

(async () => {
	// 生成 32 字节 base64 密钥
	const key = wasm.generate_key_base64();

	// 使用密钥加密明文
	const enc = wasm.encrypt_base64(key, '这是要加密的 token');
	console.log('ciphertext (base64):', enc.ciphertext);
	console.log('iv (base64):', enc.iv);

	// 将密文写入 IndexedDB（数据库名: mydb，store: tokens，主键 key: 'token1'）
	await wasm.idb_set('mydb', 'tokens', 'token1', enc.ciphertext);

	// 从 IndexedDB 读取并解密
	const stored = await wasm.idb_get('mydb', 'tokens', 'token1');
	if (stored !== null) {
		const plaintext = wasm.decrypt_base64(key, stored, enc.iv);
		console.log('解密后明文：', plaintext);
	} else {
		console.log('未找到值');
	}
})();
```

## 注意事项

- `idb_set` 与 `idb_get` 都返回标准 `Promise`，在前端通过 `await` 使用。
- 加密采用 AES-256-GCM，密钥为 base64 编码的 32 字节随机数。IV 使用随机 12 字节（GCM 推荐）。
- 本库在浏览器环境中使用 IndexedDB 与 Crypto API，请在 HTTPS 或 localhost 下测试以保证 Crypto 与 IndexedDB 正常可用。

如果你希望我把一个最小的前端示例（HTML + JS）也加入仓库，我可以继续添加。


概念
wasm-bindgen：一套库 + CLI 工具，用于在 Rust <-> JavaScript 之间进行高层类型互转（字符串、JsValue、Promise、结构体等），由 Rust 导出带有 wasm-bindgen 注解的接口后，wasm-bindgen-cli 生成 JS glue（绑定代码）和 .wasm。
wasm-pack：面向发布与工程化的封装工具，封装了构建、调用 wasm-bindgen、打包（生成 pkg/ 与 package.json）、生成 Typings 并可发布到 npm 的一条龙流程。

主要区别（简短）
职责层级：wasm-bindgen 负责“绑定代码的生成”（低层），wasm-pack 负责“构建与发布工作流”（高层，内部会调用 wasm-bindgen）。
输出产物：wasm-bindgen-cli 直接输出 glue JS 和 wasm 文件；wasm-pack 进一步生成符合 npm 习惯的 pkg/ 目录、package.json、TypeScript 类型声明并可直接发布或被打包工具消费。
使用场景：需要精细控制绑定或只做单次绑定时用 wasm-bindgen；需要快速打包、生成 npm 包或集成到前端工程时用 wasm-pack。

选择建议（简短）
想要直接得到可在浏览器中方便调用的 JS/wasm 并集成到前端工程，使用 wasm-pack（更省事）。
需要自定义绑定流程或仅需 glue 文件（例如在 CI 中手动控制每一步），直接用 wasm-bindgen-cli。