SIWE：Dappのための身分証明を提供する強力なツール

SIWE（Ethereumでのサインイン）は、Ethereum上でユーザーの身分証明を行う方法であり、取引を開始するのと似ており、ユーザーがウォレットの管理権を持っていることを証明します。現在、ほとんどのウォレットプラグインはこの簡単な署名方式をサポートしています。

この記事では、Ethereum上の署名シナリオについて主に議論し、他のパブリックチェーンには触れません。

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

あなたのプロジェクトはSIWEが必要ですか?

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

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

主にクエリ機能を提供するDapp(、例えばetherscan)では、SIWEを使用する必要はありません。

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

SIWEの原理とプロセス

SIWEのプロセスは、3つのステップで構成されています: ウォレットの接続、署名、身分証明の取得。

ウォレットを接続する

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

サイン

SIWEの署名手順は次のとおりです:

1. Nonce値を取得する: バックエンドAPIを呼び出してランダムなNonce値を取得し、アドレスに関連付ける。

2. サイン内容の構築: Nonce値、ドメイン、チェーンIDなどの情報を含む。

3. ウォレット署名: ウォレットが提供する方法で内容に署名します。

4. 署名を送信: 署名をバックエンドに送信して検証します。

ID を取得する

バックエンドで署名の検証が通過した後、ユーザーの身分証明(をJWT)として返します。以降のリクエストにはアドレスと身分証明を持参すれば、ウォレットの所有権を証明できます。

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

SIWEの実践

私たちは、SIWEをサポートするフルスタックアプリケーションをNext.jsで開発します。

###の準備

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

ワグミのご紹介

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

JSXの import { WagmiWeb3ConfigProvider } from "@ant-design/web3-wagmi";

const WagmiProvider = ({ children }) => { リターン( <wagmiweb3configprovider config="{{" 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の; }, }, チェーン:[Mainnet]、 トランスポーツ: { [Mainnet.id]:http()、 }, 財布:[MetaMask()、WalletConnect()、TokenPocket()、 OkxWallet()] ｝｝ > {子供} ); };

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

接続ボタンを追加

ウォレット接続と署名のボタンを作成する:

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

リターン( <connectbutton.connector> {({ アカウント, 接続 }) => ( <ボタン onclick="{connect}"> ${account.address.slice(0,6)}...${account.address.slice(-4)} : "Connect Wallet"} )} </connectbutton.connector> ); }

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

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

Nonceインターフェース

JavaScriptの 非同期関数のエクスポート GET(request) { const { searchParams } = 新しいURL(request.url); constアドレス= searchParams.get("アドレス");

if (!address) { 新しいError("無効なアドレス")をスローします。 } const nonce = randomBytes(16).toString("hex"); addressMap.set(住所、nonce); Response.json({ data: nonce }); }

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

署名検証インターフェース

JavaScriptの 非同期関数のエクスポート 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({ data: token }); }

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

パフォーマンス最適化

検証速度を向上させるために、専用のノードサービスの使用をお勧めします。デフォルトのRPCを置き換えるためにZANのノードサービスを使用できます。

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

これにより、インターフェースの応答速度が大幅に向上します。

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