SIWE: Teknologi Kunci untuk Meningkatkan Fungsionalitas Dapp

SIWE (Sign-In with Ethereum) adalah metode untuk memverifikasi identitas pengguna di Ethereum, mirip dengan memulai transaksi dompet, yang membuktikan bahwa pengguna memiliki kontrol atas dompet. Metode verifikasi identitas saat ini sangat sederhana, hanya perlu menandatangani informasi di plugin dompet, dan sebagian besar plugin dompet umum sudah mendukungnya.

Artikel ini terutama membahas skenario tanda tangan di Ethereum, tanpa melibatkan blockchain lain seperti Solana, SUI, dll.

Apakah perlu 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 pencarian, seperti aplikasi yang mirip dengan etherscan, Anda dapat tidak menggunakan SIWE.

Anda mungkin bertanya-tanya, setelah terhubung ke dompet di Dapp, bukankah itu sudah membuktikan kepemilikan dompet? Pernyataan ini sebagian benar. Bagi front-end, koneksi dompet memang menunjukkan identitas, tetapi untuk panggilan antarmuka yang memerlukan dukungan back-end, hanya mengirimkan alamat tidak cukup, karena alamat adalah informasi publik, siapa pun dapat "meminjam".

Prinsip dan Proses SIWE

Proses SIWE dapat dirangkum dalam tiga langkah: sambungkan dompet - tanda tangan - dapatkan identitas. Mari kita lihat lebih detail tentang ketiga langkah ini.

Sambungkan Dompet

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

tanda tangan

Langkah-langkah tanda tangan dalam SIWE mencakup mendapatkan nilai Nonce, tanda tangan dompet, dan verifikasi tanda tangan di backend.

Untuk mendapatkan nilai Nonce, perlu memanggil antarmuka backend. Setelah backend menerima permintaan, ia akan menghasilkan nilai Nonce acak dan mengaitkannya dengan alamat saat ini, sebagai persiapan untuk tanda tangan selanjutnya.

Setelah mendapatkan nilai Nonce dari frontend, perlu membangun konten tanda tangan, termasuk nilai Nonce, nama domain, ID rantai, konten tanda tangan, dll., biasanya menggunakan metode tanda tangan yang disediakan oleh dompet.

Setelah membangun tanda tangan, kirimkan ke backend.

Dapatkan identifikasi identitas

Setelah verifikasi tanda tangan di backend berhasil, akan mengembalikan identitas pengguna, seperti JWT. Saat permintaan frontend berikutnya, sertakan alamat yang sesuai dan identitas pengguna untuk membuktikan kepemilikan dompet.

Praktik

Saat ini ada banyak komponen dan pustaka yang mendukung koneksi dompet dan SIWE dengan cepat. Tujuan kami adalah agar Dapp dapat mengembalikan JWT untuk verifikasi identitas pengguna. Harap diperhatikan, demo ini hanya digunakan untuk memperkenalkan alur dasar SIWE, penggunaan di lingkungan produksi mungkin memiliki masalah keamanan.

persiapan kerja

Artikel ini menggunakan Next.js untuk mengembangkan aplikasi, memerlukan lingkungan Node.js. Manfaat menggunakan Next.js adalah dapat langsung mengembangkan proyek full-stack, tanpa perlu membagi menjadi dua proyek frontend dan backend.

Instal ketergantungan

Pertama, instal Next.js, jalankan di direktori proyek:

npx create-next-app@14

Setelah selesai instalasi sesuai petunjuk, masuk ke direktori proyek dan jalankan:

npm run dev

Berdasarkan petunjuk terminal, akses localhost:3000 untuk melihat proyek Next.js dasar.

Instal dependensi terkait SIWE

SIWE membutuhkan sistem login, oleh karena itu perlu menghubungkan dompet. Di sini kami menggunakan Ant Design Web3, karena:

1. Sepenuhnya gratis dan dikelola secara aktif
2. Sebagai perpustakaan komponen Web3, pengalaman pengguna mirip dengan perpustakaan komponen biasa, tanpa beban mental tambahan.
3. Mendukung SIWE

