SIWE:Dappsに認証機能を追加

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

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

SIWEはいつ必要です

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

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

クエリを主とするアプリケーション、例えばetherscanでは、SIWEを使用する必要はありません。

ウォレット接続を通じてフロントエンドで身分証明を示すことができますが、バックエンドサポートが必要なインターフェース呼び出しに対しては、アドレスを渡すだけでは身分を証明することはできません。なぜならアドレスは公開情報だからです。

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

SIWEの原理とプロセス

SIWEプロセスは次のように要約できます: ウォレット接続 - サイン - 身分証明の取得。具体的なステップは以下の通りです:

1. ウォレット接続: Dappでウォレットプラグインを通じてウォレットを接続します。

2. サイン:

   • ノンス値を取得: バックエンドインターフェースを呼び出してランダムノンス値を取得します。
   • サイン内容の構築: Nonce値、ドメイン、チェーンIDなどを含む。
   • ウォレット署名方法を使用して内容に署名します。
   • サインをバックエンドに送信します。

3. IDを取得します。

   • バックエンドが署名を検証した後、ユーザーの身分証明を返します(、JWT)のように。
   • その後のリクエストには、アドレスと身分証明を持参し、ウォレットの所有権を証明してください。

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

SIWEの実践

私たちはNext.jsを使用してSIWEをサポートするDappを開発し、ユーザーの身分証明のためにJWTを返すことを目指します。

###の準備

1. Next.jsをインストールする:

npx create-next-app@14

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

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

SIWEの実装

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

2. 接続ボタンを追加する:

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}としてサインインします; };

リターン( <> {JWTの} ); }

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

インターフェース実装

1. ノンスインターフェース:

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、 }); }

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

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

最適化の提案

SIWEログイン認証の速度を向上させるために、専用のノードサービスを使用することをお勧めします。publicClientのデフォルトRPCを置き換えるためにZANノードサービスを使用できます:

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

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

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