Panduan Implementasi Teknologi SIWE: Membangun Sistem Verifikasi Identitas Dapp yang Kuat

SIWE(Masuk dengan Ethereum) adalah cara untuk memverifikasi identitas pengguna di Ethereum, mirip dengan memulai transaksi, untuk membuktikan kontrol pengguna atas dompet. Saat ini, plugin dompet utama mendukung metode otentikasi identitas sederhana ini, cukup dengan menandatangani di dalam plugin.

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

Kapan perlu menggunakan SIWE

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

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

Untuk aplikasi yang berfokus pada pencarian, seperti penjelajah blok seperti etherscan, maka SIWE tidak perlu digunakan.

Meskipun setelah menghubungkan dompet di frontend Dapp tampaknya sudah membuktikan identitas, namun untuk pemanggilan antarmuka yang memerlukan dukungan backend, hanya mentransmisikan alamat tidaklah cukup, karena alamat adalah informasi publik dan mudah disalahgunakan.

Prinsip dan Proses SIWE

Proses SIWE dapat dirangkum dalam tiga langkah: menghubungkan dompet, menandatangani, mendapatkan identifikasi.

sambungkan dompet

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

tanda tangan

Termasuk tiga langkah: mendapatkan nilai Nonce, tanda tangan dompet, dan verifikasi tanda tangan backend.

1. Mendapatkan nilai Nonce yang dihasilkan secara acak dari backend, yang terkait dengan alamat saat ini.

2. Membangun konten tanda tangan di frontend, termasuk nilai Nonce, nama domain, ID rantai, dan informasi lainnya, menggunakan metode yang disediakan oleh dompet untuk menandatangani.

3. Kirim tanda tangan ke backend untuk verifikasi.

mendapatkan identifikasi

Setelah verifikasi tanda tangan di backend berhasil, kembalikan identifikasi pengguna ( seperti JWT). Permintaan selanjutnya di frontend harus menyertakan alamat dan identifikasi, untuk membuktikan kepemilikan dompet.

Panduan Praktik

Berikut ini akan dijelaskan bagaimana cara mengimplementasikan fungsi SIWE dalam proyek Nextjs, mengembalikan JWT untuk identifikasi.

persiapan lingkungan

1. Instal Nextjs:

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

memperkenalkan Wagmi

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 from "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);

kembali ( <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;

Tambahkan tombol koneksi

Tambahkan tombol sambungkan dompet dan tanda tangan di komponen:

javascript "gunakan klien"; import type { Account } from "@ant-design/web3"; import { ConnectButton, Connector } from "@ant-design/web3"; import { Flex, Space } from "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 { alamat } = akun ?? {}; const ellipsisAddress = address ? ${address.slice(0, 6)}...${address.slice(-6)} : ""; kembali Masuk sebagai ${ellipsisAddress}; };

return ( <>

implementasi antarmuka

Antarmuka Nonce

javascript import { randomBytes } from "crypto"; import { addressMap } dari "../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, }); }

Antarmuka Verifikasi Tanda Tangan

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 fungsi POST(permintaan: Permintaan) { 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 login SIWE, disarankan untuk menggunakan layanan node khusus. Sebagai contoh layanan node ZAN, setelah mendapatkan koneksi HTTPS RPC untuk jaringan utama Ethereum, ganti RPC default dari 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.