Panduan Penggunaan SIWE: Tingkatkan Fungsi Dapp Anda

SIWE (Sign-In with Ethereum) adalah cara untuk memverifikasi identitas pengguna di Ethereum, mirip dengan memulai transaksi, yang membuktikan kontrol pengguna terhadap dompet. Saat ini, sebagian besar plugin dompet mendukung cara autentikasi sederhana ini, yang hanya memerlukan tanda tangan di dalam plugin.

Artikel ini terutama membahas skenario tanda tangan di Ethereum, tidak melibatkan blockchain publik lainnya seperti Solana, SUI, dll.

Apakah proyek Anda memerlukan SIWE?

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

• Memiliki sistem pengguna sendiri
• Perlu memeriksa informasi yang terkait dengan privasi pengguna

Namun, jika Dapp Anda terutama berfungsi untuk melakukan pencarian, seperti etherscan, Anda tidak perlu menggunakan SIWE.

Anda mungkin bertanya, setelah menghubungkan dompet di Dapp, bukankah itu menunjukkan kepemilikan dompet? Pernyataan ini tidak sepenuhnya akurat. Bagi front-end, menghubungkan dompet memang menunjukkan identitas, tetapi untuk panggilan antarmuka yang memerlukan dukungan back-end, hanya mengirimkan alamat tidak cukup untuk membuktikan identitas, karena alamat adalah informasi publik dan siapa pun dapat menggunakannya.

Prinsip dan Proses SIWE

Proses SIWE dapat diringkas menjadi tiga langkah: menghubungkan dompet, menandatangani, dan mendapatkan identitas.

Sambungkan Dompet

Ini adalah operasi Web3 yang umum, menghubungkan dompet melalui plugin dompet di Dapp.

tanda tangan

Langkah-langkah tanda tangan SIWE mencakup pengambilan nilai Nonce, tanda tangan dompet, dan verifikasi tanda tangan backend.

Untuk mendapatkan nilai Nonce, perlu memanggil antarmuka backend. Backend menghasilkan nilai Nonce acak dan mengaitkannya dengan alamat saat ini, untuk mempersiapkan tanda tangan selanjutnya.

Setelah mendapatkan nilai Nonce di front-end, bangun konten tanda tangan, termasuk nilai Nonce, nama domain, ID rantai, dan konten tanda tangan lainnya, biasanya menggunakan metode yang disediakan oleh dompet untuk melakukan tanda tangan.

Setelah membangun tanda tangan, kirimkan ke backend.

Mendapatkan identitas

Setelah verifikasi tanda tangan di backend berhasil, kembalikan identifikasi pengguna, seperti JWT. Saat permintaan frontend berikutnya, bawa alamat dan identifikasi, yang dapat membuktikan kepemilikan dompet.

Praktik Operasi

Kami akan mengembangkan aplikasi full-stack menggunakan Next.js, yang mengintegrasikan fitur SIWE. Harap dicatat, demo ini hanya untuk menunjukkan alur dasar, tidak cocok digunakan langsung di lingkungan produksi.

Persiapan kerja

Pastikan lingkungan Node.js telah terinstal.

Instal dependensi

Pertama, instal Next.js:

npx create-next-app@14

Selesaikan instalasi sesuai petunjuk.

Masuk ke direktori proyek, jalankan proyek:

npm run dev

Mengakses localhost:3000 dapat melihat proyek Next.js dasar.

Pasang ketergantungan terkait SIWE

Kami memilih untuk menggunakan Ant Design Web3, karena itu gratis, terus dipelihara, memiliki pengalaman pengguna yang baik, dan mendukung SIWE.

Instal dependensi:

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

Memperkenalkan Wagmi

Mengimpor Provider terkait di layout.tsx:

typescript "gunakan klien"; import { getNonce, verifyMessage } from "@/app/api"; import { Mainnet, MetaMask, OkxWallet, TokenPocket, WagmiWeb3ConfigProvider, WalletConnect, } dari "@ant-design/web3-wagmi"; import { QueryClient } from "@tanstack/react-query"; import React from "react"; import { createSiweMessage } from "viem/siwe"; import { http } dari "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 siweconfig="｛｛" 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, ｝｝ dompet={[ MetaMask(), WalletConnect(), TokenPocket({ grup: "Populer", }), OkxWallet(), ]} queryClient={queryClient} > {children} ); };

ekspor default WagmiProvider;

Tambahkan tombol sambungkan dompet:

typescript "gunakan klien"; import type { Account } from "@ant-design/web3"; import { ConnectButton, Connector } from "@ant-design/web3"; import { Flex, Space } dari "antd"; import React dari "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 ( <>

implementasi antarmuka

Nonce

Menghasilkan Nonce acak dan mengaitkannya dengan alamat:

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

ekspor fungsi asinkron GET(permintaan: Permintaan) { const { searchParams } = new URL(request.url); const address = searchParams.get("address");

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

verifikasiPesan

Verifikasi tanda tangan dan kembalikan JWT:

typescript import { createPublicClient, http } from "viem"; import { mainnet } from "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: Request) { const { signature, message } = await request.json();

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

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

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, disarankan menggunakan layanan node khusus. Anda dapat menggunakan layanan node ZAN, setelah mendapatkan koneksi RPC, ganti RPC default dalam kode.

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

Ini dapat secara signifikan meningkatkan kecepatan respons antarmuka.