✍️
ethers.jsを使ってMetaMaskで署名してNode.jsで検証する方法
この記事について
この記事ではethers.jsを使ってフロントエンドのMetaMaskで署名してバックエンドのNode.jsで検証する方法について紹介します。この記事の関連リソースを下記に示します。
コーディングの準備
ターミナルで下記のコマンドを実行してコーディングの準備をします。
npx create-next-app --typescript how-to-sign-and-verify-using-ethersjs
cd how-to-sign-and-verify-using-ethersjs
touch pages/sign.tsx pages/api/verify.ts
npm install --save ethers
コーディング
エディタで下記のファイルを開いて内容を入力します。
pages/sign.tsx
pages/api/verify.ts
動作確認
ターミナルで下記のコマンドを実行してサーバーを起動します。
npm run dev
ブラウザで http://localhost:3000/sign にアクセスします。
Signボタンをクリックします。
MetaMask Notificationポップアップが表示されたらSignボタンをクリックします。
Signボタンの直後にVerified!とメッセージが表示されることを確認します。
参考画像
おわりに
下記の記事で紹介されているように署名と検証を利用してユーザー認証を行うことができます。
DApps のユーザー認証に web3.eth.personal.sign を使おう! - Tech Inside Drecom
初めはweb3.jsを使おうと思い、署名と検証の方法を下記の記事にまとめました。
web3.jsを使ってMetaMaskで署名してNode.jsで検証する方法
途中でethers.jsを使いたくなってこの記事を投稿した次第です。
web3.jsとethers.jsの比較
web3.jsとethers.jsの署名の手順についてはそれぞれ下記の通りです。
web3js-sign.js
const web3 = new Web3(window.ethereum)
const message = 'message'
const [address] = await web3.eth.personal.getAccounts()
const password = ''
const signature = await web3.eth.personal.sign(message, address, password)
ethers-sign.js
const provider = new ethers.providers.Web3Provider(window.ethereum)
const message = 'message'
const signer = await provider.getSigner()
const signature = await signer.signMessage(message)
また、web3.jsとethers.jsの検証の手順についてはそれぞれ下記の通りです。
web3js-verify.js
const web3 = new Web3()
const address = web3.eth.accounts.recover(message, signature)
ethers-verify.js
const digest = ethers.utils.hashMessage(message)
const actual = ethers.utils.recoverAddress(digest, signature)
ご覧のとおり署名と検証の手順は両者であまり違いがないのでどちらを使っても良いと思います。
Discussion
素晴らしい記事ありがとうございます!!
Kenshiro さん、ありがとうございます!
コメントをいただけて嬉しいです。
こちらこそ読んでいただき感謝です 😄