使用 react、web3.js 和 metamask 构建 web3 dapp 身份验证-ag九游会j9官方网站
ag九游会j9官方网站-j9九游会登录入口首页新版
ag九游会j9官方网站-j9九游会登录入口首页新版
api
j9九游会登录入口首页新版的解决方案
学堂
社区
控制台
注册
登录
/
/
文章详情
/
2
使用 react、web3.js 和 metamask 构建 web3 dapp 身份验证
2023-06-05
67 浏览
#区块链
返回文档
江海入海,知识涌动,这是我参与江海计划的第2篇。
我相信您和我一样对 web3 充满热情。本文介绍了一种新的区块链开发登录方法:使用 metamask 扩展的一键式加密安全登录流程,所有数据都存储在我们自己的后端。它还可以保护我们的数据和加密货币的安全。
在这里,我们将构建一个允许用户使用 metamask 登录的身份验证j9九游会登录入口首页新版的解决方案。
什么是metamask ?
metamask 是一个浏览器扩展和应用程序,将自己描述为加密钱包和区块链应用程序的网关。metamask 可作为浏览器扩展使用,您可以下载、安装和使用它。metamask 可帮助您管理控制您的以太坊地址的私钥,并促进加密交易和与区块链应用程序的交互。
他们的公共以太坊地址将用作唯一标识符,我们将使用 metamask 公开的私钥管理工具为用户提供一种机制来证明他们拥有该特定地址,从而有权以该用户身份登录。
先决条件
您需要先在浏览器中安装 metamask 钱包meta mask 网站。有了这个,您将可以访问一个独特的 ethtereum 公共地址,您可以使用该地址开始发送和接收以太币或代币。但是,我们将通过连接到您的 metamask 钱包并显示信息来保持简单。
深入研究我们的代码
我们将创建一个新的 react 项目,并开始编写一些我们需要连接 metamask 钱包的函数。
让我们从检测当前浏览器是否有 window.ethereum api 开始。metamask 将全球 api 注入其用户在 window.ethereum 访问的网站。该 api 允许网站请求用户的以太坊帐户,从用户连接的区块链中读取数据,并建议用户签署消息和交易。
window.ethereum
该 api 允许网站请求用户登录,从用户连接的区块链加载数据,并建议用户签署消息和交易。您可以使用此 api 来检测 web3 浏览器的用户。
window.web3
window.web3 仅在使用 http 或 https 协议查看页面时由 metamask 注入。因此,我们将检查这两个 api 是否已在网站中注入。
const detectcurrentprovider = () => {
let provider;
if (window.ethereum) {
provider = window.ethereum;
} else if (window.web3) {
provider = window.web3.currentprovider;
} else {
console.log(
'non-ethereum browser detected. you should consider trying metamask!'
);
}
return provider;
};
使用此功能,我们将知道我们是否有可用的 api,如果没有,我们将简单地记录消息。
让我们安装我们将要使用的 web3 包。web3.js 是以太坊区块链的 javascript 接口。
-获取链的最新区块(web3.eth.getblocknumber)
-查看metamask上当前活跃的账户(web3.eth.coinbase)
-获取任何账户的余额(web3.eth.getbalance) -
-发送交易(web3.eth.getbalance) eth.sendtransaction)
-使用当前账户的私钥签署消息 (web3.personal.sign)
还有很多
我们现在将创建下一个函数,它将与 web3.js 库通信并获取我们所需的信息。
const onconnect = async () => {
try {
const currentprovider = detectcurrentprovider();
if (currentprovider) {
if (currentprovider !== window.ethereum) {
console.log(
'non-ethereum browser detected. you should consider trying metamask!'
);
}
await currentprovider.request({ method: 'eth_requestaccounts' });
const web3 = new web3(currentprovider);
const useraccount = await web3.eth.getaccounts();
const chainid = await web3.eth.getchainid();
const account = useraccount[0];
let ethbalance = await web3.eth.getbalance(account); // get wallet balance
ethbalance = web3.utils.fromwei(ethbalance, 'ether'); //convert balance to wei
saveuserinfo(ethbalance, account, chainid);
if (useraccount.length === 0) {
console.log('please connect to meta mask');
}
}
} catch (err) {
console.log(
'there was an error fetching your accounts. make sure your ethereum client is configured correctly.'
);
}
};
在上面的代码中,我们有一个异步函数,它将调用 metamask 并获取我们请求的信息。我们想要获取有关我们的帐号、链 id、帐户和 eth 余额的信息。您可能还注意到我们还没有创建保存用户信息的功能。让我们创建一个将用户帐户信息保存到本地存储的函数,以便我们可以持久保存信息,除非断开连接。
const saveuserinfo = (ethbalance, account, chainid) => {
const useraccount = {
account: account,
balance: ethbalance,
connectionid: chainid,
};
window.localstorage.setitem('useraccount', json.stringify(useraccount)); //user persisted data
const userdata = json.parse(localstorage.getitem('useraccount'));
setuserinfo(userdata);
setisconnected(true);
};
我们创建一个函数,它接受三个参数并将信息保存到我们的本地存储中,这样我们就不会在用户不小心刷新浏览器时丢失。最后,使用 usestate 内置钩子设置我们的本地状态。
取得了很大的进步,因为即使我们刷新也不会丢失信息,这暂时解决了我们的数据持久性问题。我们现在还需要添加我们的功能来删除从 loacalstorage 存储的信息。
const ondisconnect = () => {
window.localstorage.removeitem('useraccount');
setuserinfo({});
setisconnected(false);
};
在上面的函数中,我们使用了当今所有浏览器都支持的 window 全局对象,并删除了存储在其中的对象和存储的键值。所有的事情都工作正常,但我们有一个问题。
我们连接到 metamask 并检索钱包信息,但如果我们刷新,我们将丢失 ui 中的信息。为了处理这些信息,我们将使用内置的反应钩子 useeffect 来检查我们是否在窗口全局对象中有这个对象。
useeffect(() => {
function checkconnectedwallet() {
const userdata = json.parse(localstorage.getitem('useraccount'));
if (userdata != null) {
setuserinfo(userdata);
setisconnected(true);
}
}
checkconnectedwallet();
}, []);
在这里我们检查我们是否已经将密钥存储在本地存储中,如果是,我们将设置我们的本地状态,如果我们没有此信息,我们将返回 void。
请
登录
后发表内容
2个评论
按发布时间降序
2023-06-05
返回文档
看看
2023-06-05
返回文档
真不错
关 注
相关文章
亚洲前沿科技展望:人工智能、云服务、芯片制造、web3和元宇宙
一个web3开发的入门历程
当互联网巨头卷入web3,新的问题出现了
区块链、web3、nft等新兴数字技术如何助力“双碳”?
web3.0对前端很友好?
热门文章
支付宝开发者日·厦门站
报名开启丨邀你一起探索云端 ai 新兴技术和发展模式
有奖捉虫,小程序云文档提升计划开始啦📢📢
【江海计划&小程序云开发者社区】9月开发者社区征文活动开启(2023年第八期)
社区每周丨ide 3.7.13 beta 版上线及产品面对面第三期即将开播(8.21-8.25)
热门问答
影视创作剪辑怎么提供资质
2023/09/17(至今3天没人解决) 当面付 统一收单线下交易预创建接口 官方php easysdk验签语法错误
请问下这个是什么错误?“tracert_error,当前页面尚未配置 spmb,请参考以下文章进行配置”
这些小程序名称恶意“蹭热度”,“蹭流量”而使用与热门活动或支付宝官方相同或相似的名称,从而引起用户混淆!
【文档反馈】什么是支付宝小程序云
您的社区活跃积分 3,登录后即可领取
网站地图