盐铁私有化部署秘宝账户

mibao.md

Clone 代码切换到 yantie 分支

git clone https://github.com/nervina-labs/nft-wallet
cd nft-wallet
git checkout yantie

安装必要依赖

首先安装 Node.js，版本要求为 v14。安装完毕后，安装 yarn 和项目依赖:

npm i -g yarn
# 安装项目依赖
yarn

修改 .env 文件

在根目录新建一个 .env 文件，根据开发环境不同，配置主网/测试网不同的 env 文件。

启动本地开发

yarn dev

编译文件

yarn build

编译文件在项目根目录的 build 文件夹，他是一个劫持了路由的 React SPA，文件由一个 HTML 和多个 JavaScript 文件构成， 可以把 build 文件夹的内容上传到 Nginx 或使用任意 HTTP 服务器。

运行命令 yarn start 会启动一个本地 HTTP server，serve build 文件夹。

准备好必要的权限

1. 盐铁小程序打开私有化部署秘宝 webview，需要秘宝部署后的根目录加上一个盐铁微信后台提供的鉴权文件；（可以在部署后添加此文件，可以把此文件放在 public 文件夹再编译部署）
2. 在秘宝 H5 领取页面领取完毕后，打开盐铁小程序，需要三个权限：

i. 初始化微信 JS SDK 的公众号的 key

ii. 盐铁小程序的 key

iii. 把私有化部署的秘宝 URL 添加到微信 JS 安全域名

实现跳转小程序逻辑

在秘宝 H5 领取页面领取完毕后，跳转到盐铁小程序，并带上登录状态。相关逻辑在：

https://github.com/nervina-labs/nft-wallet/blob/yantie/src/views/Claim/index.tsx#L175-L193

// baseURL 是私有化部署之后的秘宝 URL
const baseURL =
'https://nft-wallet-git-yantie-nervina.vercel.app'
// url 是需要跳转到秘宝的 URL 实例，里面包含了登录需要的参数
// 打开这个 url 会在秘宝中自动登录，并跳转到个人主页
const url = new URL(`${baseURL}/unipass`)
url.searchParams.set('action', UnipassAction.Sign)
const auth = await getAuth()
url.searchParams.set(
    'unipass_ret',
    JSON.stringify({
        code: 200,
        data: {
            pubkey,
            sig: auth.signature.replace(/^0x01/i, '0x'),
        },
    })
)

// 当前实现是跳转到测试环境的秘宝并自动登录
// 跳转到盐铁小程序的 webview 需要盐铁在拿到上述微信权限后，自行实现跳转逻辑
location.href = url.href