イーサリアム身分証明認証の新しい選択肢：SIWE実現の詳細と実践ガイド

2025-07-08 19:29:57

イーサリアム身分証明:SIWE実現ガイド

SIWE(イーサリアムでサインイン)は、イーサリアムに基づくユーザーの身分証明方式であり、ウォレットが取引を開始するのに似ており、特定のウォレットに対するユーザーの制御権を証明するために使用されます。現在、主流のウォレットプラグインは、この簡単な身分証明方式をサポートしており、プラグイン内で情報に署名するだけで済みます。

本文はイーサリアム上のSIWE実装に焦点を当て、SolanaやSUIなどの他のパブリックチェーンには触れません。

SIWEのユースケース

もしあなたの分散型アプリ(Dapp)が以下の要件を持っている場合、SIWEの使用を検討できます:

独立したユーザーシステムを持つ
ユーザーのプライバシーに関連する情報を確認する必要があります

クエリを主とするアプリケーション(、例えばブロックエクスプローラー)の場合、SIWEを使用しなくても問題ありません。

Dappではウォレット接続を通じて身分証明が可能ですが、これはフロントエンドにのみ有効です。バックエンドサポートが必要なインターフェース呼び出しにおいて、アドレス情報を渡すだけでは身分証明として不十分です。なぜなら、アドレスは公開情報だからです。

SIWEの仕組み

SIWEのプロセスは、3つのステップで要約できます: ウォレットの接続、署名、身分証明の取得。

ウォレットを接続する

これは一般的なWeb3操作で、Dapp内でウォレットプラグインを通じてユーザーのウォレットを接続します。

サイン

署名手順には、Nonce値の取得、ウォレット署名、バックエンド署名検証が含まれます。

バックエンドはランダムなNonce値を生成し、アドレスと関連付けて、後続の署名の準備を行います。フロントエンドはNonce値を取得した後、Nonce値、ドメイン、チェーンIDなどの情報を含む署名内容を構築し、ウォレットが提供する方法を使用して署名を行います。最後に、署名をバックエンドに送信して検証します。

ID を取得する

バックエンドで署名の検証が成功した後、ユーザーの身分証明(を返します。JWT)のように。フロントエンドはその後のリクエストでアドレスと身分証明を携帯し、ウォレットの所有権を証明できます。

! SIWEマニュアル:Dappをより強力にする方法は?

SIWE実装例

以下は、NextjsプロジェクトにおいてSIWE機能を実装し、Dappがユーザーの身分証明のためにJWTを返す方法を示します。

###環境の準備

この例はNextjsを基に開発されており、Node.js環境を準備する必要があります。Nextjsを使用することで、フルスタックプロジェクトを簡単に開発でき、フロントエンドとバックエンドを分離する必要はありません。

依存関係をインストールする

まずNextjsをインストールします:

npx create-next-app@14

提示に従ってインストールを完了した後、プロジェクトディレクトリに移動し、起動します:

npm run dev

localhost:3000にアクセスすると、基本的なNextjsプロジェクトが表示されます。

SIWE関連の依存関係をインストールする

私たちはAnt Design Web3を使用してウォレット接続を実現します。これは無料で、継続的にメンテナンスされ、一般的なコンポーネントライブラリに似た使用体験を提供し、SIWE機能をサポートしています。

関連する依存関係をインストールする:

npm install antd @ant-design/web3 @ant-design/web3-wagmi wagmi viem @tanstack/react-query --save

Wagmi の設定

layout.tsx に WagmiProvider を導入します。

タイプスクリプト "クライアントを使用する"; import { getNonce, verifyMessage } from "@/app/api"; インポート{ メインネット、メタマスク Okxウォレット、トークンポケット, WagmiWeb3ConfigProvider、ウォレットコネクト、 } から "@ant-design/web3-wagmi"; import { QueryClient } from "@tanstack/react-query"; import React from "react"; import { createSiweMessage } from "viem/siwe"; import { http } from "wagmi"; import { JwtProvider } from "./JwtProvider";

const YOUR_WALLET_CONNECT_PROJECT_ID = "c07c0051c2055890eade3556618e38a6"; const queryClient = 新しいQueryClient();

const WagmiProvider: React.FC = ({ children }) => { const [jwt, setJwt] = React.useState(null);

リターン( <wagmiweb3configprovider siweconfig="{{" getnonce:="" async="" (address)=""> (await getNonce(address)).data, createMessage: (props) => { 戻り値 createSiweMessage({ ... props, statement: "Ant Design Web3" }); }, verifyMessage:非同期(message、signature) = > { const jwt = (await verifyMessage(message、signature)).data; setJwt(jwt); 帰る！！ JWTの; }, ｝｝ chains={[Mainnet]} transports={{ [Mainnet.id]:http()、｝｝ walletConnect={{ projectId: YOUR_WALLET_CONNECT_PROJECT_ID、｝｝ wallets={[ MetaMask()、 WalletConnect()、 TokenPocket({ グループ: "人気", }), OkxWallet()、 ]} queryClient={クエリクライアント} > {子供} ); };

export default WagmiProvider;

! SIWEマニュアル:Dappをより強力にする方法は?

接続ボタンを実現する

ウォレット接続と署名ボタンを追加する:

タイプスクリプト "クライアントを使用する"; import type { Account } from "@ant-design/web3"; import { ConnectButton, Connector } from "@ant-design/web3"; import { Flex, Space } from "antd"; import React from "react"; import { JwtProvider } from "./JwtProvider";

export default 関数 App() { const jwt = React.useContext(JwtProvider);

リターン( <> <connector.siwebutton renderbuttontext="{renderSignBtnText}"> </connector.siwebutton>

JWT: {jwt}

); }

! SIWEマニュアル:Dappをより強力にする方法は?

バックエンドインターフェースを実現する

ノンスインターフェース

ランダムなNonceを生成し、アドレスに関連付ける:

タイプスクリプト import { randomBytes } from "crypto"; import { addressMap } from ".. /cache";

非同期関数のエクスポート GET(request: Request) { const { searchParams } = 新しいURL(request.url); constアドレス= searchParams.get("アドレス");

if (!address) { 新しいError("無効なアドレス")をスローします。 } const nonce = randomBytes(16).toString("hex"); addressMap.set(住所、nonce); 戻り値 Response.json({ データ: ノンス、 }); }

メッセージ検証インターフェース

署名を検証し、JWTを返します:

タイプスクリプト import { createPublicClient, http } from "viem"; import { mainnet } from "viem/chains"; jwtを"jsonwebtoken"からインポートします; import { parseSiweMessage } from "viem/siwe"; import { addressMap } from ".. /cache";

const JWT_SECRET = "あなたの秘密鍵";

const publicClient = createPublicClient({ チェーン: メインネット, トランスポート:http()、 });

export async 関数 POST(request: Request) { const {署名、メッセージ} = await request.json();

const { nonce, アドレス = "0x" } = parseSiweMessage(message);

if (!nonce || nonce !== addressMap.get(アドレス)) { 新しいError("無効なナンス")をスローします。 }

const valid = await publicClient.verifySiweMessage({ メッセージ、アドレス、シグネチャー、 });

if (!valid) { 新しいError("無効な署名")をスローします。 }

const token = jwt.sign({ アドレス }, JWT_SECRET, { expiresIn: "1h" }); 戻り値 Response.json({ データ: トークン, }); }

! SIWEマニュアル:Dappをより強力にする方法は?