SIWE使用ガイド:あなたのDappをより強力にする

SIWE(イーサリアムでサインイン)は、イーサリアム上でユーザーの身元を確認する方法であり、ウォレットがトランザクションを開始するのに似ていて、ユーザーがウォレットの制御権を持っていることを証明します。現在、身元確認は非常に簡単で、ウォレットプラグインで情報に署名するだけで済み、多くの一般的なウォレットプラグインがすでにサポートしています。本記事では、イーサリアム上での署名のシナリオについて主に議論します。

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

SIWEは必要ですか

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

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

しかし、あなたのDappが主に照会機能、例えばetherscanのようなアプリケーションである場合、SIWEは必ずしも必要ではありません。

あなたは疑問に思うかもしれませんが、Dappでウォレットを接続した後、ウォレットの所有権が証明されたことになりますよね？これはフロントエンドにのみ有効です。バックエンドサポートが必要なAPI呼び出しでは、アドレスを渡すだけでは不十分です。なぜなら、アドレスは公開情報であり、誰でもあなたの身分を「借用」することができるからです。

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

SIWEの原理とプロセス

SIWEプロセスは、3つのステップに要約できます：ウォレットの接続 - サイン - 身分識別の取得。

ウォレットを接続する

これは一般的なWeb3操作で、Dappにウォレットを接続するためにウォレットプラグインを使用します。

サイン

署名手順には、Nonce値の取得、ウォレット署名、およびバックエンド署名検証が含まれます。

バックエンドはランダムなNonce値を生成し、アドレスに関連付けます。フロントエンドはNonce値を取得した後、Nonce値、ドメイン名、チェーンIDなどを含む署名内容を構築し、ウォレットが提供するメソッドを使用して署名します。最後に、署名をバックエンドに送信します。

ID を取得する

バックエンドで署名の検証が通過した後、ユーザーの識別子(をJWT)として返します。フロントエンドのその後のリクエストには、アドレスと識別子を含めることで、ウォレットの所有権を証明できます。

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

SIWEの実践

私たちはNext.jsを使用して、基本的なプロセスを示すシンプルなSIWEデモを開発します。注意してください。このデモは紹介目的のみであり、運用環境での使用には安全上の問題がある可能性があります。

###の準備

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

npx create-next-app@14

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

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

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

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

3. layout.tsx に WagmiProvider を導入

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

4. ウォレット接続ボタンの実装

5. バックエンドインターフェースの実装

   • ノンス生成
   • 署名の検証

6. 最適化: 専用ノードサービスを使用して応答速度を向上させる

上記の手順を通じて、基本的なSIWEログインフレームワークを実現しました。専門のノードサービスを使用することで、検証速度が大幅に向上し、プロダクション環境での採用をお勧めします。

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