Panduan Implementasi Verifikasi Identitas Ethereum: SIWE

SIWE(Masuk dengan Ethereum) adalah metode otentikasi identifikasi pengguna yang berbasis Ethereum, mirip dengan transaksi yang dimulai oleh dompet, digunakan untuk membuktikan kontrol pengguna atas dompet tertentu. Saat ini, plugin dompet utama telah mendukung metode otentikasi sederhana ini, cukup dengan menandatangani informasi di dalam plugin.

Artikel ini akan berfokus pada implementasi SIWE di Ethereum, tidak melibatkan blockchain publik lainnya seperti Solana, SUI, dll.

Skenario Penggunaan SIWE

Jika aplikasi terdesentralisasi Anda (Dapp) memiliki kebutuhan berikut, Anda dapat mempertimbangkan untuk menggunakan SIWE:

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

Untuk aplikasi yang berfokus pada pencarian ( seperti penjelajah blok ), SIWE mungkin tidak perlu digunakan.

Meskipun identifikasi dapat dilakukan melalui koneksi dompet di Dapp, ini hanya berlaku untuk frontend. Untuk pemanggilan antarmuka yang memerlukan dukungan backend, hanya menyampaikan informasi alamat tidak cukup untuk membuktikan identitas, karena alamat adalah informasi publik.

Cara Kerja SIWE

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

sambungkan dompet

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

tanda tangan

Langkah-langkah tanda tangan meliputi mendapatkan nilai Nonce, tanda tangan dompet, dan verifikasi tanda tangan backend.

Backend menghasilkan nilai Nonce acak dan mengaitkannya dengan alamat, untuk mempersiapkan tanda tangan selanjutnya. Frontend mengambil nilai Nonce dan membangun konten tanda tangan, termasuk nilai Nonce, nama domain, ID rantai, dan informasi lainnya, menggunakan metode yang disediakan oleh dompet untuk melakukan tanda tangan. Terakhir, tanda tangan tersebut dikirim ke backend untuk diverifikasi.

mendapatkan identifikasi

Setelah validasi tanda tangan di backend berhasil, kembalikan identifikasi pengguna ( seperti JWT). Pada permintaan selanjutnya di frontend, sertakan alamat dan identifikasi, untuk membuktikan kepemilikan dompet.

Contoh Implementasi SIWE

Berikut akan ditunjukkan cara mengimplementasikan fungsi SIWE dalam proyek Nextjs, sehingga Dapp dapat mengembalikan JWT untuk verifikasi identitas pengguna.

persiapan lingkungan

Contoh ini dikembangkan berdasarkan Nextjs, memerlukan lingkungan Node.js. Menggunakan Nextjs memungkinkan pengembangan proyek full-stack dengan mudah, tanpa perlu memisahkan frontend dan backend.

Instal ketergantungan

Pertama, instal Nextjs:

npx create-next-app@14

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

npm run dev

Akses localhost:3000 untuk melihat proyek Nextjs dasar.

Pasang ketergantungan terkait SIWE

Kami akan menggunakan Ant Design Web3 untuk mengimplementasikan koneksi dompet, yang gratis, terus dipelihara, dan pengalaman pengguna mirip dengan perpustakaan komponen biasa, mendukung fitur SIWE.

Instal ketergantungan terkait:

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

mengonfigurasi Wagmi

Mengimpor WagmiProvider di layout.tsx:

typescript “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(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} </wagmiweb3configprovider> ); };

ekspor default WagmiProvider;

Wujudkan tombol koneksi

Tambahkan tombol untuk menghubungkan dompet dan menandatangani:

typescript “gunakan klien”; import type { Account } dari “@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 ( <> <flex vertical=“” gap=“middle”> <space> <connectbutton> <connector.siwebutton renderbuttontext=“{renderSignBtnText}”> </connector.siwebutton></connectbutton></space> <div>JWT: {jwt}</div> </flex> <!----> ); }

mengimplementasikan antarmuka backend

Antarmuka Nonce

Menghasilkan Nonce acak dan mengaitkannya dengan alamat:

typescript import { randomBytes } from “crypto”; import { addressMap } from “…/cache”;

ekspor async function 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 pesan

Verifikasi tanda tangan dan kembalikan JWT:

typescript 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(request: 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, }); }

Optimasi Kinerja

Untuk meningkatkan kecepatan verifikasi, disarankan untuk menggunakan layanan node khusus. Mengambil layanan node ZAN sebagai contoh, setelah mendapatkan koneksi HTTPS RPC untuk mainnet Ethereum, ganti RPC default publicClient:

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

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