Ethereumウォレットアドレスの署名検証試してみた

こんにちは、サイオステクノロジーの和田です。今回はEthereumのウォレットアドレス（EOA）の本人確認をMetaMaskの署名機能を使って試したので、実装方法などを書いていきたいと思います。

1 署名の検証方法
2 実装
3 動作確認
4 まとめ

署名の検証方法

署名の検証を実装するために、以下のツールを使用しました。

フレームワーク
- Next
ライブラリ
- React
- Web3
- ethers
ブラウザ拡張機能
- MetaMask

署名の検証プロセスは以下の手順で行います。

MetaMaskでウォレットを接続する
MetaMaskで署名を作成する
署名とメッセージをサーバーに送信する
サーバー側で署名を検証する
クライアント側で署名の検証結果を受け取る

実装

それでは実装していきたいと思います。以下に実際に試したソースコードを記載します。

app/components/Web3Auth.tsx

"use client";

import { useState, useEffect } from "react";
import Web3 from "web3";

declare global {
  interface Window {
    ethereum?: any;
  }
}

const Web3AuthClient = () => {
  const [account, setAccount] = useState&lt;string | null>(null);
  const [message, setMessage] = useState&lt;string>("Sign this message to login.");
  const [web3, setWeb3] = useState&lt;Web3 | null>(null);
  const [recoveredAddress, setRecoveredAddress] = useState&lt;string>("");

  useEffect(() => {
    if (window.ethereum) {
      setWeb3(new Web3(window.ethereum));
    }
  }, []);

  const connectWallet = async () => {
    if (!web3) {
      alert("MetaMaskをインストールしてください。");
      return;
    }
    try {
      const accounts = await window.ethereum.request({
        method: "eth_requestAccounts",
      });
      setAccount(accounts[0]);
    } catch (error) {
      console.error(error);
    }
  };

  const signMessage = async () => {
    if (!web3 || !account) return;

    try {
      const signedMessage = await web3.eth.personal.sign(message, account, "");

      // API に署名データを送信して検証
      const response = await fetch("/api/verify-signature", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ message, account, signature: signedMessage }),
      });

      const result = await response.json();
      if (result.verified) {
        alert("署名の検証に成功しました。");
        setRecoveredAddress(result.recoveredAddress);
      } else {
        alert("署名の検証に失敗しました。");
      }
    } catch (error) {
      console.error(error);
    }
  };

  return (
    &lt;div className="p-4 border rounded shadow-md">
      &lt;h2 className="text-lg font-bold mb-2">Web3 認証&lt;/h2>
      {account ? (
        &lt;>
          &lt;p>
            接続したアカウント: &lt;strong>{account}&lt;/strong>
          &lt;/p>
          &lt;p>
            復元されたアドレス: &lt;strong>{recoveredAddress.toLowerCase()}&lt;/strong>
          &lt;/p>
          &lt;button onClick={signMessage} className="px-4 py-2 bg-blue-500 text-white rounded mt-2">
            署名を検証する
          &lt;/button>
        &lt;/>
      ) : (
        &lt;button onClick={connectWallet} className="px-4 py-2 bg-green-500 text-white rounded">
          ウォレットに接続する
        &lt;/button>
      )}
    &lt;/div>
  );
};

export default Web3AuthClient;

app/api/verify-signature/route.ts

import { NextRequest, NextResponse } from "next/server";
import { verifyMessage } from "ethers";

export async function POST(req: NextRequest) {
  try {
    const { message, account, signature } = await req.json();

    if (!message || !account || !signature) {
      return NextResponse.json({ error: "Missing parameters" }, { status: 400 });
    }

    const recoveredAddress = verifyMessage(message, signature);
    const isValid = recoveredAddress.toLowerCase() === account.toLowerCase();

    return NextResponse.json({ verified: isValid, recoveredAddress }, { status: isValid ? 200 : 401 });
  } catch (error) {
    console.error("Signature verification error:", error);
    return NextResponse.json({ error: "Internal server error" }, { status: 500 });
  }
}

app/page.tsx

import Web3Auth from "./components/Web3Auth";

export default function Home() {
  return (
    &lt;div className="min-h-screen flex items-center justify-center bg-gray-100">
      &lt;Web3Auth />
    &lt;/div>
  );
}