一种轻后端的 dApp 架构| Awesome FaaS 0x01

0x01 dApp

fork自scaffold-eth项目，用于钱包的连接、签名、交易发送等
使用react作为前端开发框架，antd作为组件库
实现细节：包括两个页面，即两个组件的实现

a. 获取会议信息页面

实现一个根据会议key搜索的组件
利用请求get_unsigned_msg（无参数）从后端获取未签名的消息
使用metamask对获取的消息进行签名
将会议key，签名地址，签名结果作为参数调用请求get_meeting从后端获取会议信息，如该地址不在白名单中：返回一个邮件信息，可申请白名单；如会议key不存在或签名结果错误：返回错误信息
关键代码分析

后端请求获得未签名消息并进行签名：

// 请求的设置如下，需POST，且body中含有一个params的数组
// 同时api url中的参数name指faas后端的模块名，func_name则为该模块中的函数名，
// 对应的参数放在body中的`params`数组中，后面的api调用均为此规则
var response = await fetch('https://faasbyleeduckgo.gigalixirapp.com/api/v1/run?name=Meeting&func_name=get_unsigned_msg', {
  method: 'POST', // 必须是POST请求
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ // body中必须是JSON字符串，且参数必须作为一个数组放在"params"这个key中
    params: [],
  }),
});
var res = await response.json();
if (!res?.result) { // 如果返回null，退出
  return;
}
var msg = res?.result;
var sig = await signer.signMessage(msg);

后端请求根据会议key获取会议信息：

response = await fetch('https://faasbyleeduckgo.gigalixirapp.com/api/v1/run?name=Meeting&func_name=get_meeting', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    params: [
      key,
      address,
      sig,
    ],
  }),
});
res = await response.json();
if (res?.result?.status === "ok") { // 正确返回时
  setIsWhiteListed(true);
  setData(JSON.parse(res?.result?.payload));
} else { // 错误返回时
  Modal.error({
    title: "错误",
    content: "您不是白名单用户，无法查询，请点击下面的链接申请白名单",
  })
  setIsWhiteListed(false);
}

b. 新建会议信息页面

实现一个会议信息表格组件
将表格中的会议信息JSON化后使用metamask对会议信息进行签名（删除其中的会议key一项，避免重复存储
将会议key，签名地址，会议信息的JSON字符串，签名结果作为参数调用请求put_meeting，如该地址不是admin，返回错误信息；如成功新建会议信息，返回会议key
关键代码分析

签名表格信息：

// 获取表格信息，随后删除key以避免`key-value`中重复存储会议的key
let values = form.getFieldsValue();
delete values.key; // delete values.key
// 将表格信息JSON字符串化用于作为签名消息
var meeting_info = JSON.stringify(values)
// 使用`scaffold-eth`提供的signer对象对meeting_info进行签名
var sig = await signer.signMessage(meeting_info);

调用后端api：

// 直接使用fetch函数调用后端api即可
var response = await fetch('https://faasbyleeduckgo.gigalixirapp.com/api/v1/run?name=Meeting&func_name=put_meeting', {
  method: 'POST', // 必须是POST请求
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    "params": [ // body中必须是JSON字符串，且参数必须作为一个数组放在"params"这个key中
      key,
      address,
      meeting_info,
      sig,
    ]
  })
});
var res = await response.json(); // 等待回复
if (res?.result?.status === "ok") { // 如果请求成功做相应处理
  // success
} else { // 请求失败
  // failed
 }

c. 操作流程

新建会议：填写会议信息 => 提交 => 签名 => ok

获取会议：输入会议key => 查询 => 签名 => ok

itherunder/0x01 dApp.md

0x01 dApp