SIWE: Menambahkan kemampuan identifikasi untuk Dapp

SIWE(Masuk dengan Ethereum) adalah metode untuk memverifikasi identitas pengguna di Ethereum, mirip dengan memulai transaksi, untuk membuktikan kontrol pengguna atas dompet. Saat ini, sebagian besar plugin dompet mendukung metode otentikasi sederhana ini, hanya perlu menandatangani informasi dalam plugin. Artikel ini akan membahas skenario tanda tangan di Ethereum.

Kapan SIWE Diperlukan

Jika Dapp Anda memiliki kebutuhan berikut, Anda dapat mempertimbangkan untuk menggunakan SWIE:

• Memiliki sistem pengguna yang independen
• Perlu mencari informasi yang terkait dengan identifikasi pengguna

Untuk aplikasi yang berfokus pada pencarian, seperti etherscan, SIWE dapat diabaikan.

Meskipun identifikasi dapat dinyatakan di frontend melalui koneksi dompet, untuk panggilan antarmuka yang memerlukan dukungan backend, hanya menyampaikan alamat tidak dapat membuktikan identitas, karena alamat adalah informasi publik.

Prinsip dan Proses SIWE

Proses SIWE dapat diringkas sebagai: menghubungkan dompet - menandatangani - mendapatkan identifikasi. Langkah-langkahnya adalah sebagai berikut:

1. Menghubungkan dompet: Menghubungkan dompet melalui plugin dompet di Dapp.

2. Tanda tangan:

   • Dapatkan nilai Nonce: Panggil antarmuka backend untuk mendapatkan nilai Nonce acak.
   • Membangun konten tanda tangan: termasuk nilai Nonce, nama domain, ID rantai, dll.
   • Gunakan metode tanda tangan dompet untuk menandatangani konten.
   • Kirim tanda tangan ke backend.

3. Mendapatkan identifikasi:

   • Setelah memverifikasi tanda tangan backend, kembalikan identifikasi pengguna ( seperti JWT ).
   • Permintaan selanjutnya membawa alamat dan identifikasi, membuktikan kepemilikan dompet.

Praktik SIWE

Kami akan menggunakan Next.js untuk mengembangkan Dapp yang mendukung SIWE, dengan tujuan untuk mengembalikan JWT untuk verifikasi identifikasi pengguna.

persiapan kerja

1. Instal Next.js:

npx create-next-app@14

2. Instal dependensi terkait SIWE:

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

mewujudkan SIWE

1. Mengimpor WagmiProvider di layout.tsx:

javascript "gunakan klien"; import { getNonce, verifyMessage } dari "@/app/api"; import { Mainnet, MetaMask, OkxWallet, TokenPocket, WagmiWeb3ConfigProvider, WalletConnect, } dari "@ant-design/web3-wagmi"; import { QueryClient } from "@tanstack/react-query"; import React dari "react"; import { createSiweMessage } from "viem/siwe"; import { http } from "wagmi"; import { JwtProvider } from "./JwtProvider";

const YOUR_WALLET_CONNECT_PROJECT_ID = "c07c0051c2055890eade3556618e38a6"; const queryClient = new QueryClient();

const WagmiProvider: React.FC = ({ children }) => { const [jwt, setJwt] = React.useState(null);

return ( <wagmiweb3configprovider siwe="｛｛" getnonce:="" async="" (address)=""> (await getNonce(address)).data, createMessage: (props) => { return createSiweMessage({ ...props, statement: "Ant Design Web3" }); }, verifyMessage: async (message, signature) => { const jwt = (await verifyMessage(message, signature)).data; setJwt(jwt); return !!jwt; }, ｝｝ chains={[Mainnet]} transports=｛｛ [Mainnet.id]: http(), ｝｝ walletConnect=｛｛ projectId: YOUR_WALLET_CONNECT_PROJECT_ID, ｝｝ wallets={[ MetaMask(), WalletConnect(), TokenPocket({ grup: "Populer", }), OkxWallet(), ]} queryClient={queryClient} > {children} ); };

ekspor default WagmiProvider;

2. Tambahkan tombol koneksi:

javascript "gunakan klien"; 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";

ekspor default fungsi App() { const jwt = React.useContext(JwtProvider);

const renderSignBtnText = ( defaultDom: React.ReactNode, akun?: Akun ) => { const { address } = account ?? {}; const ellipsisAddress = address ? ${address.slice(0, 6)}...${address.slice(-6)} : ""; kembali Masuk sebagai ${ellipsisAddress}; };

return ( <> {jwt} ); }

implementasi antarmuka

1. Antarmuka Nonce:

javascript import { randomBytes } from "crypto"; import { addressMap } dari "../cache";

export async function GET(request: Request) { const { searchParams } = new URL(request.url); const address = searchParams.get("address");

jika (!address) { throw new Error("Alamat tidak valid"); } const nonce = randomBytes(16).toString("hex"); addressMap.set(address, nonce); return Response.json({ data: nonce, }); }

2. Antarmuka verifikasi pesan:

javascript import { createPublicClient, http } from "viem"; import { mainnet } dari "viem/chains"; import jwt dari "jsonwebtoken"; import { parseSiweMessage } from "viem/siwe"; import { addressMap } from "../cache";

const JWT_SECRET = "your-secret-key";

const publicClient = createPublicClient({ rantai: mainnet, transport: http(), });

ekspor async function POST(permintaan: Permintaan) { const { signature, message } = await request.json();

const { nonce, address = "0x" } = parseSiweMessage(message);

jika (!nonce || nonce !== addressMap.get(address)) { throw new Error("Invalid nonce"); }

const valid = await publicClient.verifySiweMessage({ pesan, alamat, tanda tangan, });

jika (!valid) { throw new Error("Tanda tangan tidak valid"); }

const token = jwt.sign({ address }, JWT_SECRET, { expiresIn: "1h" }); return Response.json({ data: token, }); }

Saran Optimasi

Untuk meningkatkan kecepatan verifikasi login SIWE, disarankan untuk menggunakan layanan node khusus. Anda dapat menggunakan layanan node ZAN, untuk menggantikan RPC default publicClient:

javascript const publicClient = createPublicClient({ rantai: mainnet, transport: http('), //Layanan RPC node ZAN });

Ini dapat secara signifikan mengurangi waktu verifikasi dan meningkatkan kecepatan respons antarmuka.