我最近在重新学ethers.js
,巩固一下细节,也写一个WTF Ethers极简入门
,供小白们使用。
WTF Academy社群: 官网 wtf.academy | WTF Solidity教程 | discord | 微信群申请
所有代码和教程开源在github: github.com/WTFAcademy/WTFEthers
这一讲,我们将介绍如何通过 ethers.js
在网页上连接小狐狸钱包,实现MetaMask签名授权后完成登录功能
Metamask
Metamask(小狐狸)钱包是以太坊最受欢迎的开源钱包,它可以作为PC端的浏览器插件或移动端(安卓和苹果)的APP使用。
在使用Metamask开发前,你需要先下载它。记住:
一定要在官网上下载: https://metamask.io/download/
一定要在官网上下载: https://metamask.io/download/
一定要在官网上下载: https://metamask.io/download/
重要的事情说三遍。很多多用户钱包被盗,就是下载了盗版的小狐狸钱包之后输入了助记词/私钥。
连接metamask
在安装好metamask钱包后,浏览器会给每个页面注入一个window.ethereum
对象,用于和钱包交互。ethers.js
提供的 BrowserProvider
封装了一个标准的 Web3 Provider,直接在程序中生成一个provider对象,方便使用:
之后就像 ethers.js
中的 provider
一样使用就好,下面举几个例子。
首先,我们先写一个简单的HTML页面,因为小狐狸钱包是浏览器插件,必须在浏览器中使用。

然后我们写一些javascript
脚本嵌入进去。
-
引入
ethers.js
包,获取页面中的按钮和文本变量,给按钮加一个监听器,被点击时会触发onClickHandler()
函数。 -
接下来我们创建一个变量模拟后台数据库,保存着用户的信息
-
写模拟后台接口的方法:通过地址获取后端生成的随机数 nonce,用于签名
-
写模拟后台接口的方法:验证用户签名是否正确
-
我们写
onClickHandler()
函数的内容,首先连接metamask,创建provider
变量,获取后端需要签名的接口数据,拿到数据后进行签名,再次请求后端验证签名是否正确 -
在本地运行时,你需要安装
http-server
包,你可以用下面这个命令通过npm
它。然后切换到相应的文件夹,输入下面命令来运行这个网页。注意,直接点击
.html
文件是不能运行的。如果你看到下面的输出,说明运行成功,打开下面给出的网址就可以打开网页了。
打开当前教程页面

在项目中的运用
最大的用处就是通过这种登录方式让 以太坊地址(EVM)用户 登录到 中心化平台
如何使用Metamask进行一键式登录流程
一键式登录流程的基本思想是,通过使用私钥对一段数据进行签名,可以很容易地通过加密方式证明帐户的所有权。如果您设法签署由我们的后端生成的精确数据,那么后端将认为您是该钱包地址的所有者。因此,我们可以构建基于消息签名的身份验证机制,并将用户的钱包地址作为其标识符。
在项目设计中,整个登录流程如何工作
- 第1步:后台用户数据表(后端):后端保存
address
和 address对应的nonce
- 第2步:生成随机数(后端):对于数据库中的每个
address
,在 nonce 字段中生成随机字符串 - 第3步:用户获取他们的随机数(前端):通过后端接口拿到
address
的nonce - 第4步:用户签署Nonce(前端):对nonce进行签名
- 第5步:签名验证(后端):根据请求消息体中 address 获取数据库中的对应用户,特别是它相关的随机数 nonce ,然后对签名进行校验,检验成功证明了拥有钱包地址的所有权,然后可以将JWT或会话标识符返回到前端,完成登录
- 第6步:更改Nonce(后端):修改nonce,防止用户相同的nonce和签名再次进行登录(防止泄露)
PS:这里的nonce可以是一个需要签名的字符串,不是说一定是随机数也可以是类似这样的;很多项目sign都不是单独的一个nonce,通常会带上一些其他内容
类似这样
ethers.verifyMessage(nonce, signature) 在后端的实现
Java 后端项目 maven导入web3j
Java main方法示例代码
Java 封装的工具类
总结
这一讲,我们介绍如何通过 ethers.js
在网页上连接小狐狸钱包,实现MetaMask签名授权后完成登录功能,用户一个钱包地址完成一个登录中心化网站的登录流程