Web3.0 DApp（去中心化应用程序）设计架构

Posted 2023-04-06 元宇宙中心

先来回顾下 Web2.0 应用程序架构，一图胜千言：

 

图示是对大多数 Web 2.0 应用程序如何工作的一个很好的抽象总结。以一个博客平台为例：

首先，必须有一个地方来存储基本数据，也就是数据库；

其次，要有后端代码（用 Node.js、Java 或 Python 等语言编写），用于定义业务逻辑；

第三，还要有前端代码（通常用 javascript、html 和 CSS 编写），用于实现 UI 和交互；

这些代码都托管在集中式服务器上。

---

视角来到 Web3.0 ，消除了中心化，没有集中式的数据库，没有存放后端代码的集中式 Web 服务器。采用了区块链技术，在互联网上的匿名节点维护的分布式 状态机 上构建应用程序。

“状态机”是指一台机器，它维护一些给定的程序状态、以及该机器上允许的未来状态，它具有非常严格的规则（即共识）来定义状态如何转换。

没有一个实体可以控制这个分布式的状态机 —— 它由网络中的每个人共同维护。

后端逻辑代码化身成状态机上的“智能合约”，这是开源的。

前端部分呢？暂按下不表，先看此时数据库、后端代码演变后的架构图：

 

再进一步看看这些新颖的概念：

• ethereum blockchain，以太坊区块链，被认为是“世界计算器”，一个可全局访问的状态机，对等节点网络维护，状态的更改遵循共识规则的约束；只要是写入了数据，就会被记录，数据不能再更新回去；
• 智能合约：以太坊上运行的程序，由高级编程语言编写，例如 Solidity 或 Vyper；

 

任何人都能检查智能合约是否合理；

• EVM 虚拟机，用于执行合约的环境，相当于执行引擎；

---

OK，视野来到了前端代码部分。按道理将，前端代码应该也是用智能合约的方式实现，实际上，它也确实如此，不过要更为复杂一点。

当我们想要与区块链上的数据和代码进行交互时，我们需要与这些节点中的一个进行交互。任何节点都可以广播在 EVM 上执行交易的请求，然后矿工将执行交易并将结果状态更改传播到网络的其余部分。

广播新交易有两种方式：

1. 设置自己运行以太坊区块链软件的节点；
2. 使用Infura、 Alchemy和Quicknode等第三方服务提供的节点；

借助第三方节点可能会更轻松一点，它的逻辑是这样的：

 

 

每个以太坊客户端（即提供者）都实现了 JSON-RPC 规范。这确保了当前端应用程序想要与区块链交互时，有一组统一的方法。JSON-RPC 是一种无状态、轻量级的远程过程调用 (RPC) 协议，定义了多个数据结构及其处理规则。它与传输无关，可以通过多种方式传输，比如 HTTP、套接字、其它传输环境，JSON (RFC 4627) 作为一种数据格式。

还有一个很重要的东西，进行身份验证，鉴权。通常借助 Metamask 实现；

 

 

Metamask 将用户的私钥存储在浏览器中，每当前端需要用户签署交易时，它就会调用 Metamask。

---

将所有内容都存储在区块链上是很昂贵的，更新数据都需要收费，所以还有一个 去中心化的链下存储解决方案 —— IPFS/Swarm

架构图如下：

 

 

IPFS/Swarm 是用于存储和访问数据的分布式文件系统，你可以轻松去检验它。

到目前为止，我们已经讨论了如何写入，那如何读取数据呢？

答案是借助 The Graph，The Graph 是一种链下索引解决方案，可以更轻松地查询以太坊区块链上的数据。前端工程师可以直接调用，这比传统的 REST API 更具有吸引力。

现在，Dapp 架构如下：

 

 

截至目前，架构图已初成雏形。

引申补充，完整的实现上图这一架构，成本有点高昂。所以，有一种流行的扩展方案 —— L2 scaling 解决方案

 

在侧链操作，然后提交到主链。

 

这样既节约成本，又能达到目的，真是大聪明。

本瓜就把这个侧链执行，理解为代码的预编译吧，编译后再放到浏览器引擎上做真正的编译执行。

我们团队从2016年做区块链技术开发以来一直从事前言技术探索和产品开发，2020年gamefi 爆发以来持续关注gamefi的最新动态并为大大小小的企业团队设计开发几十款链游产品，并且打造自己的元宇宙生态，如果有兴趣的团队个人可以和我们合作一起研发打造最新最有价值的区块链产品。

DAPP开发中Web3唤醒MetaMask签名数据+Java校验签名实现去中心化和中心化用户数据的鉴权

        使用场景大多数用在DAPP中调用中心化数据或者操作某些中心化功能的时候通过DAPP调用MetaMask钱包对数据进行签名传递给后台，后台验证签名数据是否是否当前用户钱包地址签名的数据实现鉴权。

