SIWEの紹介:あなたのDappの身分証明をより安全にする

SIWE(イーサリアムでサインイン)は、イーサリアムに基づくユーザー身分証明の方法です。取引を開始するのと同様に、ユーザーは署名を通じてウォレットの管理権を証明します。現在、ほとんどの主流ウォレットプラグインはこのシンプルな身分証明方法をサポートしています。

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

SIWEの適用シナリオ

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

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

クエリを主とするDapp(、例えばブロックエクスプローラー)の場合、SIWEは必ずしも必要ではありません。

注意すべきは、ウォレット接続だけでは完全に身分証明をすることはできないということです。バックエンドサポートが必要なインターフェース呼び出しに対しては、追加の身分証明が必要です。そうしないと、誰でも公開されたアドレス情報を「借用」する可能性があります。

SIWEの仕組み

SIWEの基本的な流れは、3つのステップから成ります: ウォレットの接続、署名、身分証明の取得。

1. ウォレットを接続する: ウォレットプラグインを通じてユーザーのウォレットに接続します

2. サイン:

   • Nonce値を取得する: バックエンドAPIを呼び出してランダムなNonce値を取得する
   • サイン内容を構築する:Nonce、ドメイン、チェーンIDなどの情報を含む
   • ウォレットを使用して署名する
   • サインをバックエンドに送信して検証する

3. IDを取得します。 バックエンドで署名の検証が通過した後、ユーザーの身分証明(を返します。JWT)

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

SIWEの実践

以下、私たちは簡単なデモを通じてSIWEプロセスを実践します。注意、このデモは基本的なプロセスを示すためのものであり、直接生産環境で使用することはお勧めしません。

###環境の準備

私たちはNext.jsを使用してフルスタックアプリケーションを開発するために、Node.js環境を準備する必要があります。

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

まずNext.jsプロジェクトを作成します:

npx create-next-app@14

プロジェクトディレクトリに入ったら、SIWE関連の依存関係をインストールします。

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

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

Wagmi の設定

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";

定数 YOUR_WALLET_CONNECT_PROJECT_ID = "xxx"; const queryClient = 新しいQueryClient();

const WagmiProvider = ({ 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 { ConnectButton } from "@ant-design/web3"; import React from "react"; import { JwtProvider } from "./JwtProvider";

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

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

リターン( <> <connectbutton.signin label="{renderSignBtnText}" onsignmessagesuccess="{()" ==""> { console.log("署名メッセージの成功"); ｝｝ />

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

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

Nonceインターフェース

JavaScriptの import { randomBytes } from "crypto"; import { addressMap } from ".. /cache";

非同期関数のエクスポート GET(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"; jwtを"jsonwebtoken"からインポートする; import { parseSiweMessage } from "viem/siwe"; import { addressMap } from ".. /cache";

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

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

非同期関数のエクスポート POST(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({ チェーン: メインネット, トランスポート:http(')、 });

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

! SIWEマニュアル:Dappをより強力にする方法は? </connectbutton.signin>