Jalankan di terminal:

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

Memperkenalkan Wagmi

Ant Design Web3 SIWE bergantung pada pustaka Wagmi untuk diimplementasikan. Kita perlu mengimpor Provider terkait di layout.tsx agar seluruh proyek dapat menggunakan Hooks yang disediakan oleh Wagmi.

Pertama, definisikan konfigurasi WagmiProvider:

javascript "gunakan klien"; import { getNonce, verifyMessage } from "@/app/api"; import { Jaringan Utama, 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(alamat)).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;

Kemudian tambahkan tombol sambungkan dompet, sehingga telah menambahkan pintu masuk sambungan di frontend. Dengan ini, SIWE sudah terhubung, langkahnya sangat sederhana.

Selanjutnya, definisikan tombol koneksi untuk menghubungkan dompet dan menandatangani:

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

kembali ( <>

Dengan cara ini, sebuah kerangka login SIWE yang paling sederhana telah terwujud.

implementasi antarmuka

SIWE membutuhkan beberapa antarmuka untuk membantu backend memverifikasi identitas pengguna. Sekarang mari kita implementasikan dengan sederhana.

Nonce

Nonce digunakan untuk membuat konten yang dihasilkan oleh dompet berbeda setiap kali tanda tangan dibuat, meningkatkan keandalan tanda tangan. Generasi Nonce perlu terkait dengan alamat yang diberikan oleh pengguna, untuk meningkatkan akurasi verifikasi.

Implementasi Nonce sangat langsung, pertama-tama menghasilkan string acak ( yang terdiri dari huruf dan angka ), kemudian menghubungkan nonce dan alamat:

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

ekspor async fungsi GET(permintaan: Permintaan) { 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, }); }

signMessage

signMessage digunakan untuk menandatangani konten, fungsi bagian ini biasanya diselesaikan oleh plugin dompet, kita umumnya tidak perlu mengkonfigurasi, cukup tentukan metode saja. Dalam demo ini, metode tanda tangan Wagmi digunakan.

verifyMessage

Setelah pengguna menandatangani, perlu mengirimkan konten sebelum tanda tangan dan tanda tangan itu sendiri ke backend untuk diverifikasi. Backend akan menguraikan konten yang sesuai dari tanda tangan untuk dibandingkan, jika sama, berarti verifikasi berhasil.

Selain itu, perlu melakukan verifikasi keamanan terhadap konten tanda tangan, seperti apakah nilai Nonce dalam konten tanda tangan konsisten dengan yang diberikan kepada pengguna. Setelah verifikasi berhasil, perlu mengembalikan JWT pengguna untuk verifikasi izin selanjutnya, contoh kode sebagai berikut:

javascript 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"; // Harap gunakan kunci yang lebih aman, dan tambahkan pemeriksaan kedaluwarsa yang sesuai, dll.

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

export async function POST(request: Request) { const { signature, message } = await request.json();

const { nonce, address = "0x" } = parseSiweMessage(message); console.log("nonce", nonce, address, addressMap);

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

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

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

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

Dengan ini, sebuah Dapp yang mengimplementasikan login SIWE secara dasar telah selesai dikembangkan.

Saran Perbaikan

Menggunakan node RPC default untuk verifikasi login SIWE mungkin memerlukan waktu hampir 30 detik, oleh karena itu sangat disarankan untuk menggunakan layanan node khusus untuk meningkatkan waktu respons antarmuka. Artikel ini menggunakan layanan node ZAN, yang dapat diakses dari konsol layanan node ZAN untuk mendapatkan koneksi RPC yang sesuai.

Setelah mendapatkan koneksi HTTPS RPC ke jaringan utama Ethereum, ganti RPC default dari publicClient di dalam kode:

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

Setelah penggantian, waktu verifikasi akan berkurang secara signifikan, kecepatan antarmuka akan meningkat secara jelas.