記錄下web3.js連接，希望對像我一樣的小白有幫助。廢話不多說，開整！
一、先在瀏覽器上面下載 小狐貍MetaMask插件，然后創(chuàng)建賬戶，創(chuàng)建成功之后默認連接的是以太坊 Ethereum 主網(wǎng)絡，如果有相關網(wǎng)絡的信息(如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觸發(fā)連接，此時會彈出小狐貍連接的請求，如果用戶點擊成功連接，可以在then中獲取到賬戶的地址，如果用戶拒絕連接或者連接出錯則在catch中獲取相關錯誤
//獲取當前連接網(wǎng)絡的id
console.log(window.ethereum.chainId)
//主網(wǎng)絡是0x1,例如自己的網(wǎng)絡id是91199，要先轉為16進制再拼接0x開頭
let id=91196
let chainId = "0x" + id.toString(16)
if(chainId ==window.ethereum.chainId){
//當前連接的是自己的網(wǎng)絡
}else{
//反之連接的是其他網(wǎng)絡
}
//數(shù)據(jù)簽名以及驗簽
// 簽名：
//關于數(shù)據(jù)簽名可以用eth.sign或eth.personal.sign,函數(shù)一般傳遞3個參數(shù)，第一個簽名信息，第二個是簽名者的地址，第三個是回調函數(shù)。其區(qū)別在于eth.sign 函數(shù)需要傳遞給它的消息是消息哈希而 eth.personal.sign 函數(shù)需要傳遞給它的消息是未經(jīng)哈希處理的字符串，可以根據(jù)具體業(yè)務來選擇。
// eth.sign?
?let val = web3.value.utils.sha3('sss')//將數(shù)據(jù)消息哈希
? ? ? 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);
? ? ? ? }
? ? ? })
//簽名的時候會彈出簽名界面可以看到簽名消息內容，簽名成功后就會在回調函數(shù)中獲取到簽名之后的信息
//驗簽：
//可以通過eth.personal.ecRecover驗證簽名是否有效，傳入2個參數(shù)，一個是簽名前的消息和簽名后的消息，通過回調函數(shù)獲得該簽名的地址，如果該地址等于簽名者的地址，表明改簽名有效，反之無效
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);
//具體合約實例包含合約的方法及其他相關信息，如圖
五、源碼文章來源：http://www.zghlxwxcb.cn/news/detail-462588.html
<template>
<div @click="connection()">連接</div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import Web3 from 'web3'
import abi from "../abi/abi";
let web3 = ref() as any
defineProps<{ msg: string }>()
let address=ref()//小狐貍地址
let myContract=ref()//合約實例
const connection = () => {//鏈接小狐貍
window.ethereum.request({ method: 'eth_requestAccounts' }).then((res: any) => {
console.log(res, '這就是小狐貍地址')
address.value=res[0]
}).catch((err: any) => {
console.log(err)
if (err.code == 4001) {
console.log('用戶拒絕連接')
}
})
}
onMounted(() => {
if (typeof window.ethereum !== "undefined") {
console.log("安裝插件了");
} else {
console.log("沒安裝插件");
}
web3.value = new Web3(window.ethereum)
// const {abi} = require('../abi/abi')
myContract.value= new web3.value.eth.Contract(abi.abi, contractAddress.value);
console.log(myContract.value)//abi實例
let id=91196
let chainId = "0x" + id.toString(16)
if(chainId ==window.ethereum.chainId){
//當前連接的是自己的網(wǎng)絡
}else{
//反之連接的是其他網(wǎng)絡
}
//簽名及驗簽
// eth.sign
let val = web3.value.utils.sha3('sss')//將數(shù)據(jù)消息哈希
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);
web3.value.eth.personal.ecRecover('abc', sign).then(res => {
console.log(res)//獲得該簽名者的地址
})
}
})
})
</script>
<style scoped>
.read-the-docs {
color: #888;
}
</style>
六、總結
以上就是vue3連接小狐貍的流程，代碼上面有很多瑕疵，比如ts中引入abi.js一直在爆紅，提示無法找到js的申明模塊，雖然不影響使用但是還是看起來不舒服，還有就是當用戶第一次連接小狐貍的時候點擊拒絕了，再次點擊連接時，無法喚醒小狐貍連接界面，只能手動去點擊小狐貍圖標手動去點連接，我這邊一直沒有找到相關方法，如有解決的大佬還望不吝賜教。文章來源地址http://www.zghlxwxcb.cn/news/detail-462588.html
到了這里，關于記錄分享vue3通過web3.js連接MetaMask的流程及簽名、驗簽方法的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
