SIWE: Bagaimana menerapkan identifikasi Ethereum untuk meningkatkan fungsi Dapp

SIWE(Masuk dengan Ethereum) adalah metode untuk memverifikasi identitas pengguna di Ethereum, mirip dengan memulai transaksi dompet, untuk membuktikan kontrol pengguna atas dompet. Proses autentikasi saat ini sudah sangat sederhana, cukup menandatangani informasi di plugin dompet, dan sebagian besar plugin dompet umum sudah mendukungnya.

Artikel ini terutama membahas tentang skenario tanda tangan di Ethereum, tidak mencakup blockchain publik lainnya seperti Solana, SUI, dan sebagainya.

Kapan perlu menggunakan 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

Tapi jika Dapp Anda terutama berfungsi sebagai aplikasi pencarian, seperti aplikasi yang mirip dengan etherscan, maka tidak selalu memerlukan SIWE.

Anda mungkin bertanya, setelah menghubungkan dompet di Dapp, bukankah itu sudah membuktikan kepemilikan dompet? Pernyataan ini sebagian benar. Bagi front-end, koneksi dompet memang menunjukkan identifikasi, tetapi untuk panggilan API yang memerlukan dukungan back-end, hanya menyampaikan alamat tidaklah cukup, karena alamat adalah informasi publik, siapa pun dapat "meminjam".

Prinsip dan Proses SIWE

Proses SIWE dapat diringkas dalam tiga langkah: menghubungkan dompet - tanda tangan - mendapatkan identifikasi. Mari kita bahas ketiga langkah ini secara rinci.

sambungkan dompet

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

tanda tangan

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

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

Setelah mendapatkan nilai Nonce dari frontend, bangun 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.

mendapatkan identifikasi

Setelah tanda tangan diverifikasi oleh backend, akan mengembalikan identifikasi pengguna yang sesuai, seperti JWT. Frontend kemudian mengirimkan permintaan ke backend dengan membawa alamat dan identifikasi yang sesuai, sehingga dapat membuktikan kepemilikan dompet.

Praktik SIWE

Sekarang ada banyak komponen dan pustaka yang mendukung koneksi dompet dan SIWE dengan cepat. Mari kita lakukan praktik, tujuannya adalah agar Dapp Anda dapat mengembalikan JWT untuk autentikasi identifikasi pengguna.

Perhatikan, contoh ini hanya digunakan untuk memperkenalkan proses dasar SIWE, penggunaan di lingkungan produksi mungkin memiliki masalah keamanan.

persiapan kerja

Kami menggunakan Next.js untuk mengembangkan aplikasi, perlu menyiapkan lingkungan Node.js. Keuntungan menggunakan Next.js adalah dapat langsung mengembangkan proyek full-stack tanpa perlu memisahkan frontend dan backend.

Instal ketergantungan

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

npx create-next-app@14

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

npm run dev

Kemudian akses localhost:3000 untuk melihat proyek Next.js dasar berjalan.

Instal ketergantungan terkait SIWE

Kami menggunakan Ant Design Web3 untuk mengimplementasikan SIWE, karena gratis, aktif dipelihara, pengalaman pengguna mirip dengan pustaka komponen biasa, dan mendukung SIWE.

Masukkan di terminal:

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

memperkenalkan Wagmi

Ant Design Web3 menggunakan dependensi SIWE dari pustaka Wagmi. Kami mengimpor Provider terkait di layout.tsx, sehingga seluruh proyek dapat menggunakan Hooks yang disediakan oleh Wagmi.

Pertama, definisikan konfigurasi WagmiProvider:

javascript "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 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, ｝｝ dompet={[ MetaMask(), WalletConnect(), TokenPocket({ grup: "Populer", }), OkxWallet(), ]} queryClient={queryClient} > {children} ); };

ekspor default WagmiProvider;

Kami menggunakan Provider yang disediakan oleh Ant Design Web3, dan mendefinisikan beberapa antarmuka SIWE, implementasi spesifiknya akan dijelaskan kemudian.

Kemudian tambahkan tombol untuk menghubungkan dompet, sebagai pintu masuk koneksi di frontend.

Dengan demikian, kami telah berhasil mengintegrasikan SIWE secara 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}; };

return ( <> {(akun) => ( <connectButton.signin accountcomponent="{false}" renderButtonText="{(dom)" ==""> renderSignBtnText(dom, account)} /> )} </connectbutton.signin> {jwt} ); }

Dengan cara ini, kami telah mencapai kerangka login SIWE yang paling sederhana.

Implementasi Antarmuka

SIWE membutuhkan beberapa antarmuka untuk membantu backend memverifikasi identifikasi pengguna. Sekarang mari kita implementasikan secara sederhana.

Nonce

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

Implementasi Nonce cukup langsung, pertama-tama menghasilkan string acak ( yang terdiri dari huruf dan angka ), kemudian mengaitkan nonce dengan address:

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("Invalid address"); } const nonce = randomBytes(16).toString("hex"); addressMap.set(address, nonce); return Response.json({ data: nonce, }); }

signMessage

signMessage digunakan untuk menandatangani konten, biasanya dilakukan melalui plugin dompet, kita umumnya hanya perlu menentukan metode. Dalam contoh ini, metode tanda tangan Wagmi digunakan.

verifikasiPesan

Setelah pengguna menandatangani, perlu mengirimkan konten sebelum tanda tangan dan tanda tangan itu sendiri ke backend untuk divalidasi. Backend akan menguraikan konten dari tanda tangan untuk dibandingkan, jika sama maka berarti validasi berhasil.

Selain itu, perlu dilakukan verifikasi keamanan terhadap konten tanda tangan, seperti memeriksa apakah nilai Nonce sesuai dengan yang diberikan kepada pengguna. Setelah verifikasi berhasil, kembalikan JWT pengguna untuk verifikasi hak akses selanjutnya:

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

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

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

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

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

// Memvalidasi 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 Optimasi

Saat melakukan login SIWE, jika menggunakan node RPC default, proses verifikasi mungkin memerlukan waktu hampir 30 detik. Oleh karena itu, sangat disarankan untuk menggunakan layanan node khusus untuk meningkatkan waktu respons antarmuka.

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

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

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