Vue 3 与 MetaMask 连接：Web3.js 签名与验签详解

在Vue 3中，通过Web3.js连接MetaMask，实现数字签名和验签的流程大致如下：
步骤一：安装Web3.js
首先，你需要在你的Vue项目中安装Web3.js。你可以通过npm或yarn进行安装。在项目根目录下打开终端，然后运行以下命令：

npm install web3

或者

yarn add web3

步骤二：引入Web3.js
在你的Vue组件中，你需要引入Web3.js。在你的组件文件中，添加以下代码：

import { ref, onMounted } from 'vue';
import { Web3 } from 'web3';

步骤三：连接MetaMask
要连接MetaMask，你需要在你的组件中创建一个Web3实例，并使用它来连接到MetaMask。在你的组件文件中，添加以下代码：

export default {
setup() {
const web3 = new Web3(window.ethereum);
const accounts = ref([]);
const contract = ref(null);
const isMetaMaskConnected = ref(false);
onMounted(async () => {
try {
await window.ethereum.request({ method: 'eth_requestAccounts' });
isMetaMaskConnected.value = true;
accounts.value = await web3.eth.getAccounts();
} catch (error) {
console.error('Error connecting to MetaMask:', error);
}
});
},
};

步骤四：数字签名和验签
一旦你连接到MetaMask并获取到账户地址，你就可以使用Web3.js进行数字签名和验签了。下面是一个简单的示例：
首先，你需要定义一个函数来生成私钥：

function generatePrivateKey() {
return new Promise((resolve, reject) => {
web3.eth.getAccounts(function (err, res) {
if (err) { reject(err); } else { resolve(res[0]); }
});
});
}

然后，你可以定义一个函数来使用私钥对数据进行签名：

async function sign(data, privateKey) {
const rawTx = { chain: 'mainnet', nonce: '0x00', to: '0x...', value: '0x00', data, v: '0x19', r: '', s: '' }; // 这里需要填写正确的交易信息，包括to、value、data等字段。其中to字段是接收方的地址，value字段是交易金额，data字段是需要被签名的数据。v、r、s是签名结果中的三个字段。具体可以参考以太坊官方文档。
const signedTx = await web3.eth.accounts.sign(rawTx, privateKey); // 使用私钥对交易进行签名。签名后的交易会被返回在signedTx对象中。其中signedTx对象包含交易的哈希值、交易的完整内容、签名结果等字段。其中签名结果包含v、r、s三个字段。具体可以参考以太坊官方文档。
return signedTx; // 返回签名后的交易对象。其中包含了交易的哈希值、交易的完整内容、签名结果等字段。其中签名结果包含v、r、s三个字段。具体可以参考以太坊官方文档。
}