✍️

ethers.jsを使ってMetaMaskで署名してNode.jsで検証する方法

2022/08/19に公開2

この記事について

この記事では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)

ご覧のとおり署名と検証の手順は両者であまり違いがないのでどちらを使っても良いと思います。

GitHubで編集を提案

Discussion