一、DAPP端用Web3签名数据

注：不同的web3版本签名代码有点差异

1、0.26版本签名 web3.personal.sign

//参数1：要签名的数据
//参数2：签名的钱包地址
web3.personal.sign(web3.fromUtf8("Hello Dapp"), "0x40141cF4756A72DF8D8f81c1E0c2ad403C127b9E",(err, res) => {
          console.log("签名后的数据：",res)
          //0x53ea88d24f4ef8cdcc4bcc843912510b065cd6014c453ff61316c4cd75162f0a38f83a2103da028fb8e5181292ba194b0c8aa21a9ddacdf6783ebfa608889d121c
      })

//web3.eth.sign此签名方法MetaMask会提示未来版本会被移除

2、1.0版本签名  web3.eth.personal.sign

3、唤醒MetaMask钱包签名数据

签名后数据为：0x53ea88d24f4ef8cdcc4bcc843912510b065cd6014c453ff61316c4cd75162f0a38f83a2103da028fb8e5181292ba194b0c8aa21a9ddacdf6783ebfa608889d121c

二、Java端使用Web3J校验数据

1、正常校验 true

 2、改变下钱包地址在次校验 false

 三、后端源码-来源于github上的源码

1、web3j包

    <dependency>
            <groupId>org.web3j</groupId>
            <artifactId>core</artifactId>
            <version>3.6.0</version>
        </dependency>

2、校验源码 

package zh.block.manage.common.utils;

import org.web3j.crypto.*;
import org.web3j.utils.Numeric;
import org.web3j.crypto.Sign.SignatureData;

import java.math.BigInteger;
import java.util.Arrays;

/**
 * 以太坊签名消息校验工具
 */
public class MetaMaskUtil {
    /**
     * 以太坊自定义的签名消息都以以下字符开头
     * 参考 eth_sign in https://github.com/ethereum/wiki/wiki/JSON-RPC
     */
    public static final String PERSONAL_MESSAGE_PREFIX = "\\u0019Ethereum Signed Message:\\n";

    public static void main(String[] args) {
        //签名后的数据
        String signature="0x53ea88d24f4ef8cdcc4bcc843912510b065cd6014c453ff61316c4cd75162f0a38f83a2103da028fb8e5181292ba194b0c8aa21a9ddacdf6783ebfa608889d121c";
        //签名原文
        String message="Hello Dapp";
        //签名的钱包地址
        String address="0xc290436b3da897115493a1547B52783c50f0Bef3";
        Boolean result = validate(signature,message,address);
        System.out.println(result);
    }
    /**
     * 对签名消息，原始消息，账号地址三项信息进行认证，判断签名是否有效
     * @param signature
     * @param message
     * @param address
     * @return
     */
    public static boolean validate(String signature, String message, String address) {
        //参考 eth_sign in https://github.com/ethereum/wiki/wiki/JSON-RPC
        // eth_sign
        // The sign method calculates an Ethereum specific signature with:
        //    sign(keccak256("\\x19Ethereum Signed Message:\\n" + len(message) + message))).
        //
        // By adding a prefix to the message makes the calculated signature recognisable as an Ethereum specific signature.
        // This prevents misuse where a malicious DApp can sign arbitrary data (e.g. transaction) and use the signature to
        // impersonate the victim.
        String prefix = PERSONAL_MESSAGE_PREFIX + message.length();
        byte[] msgHash = Hash.sha3((prefix + message).getBytes());

        byte[] signatureBytes = Numeric.hexStringToByteArray(signature);
        byte v = signatureBytes[64];
        if (v < 27) {
            v += 27;
        }

        SignatureData sd = new SignatureData(
                v,
                Arrays.copyOfRange(signatureBytes, 0, 32),
                Arrays.copyOfRange(signatureBytes, 32, 64));

        String addressRecovered = null;
        boolean match = false;

        // Iterate for each possible key to recover
        for (int i = 0; i < 4; i++) {
            BigInteger publicKey = Sign.recoverFromSignature(
                    (byte) i,
                    new ECDSASignature(new BigInteger(1, sd.getR()), new BigInteger(1, sd.getS())),
                    msgHash);

            if (publicKey != null) {
                addressRecovered = "0x" + Keys.getAddress(publicKey);

                if (addressRecovered.equals(address)) {
                    match = true;
                    break;
                }
            }
        }
        return match;
    }
}

多链钱包充提系统

学如逆水行舟，不进则退。心似平原跑马，易放难收。【区块链】【系统/网络/运维】【云计算/大数据】【数据库】【移动开发】【后端开发】【游戏开发】【UI设计】【微服务】【爬虫】【Java】【Go】【C++】【PHP】【Python】【Android/IOS】【HTML/CSS】【JavaScript】【Node】【VUE】【ReactNaive】。。。

欢迎各位大神萌新一起专研分享各行各业技术!

Chain区块链开发社区：593674370