JSXの
"クライアントを使用する";
import type { Account } from "@ant-design/web3";
import { ConnectButton, Connector } from "@ant-design/web3";
import { Flex, Space } from "antd";
import React from "react";
This page may contain third-party content, which is provided for information purposes only (not representations/warranties) and should not be considered as an endorsement of its views by Gate, nor as financial or professional advice. See Disclaimer for details.
SIWE:イーサリアム署名駆動のDapp身分証明新しいパラダイム
SIWE:イーサリアムの署名を利用してより強力なDapp身分証明を実現
SIWE(イーサリアムでサインイン)は、イーサリアム上でユーザーの身分を検証する方法であり、取引を開始することに似ており、ユーザーが財布のコントロールを持っていることを証明するために使用されます。現在、ほとんどのウォレットプラグインはこのシンプルな署名確認方法をサポートしています。
SIWEはいつ使用する必要がありますか？
もしあなたのDappが以下の要件を持っている場合は、SIWEの使用を検討できます:
クエリを主としたアプリケーション(、例えばetherscan)では、SIWEを使用する必要はありません。
Dappのフロントエンドでウォレットを接続することで身分証明ができるものの、バックエンドサポートが必要なインターフェース呼び出しには、アドレスを渡すだけでは不十分です。なぜなら、アドレスは公開情報であり、悪用されやすいからです。
! SIWEマニュアル:Dappをより強力にする方法は?
SIWEの原理とプロセス
SIWEの基本的なプロセスは、3つのステップで構成されています: ウォレットを接続する、署名する、身分証明を取得する。
ウォレット接続
Dappでユーザーのウォレットに接続するために、ウォレットプラグインを使用します。
サイン
署名手順には次のものが含まれます:
ID を取得する
バックエンドで署名の検証が通過した後、ユーザーの身分証明(を返します。JWT)のように。その後、フロントエンドのリクエスト時にアドレスと身分証明を持参すれば、ウォレットの所有権を証明できます。
! SIWEマニュアル:Dappをより強力にする方法は?
SIWEの実践
以下は、プロジェクトでSIWEを実装する方法を紹介します。目標は、Dappがユーザーの身分証明のためにJWTを返すことができるようにすることです。
###の準備
この記事では、Next.jsを使用してフルスタックアプリケーションを開発するために、Node.js環境を準備する必要があります。
依存関係をインストールする
まずNext.jsをインストールします:
npx create-next-app@14
プロジェクトディレクトリに入って実行:
npm run dev
localhost:3000にアクセスすると、基本的なNext.jsプロジェクトを見ることができます。
SIWEに関連する依存関係をインストールする
Ant Design Web3を使用してウォレット接続を実現する:
npm install antd @ant-design/web3 @ant-design/web3-wagmi wagmi viem @tanstack/react-query --save
! SIWEマニュアル:Dappをより強力にする方法は?
ワグミのご紹介
layout.tsx に WagmiProvider を導入します。
JSXの "クライアントを使用する"; 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";
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をより強力にする方法は?
接続ボタンを実現する
JSXの "クライアントを使用する"; import type { Account } from "@ant-design/web3"; import { ConnectButton, Connector } from "@ant-design/web3"; import { Flex, Space } from "antd"; import React from "react";
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をより強力にする方法は?
インターフェースの実装
ノンスインターフェース
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、 }); }
署名検証インターフェース
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をより強力にする方法は?
最適化の提案
検証速度を向上させるために、デフォルトのRPCの代わりに専用のノードサービスを使用することをお勧めします。例えば、ZANノードサービスを使用します:
JavaScriptの const publicClient = createPublicClient({ チェーン: メインネット, transport: http('), //ZAN ノードサービス RPC });
これにより、検証時間を大幅に短縮し、インターフェースの速度を向上させることができます。
! SIWEマニュアル:Dappをより強力にする方法は?