记录vue3通过web3.js连接MetaMask的流程和签名、验签方法

记录下web3.js连接，希望对像我一样的小白有帮助。废话不多说，开整！

一、先在浏览器上面下载 小狐狸MetaMask插件，然后创建账户，创建成功之后默认连接的是以太坊 Ethereum 主网络，如果有相关网络的信息(如RPC URL和和链id等，可以自己添加，没有就先不管)。

 二、本地项目库中下载web3.js的相关依赖
//在vue中安装web3
npm install web3 --save
//在项目页中引入
import Web3 from "web3";

三、相关调试代码

//可以在生命周期中判断浏览器有没有安装插件，减少无效交互
if (typeof window.ethereum !== "undefined") {
      console.log("安装插件了");
    } else {
      console.log("没安装插件");
    }
//通过相应判断给用户做出提示，如果window.ethereum提示红标的话，就在vite-env.d.ts文件中加上下面的即可
declare interface Window{
    ethereum:any
}

//开始连接，可以通过 window.ethereum.request触发连接，此时会弹出小狐狸连接的请求，如果用户点击成功连接，可以在then中获取到账户的地址，如果用户拒绝连接或者连接出错则在catch中获取相关错误

//获取当前连接网络的id

console.log(window.ethereum.chainId)

//主网络是0x1,例如自己的网络id是91199，要先转为16进制再拼接0x开头

let id=91196

let chainId = "0x" id.toString(16)

if(chainId ==window.ethereum.chainId){

//当前连接的是自己的网络

}else{

//反之连接的是其他网络

}

//数据签名以及验签
// 签名：
//关于数据签名可以用eth.sign或eth.personal.sign,函数一般传递3个参数，第一个签名信息，第二个是签名者的地址，第三个是回调函数。其区别在于eth.sign 函数需要传递给它的消息是消息哈希而 eth.personal.sign 函数需要传递给它的消息是未经哈希处理的字符串，可以根据具体业务来选择。
// eth.sign 
 let val = web3.value.utils.sha3('sss')//将数据消息哈希
      web3.value.eth.sign(val,address.value, (err, sign) => {
        if (err) { //签名失败
          console.error(err);
        } else { //签名成功
          console.log(sign);//返回的签名
        }
       }
// eth.personal.sign
web3.value.eth.personal.sign('abc', address.value, (err, sign) => {
        if (err) {
          console.error(err);
        } else {
          console.log(sign);
        }
      })

//签名的时候会弹出签名界面可以看到签名消息内容，签名成功后就会在回调函数中获取到签名之后的信息

//验签：
//可以通过eth.personal.ecRecover验证签名是否有效，传入2个参数，一个是签名前的消息和签名后的消息，通过回调函数获得该签名的地址，如果该地址等于签名者的地址，表明改签名有效，反之无效
web3.value.eth.personal.ecRecover('abc', sign).then(res => {
            console.log(res)//获得该签名者的地址
      })

 四、合约相关操作

 //如果需要调用合约方法，首先要引入JSON格式的合约abi，具体abi格式如图所示
import abi from "../abi/abi";

 //还需要合约地址和链id，获取合约实例（abi是合约，contractAddress是合约地址）
let myContract= new web3.value.eth.Contract(abi.abi, contractAddress);
//具体合约实例包含合约的方法及其他相关信息，如图

五、源码

1.  
    
2.  
   <template>
3.  
   <div @click="connection()">连接</div>
4.  
   </template>
5.  
   <script setup lang="ts">
6.  
   import { ref, onMounted } from 'vue'
7.  
   import Web3 from 'web3'
8.  
   import abi from "../abi/abi";
9.  
   let web3 = ref() as any
10.  
    defineProps<{ msg: string }>()
11.  
    let address=ref()//小狐狸地址
12.  
    let myContract=ref()//合约实例
13.  
    const connection = () => {//链接小狐狸
14.  
    window.ethereum.request({ method: 'eth_requestAccounts' }).then((res: any) => {
15.  
    console.log(res, '这就是小狐狸地址')
16.  
    address.value=res[0]
17.  
    }).catch((err: any) => {
18.  
    console.log(err)
19.  
    if (err.code == 4001) {
20.  
    console.log('用户拒绝连接')
21.  
    }
22.  
    })
23.  
    }
24.  
    onMounted(() => {
25.  
    if (typeof window.ethereum !== "undefined") {
26.  
    console.log("安装插件了");
27.  
    } else {
28.  
    console.log("没安装插件");
29.  
    }
30.  
    web3.value = new Web3(window.ethereum)
31.  
    // const {abi} = require('../abi/abi')
32.  
    myContract.value= new web3.value.eth.Contract(abi.abi, contractAddress.value);
33.  
    console.log(myContract.value)//abi实例
34.  
    let id=91196
35.  
    let chainId = "0x" id.toString(16)
36.  
    if(chainId ==window.ethereum.chainId){
37.  
    //当前连接的是自己的网络
38.  
     
39.  
    }else{
40.  
    //反之连接的是其他网络
41.  
    }
42.  
    //签名及验签
43.  
    // eth.sign
44.  
    let val = web3.value.utils.sha3('sss')//将数据消息哈希
45.  
    web3.value.eth.sign(val, address.value, (err, sign) => {
46.  
    if (err) { //签名失败
47.  
    console.error(err);
48.  
    } else { //签名成功
49.  
    console.log(sign);//返回的签名
50.  
    }
51.  
    }
52.  
    // eth.personal.sign
53.  
    web3.value.eth.personal.sign('abc', address.value, (err, sign) => {
54.  
    if (err) {
55.  
    console.error(err);
56.  
    } else {
57.  
    console.log(sign);
58.  
    web3.value.eth.personal.ecRecover('abc', sign).then(res => {
59.  
    console.log(res)//获得该签名者的地址
60.  
    })
61.  
    }
62.  
    })
63.  
     
64.  
    })
65.  
    </script>
66.  
    <style scoped>
67.  
    .read-the-docs {
68.  
    color: #888;
69.  
    }
70.  
    </style>

本篇文章来至：学新通