SIWE:イーサリアムログインの簡単な実装

SIWE(イーサリアムでサインイン)は、エーテルを使用してユーザーの身分を確認する方法です。これは、ユーザーがそのウォレットをコントロールしていることを示す取引をウォレットから開始することに似ています。現在、認証プロセスは非常に簡単で、ウォレットプラグイン内で情報に署名するだけで済みます。ほとんどの一般的なウォレットプラグインがこれをサポートしています。

本文はイーサリアム上の署名シーンについて議論しており、SolanaやSUIなど他のブロックチェーンには触れていません。

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

プロジェクトはSIWEが必要ですか

もしあなたのDappに以下の要件がある場合、SIWEの使用を検討できます:

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

しかし、あなたのDappが主にクエリ機能（例えば、etherscanのようなアプリ）である場合、SIWEは必ずしも必要ではありません。

Dappでウォレットを接続した後は、ウォレットの所有権を持つことを意味しますが、これはフロントエンドにのみ有効です。バックエンドサポートが必要なインターフェース呼び出しについては、アドレスを渡すだけでは不十分です。なぜなら、アドレスは公開情報であり、誰でも"借用"することができるからです。

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

SIWEの原理とプロセス

SIWEのプロセスは、3つのステップに要約できます: ウォレット接続 - サイン - 身分識別の取得。

ウォレットに接続する

これは一般的な Web3 操作であり、Dapp でウォレットプラグインを介してあなたのウォレットを接続します。

サイン

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

Nonce 値を取得するには、バックエンドインターフェースを呼び出す必要があります。バックエンドはリクエストを受け取った後、ランダムな Nonce 値を生成し、現在のアドレスと関連付けて、後続の署名の準備をします。

フロントエンドがNonce値を取得した後、Nonce値、ドメイン名、チェーンID、署名内容などを含む署名内容を構築します。通常、ウォレットが提供する署名方法を使用して内容に署名します。

署名を構築したら、それをバックエンドに送信します。

ID を取得する

バックエンドで署名検証が通過した後、対応するユーザーIDが返されます。例えば、JWTのようなものです。フロントエンドがその後バックエンドリクエストを送信する際に、対応するアドレスとIDを持っていれば、ウォレットの所有権を証明できます。

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

練習

私たちは Next.js を使用してシンプルな SIWE ログインフレームワークを開発します。このデモは SIWE の基本的なプロセスを紹介するためのものであり、実稼働環境ではセキュリティ上の問題が存在する可能性があります。

###の準備

まず Next.js をインストールします:

npx create-next-app@14

指示に従ってインストールを完了します。プロジェクトディレクトリに入った後、実行します:

npm run dev

localhost:3000 にアクセスすると、基本的な Next.js プロジェクトを見ることができます。

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

私たちは、Ant Design Web3を使用します。なぜなら、それは無料で、積極的にメンテナンスされており、使用体験が通常のコンポーネントライブラリに似ていて、SIWEをサポートしているからです。

以下のコマンドを実行して依存関係をインストールします:

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

ワグミのご紹介

Ant Design Web3 の SIWE は Wagmi ライブラリに依存しています。layout.tsx に関連する Provider をインポートします:

JavaScriptの "クライアントを使用"; 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 siwe="{{" 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()、 トークンポケット({ グループ: "人気", }), OkxWallet()、 ]} queryClient={クエリクライアント} > {子供} ); };

export default WagmiProvider;

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

そして接続ボタンを定義します:

JavaScriptの "クライアントを使用する"; 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);

const renderSignBtnText = ( defaultDom: React.ReactNode, アカウント?: アカウント ) => { const { アドレス } = アカウント ?? {}; const ellipsisAddress = アドレス ? ${address.slice(0, 6)}...${address.slice(-6)} : ""; ${ellipsisAddress}としてログインします; };

リターン( <>

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

インターフェースの実装

ノンス

Nonceは署名の信頼性を高めるために使用されます。実装は以下の通りです:

JavaScriptの 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({ データ: ノンス, }); }

メッセージを確認する

バックエンドでの署名検証の実装:

JavaScriptの import { createPublicClient, http } from "viem"; import { mainnet } from "viem/chains"; "jsonWebToken"からjwtをインポートします。 import { parseSiweMessage } from "viem/siwe"; import { addressMap } from ".. /cache";

const JWT_SECRET = "your-secret-key"; // より安全なキーを使用し、対応する有効期限のチェックなどを追加してください。

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をより強力にする方法は?

最適化の提案

インターフェースの応答速度を向上させるために、専用のノードサービスを使用することをお勧めします。例えば、publicClientのデフォルトRPCを置き換えるために、ZANのノードサービスを使用できます。

JavaScriptの const publicClient = createPublicClient({ チェーン: メインネット, transport: http('), // ZAN ノードサービス RPC });

これにより、検証時間を大幅に短縮し、インターフェースの速度を向上させることができます。

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