SIWE:Dapp認証を強化する強力なツール

SIWE(Ethereumでサインイン)は、イーサリアム上でユーザーの身分証明を検証する方法であり、トランザクションを開始するのと似ていて、ユーザーがウォレットを制御していることを証明します。現在、ほとんどの主流ウォレットプラグインがこのシンプルな認証方法をサポートしており、プラグイン内で情報に署名するだけで済みます。

本文は、Ethereum上の署名シーンに焦点を当て、SolanaやSUIなどの他のパブリックチェーンには触れません。

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

SIWEはいつ使用する必要がありますか?

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

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

主にクエリ機能を提供するDapp(、例えばブロックエクスプローラー)については、SIWEを使用しなくても構いません。

Dappでウォレットを接続した後、身分証明が行われたように見えますが、これはフロントエンドにのみ有効です。バックエンドのサポートが必要なインターフェース呼び出しには、アドレスを渡すだけでは不十分です。なぜなら、アドレスは公開情報であり、悪用されやすいからです。

SIWEの原理とプロセス

SIWEのプロセスは3つのステップに要約できます: ウォレットを接続する - 署名する - 身分証明を取得する。これらの3つのステップについて詳しく見ていきましょう。

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

ウォレットを接続する

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

サイン

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

まず、バックエンドAPIを呼び出してNonce値を取得する必要があります。バックエンドはランダムなNonceを生成し、現在のアドレスと関連付けて、今後の署名の準備をします。

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

最後に署名をバックエンドに送信して検証します。

ID を取得する

バックエンドで署名の検証が成功した後、ユーザーの身分証明が返されます。後続のフロントエンドリクエストには、アドレスと身分証明を持参すれば、ウォレットの所有権を証明できます。

SIWEの実践

私たちはNext.jsを使用してシンプルなSIWEアプリを開発します。目標はDappが認証のためにJWTを返すことができるようにすることです。注意してください、このデモは基本的なプロセスを紹介するためのものであり、実稼働環境ではセキュリティ上のリスクが存在する可能性があります。

###の準備

Node.js環境を整え、Next.jsを使用してフルスタックプロジェクトを開発する必要があります。

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

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

npx create-next-app@14

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

npm run dev

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

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

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

私たちはAnt Design Web3を使用します。これは無料で、継続的にメンテナンスされ、通常のコンポーネントライブラリに似た使用体験を提供し、SIWEをサポートしています。インストールコマンドは以下の通りです。

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

ワグミのご紹介

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

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、 ｝｝ ウォレット={[ MetaMask()、 WalletConnect()、 TokenPocket({ グループ: "人気", }), 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}としてサインインします; };

リターン( <> <コネクタ renderSignBtnText="{renderSignBtnText}">

これで、基本的なSIWEログインフレームワークが実現されました。

! 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({ データ:nonce、 }); }

サインメッセージ

signMessageは通常、ウォレットプラグインによって行われ、私たちはWagmiの署名方法を使用します。

メッセージを確認する

バックエンドは署名内容を検証し、安全性を確認する必要があります。

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 = "あなたの秘密鍵"; より安全なキーを使用し、有効期限チェックなどを追加する

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

最適化の提案

検証速度を向上させるために、専用のノードサービスの使用をお勧めします。ZANのノードサービスを使用して、HTTPS RPC接続を取得後、コード内のデフォルトRPCを置き換えてください。

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

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

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