uniapp连接到MetaMask钱包插件
uniapp调起MetaMask插件的登录
·
首先第一步,我们需要检测用户是否安装了MetaMask这个插件
我们这里需要安装一个包,叫做@metamask/detect-provider
这个可以百度一下用npm安装到对应的项目中就可以了
将这个包引入 :
import detectEthereumProvider from "@metamask/detect-provider"
检测是否安装了MetaMask插件
async setPeovider() { // 检测提供者
uni.showLoading({
title: '检测授权中...',
mask: true
});
const provider = await detectEthereumProvider();
if (provider) {
this.startApp(provider); // Initialize your app
} else {
uni.showToast({
title: '请先安装MetaMask插件',
icon: 'none',
duration: 3500
});
return false;
}
},
这一步可以看成检测插件
startApp(provider) {
if (provider !== window.ethereum) {
uni.showToast({
title: '安装了多个钱包,加载失败',
icon: 'none',
duration: 3500
});
return false
} else {
uni.showLoading({
title: '登录中...',
mask: true
});
}
this.login_metamask()
},
然后就调起登录框,登录相应的账号
对应的还有一些事件的回调,下面的代码中也都写了注释
login_metamask() {
this.eth_requestAccounts(); // 拿到账户对应的账号
ethereum.on('accountsChanged', (accounts) => { // 地址修改时收到通知
localStorage.clear()
this.setPeovider(); // 重新登录
});
ethereum.on('connect', (connectInfo) => { // 当 MetaMask 提供者第一次能够向链 提交 RPC 请求时,它会发出此事件。
uni.clearStorage();
// Time to reload your interface with accounts[0]!
this.loginDapp();
});
ethereum.on('disconnect', (error) => { // 如果 MetaMask 提供者无法向任何链提 交 RPC 请求,它会发出此事件。
// 这里可以打印一下error
});
// ethereum.on('message', (message) => { // MetaMask 提供者在收到一些应该通知消费者的消息时发出此事件。
// console.log(message.data.result.hash)
// })
},
eth_requestAccounts() { // 链接到MetaMask
ethereum.request({
method: 'eth_requestAccounts'
}).then((account) => {
this.$store.commit('accounts/connect_wallet', account[0]);
localStorage.setItem('accounts', account)
this.loginDapp();
});
},
loginDapp() { // 登录dapp (获取dapp信息)
this.$appReq.post("login/registerByDapp", {
'tuiguang_address': this.other.tuiguang_address,
'username': this.accounts.current_address
}, (res) => {
if (res.data.code == 1) {
if (!this.accounts.user) {
this.$store.commit('accounts/login', res.data.data);
}
this.asyncUser(res.data.data);
} else {
this.is_mm = false;
this.tips = res.data.msg;
uni.showToast({
title: res.data.msg,
icon: 'none'
});
}
});
},
asyncUser(userMsg) {
let that = this
this.$appReq.post("user/asyncUser", {}, (res) => {
// console.log("=================user==============");
that.third_login(userMsg)
if (res.data.code == 1) {
setTimeout(() => {
this.getTeamPerson();
}, 600);
} else {
uni.showToast({
title: res.data.msg,
icon: 'none'
});
}
});
},
third_login(userMsg) { // 登录
let name = userMsg.name
let head = userMsg.head
let account = userMsg.address
let that = this
global.$http
.request({
url: '/api/login/third_login',
data: {
name,
head,
account,
}
})
.then(res => {
res.data.data.address = account
let data = JSON.stringify(res.data.data)
localStorage.setItem('userMsg', data)
uni.showToast({
title: res.data.msg,
icon: 'none',
duration: 3500
});
localStorage.setItem('token', res.data.data.token)
uni.$emit('userMsgToken')
});
},
getTeamPerson() {
this.$appReq.post("user/getTeamPerson", {}, (res) => {
// console.log("=================getTeamPerson==============");
// console.log(res);
if (res.data.code == 1) {
this.$store.commit('other/setTeamPerson', res.data.data);
this.$forceUpdate();
} else {
this.$store.commit('other/setTeamPerson', false);
/* uni.showToast({
title:res.data.msg,
icon:'none'
}); */
}
});
this.$appReq.post("user/getTeamPerson2", {}, (res) => {
// console.log("=================getTeamPerson2==============");
// console.log(res);
if (res.data.code == 1) {
this.$store.commit('other/setTeamPerson2', res.data.data);
this.$forceUpdate();
} else {
this.$store.commit('other/setTeamPerson2', false);
/* uni.showToast({
title:res.data.msg,
icon:'none'
}); */
}
});
},
更多推荐
已为社区贡献1条内容
所有评论(0)