SIWE: Alat kuat untuk meningkatkan identifikasi Dapp

SIWE(Masuk dengan Ethereum) adalah metode untuk memverifikasi identitas pengguna di Ethereum, mirip dengan memulai transaksi, untuk membuktikan kontrol pengguna atas dompet. Saat ini, sebagian besar plugin dompet utama telah mendukung metode autentikasi identitas sederhana ini, hanya perlu menandatangani informasi di dalam plugin.

Artikel ini akan fokus membahas skenario tanda tangan di Ethereum, tidak termasuk blockchain publik lainnya seperti Solana, SUI, dan sebagainya.

Kapan SIWE perlu digunakan?

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 Dapp( yang terutama menyediakan fungsi pencarian seperti penjelajah blok ), SIWE tidak perlu digunakan.

Meskipun setelah menghubungkan dompet di Dapp tampaknya identifikasi telah terbukti, tetapi ini hanya berlaku untuk frontend. Untuk panggilan antarmuka yang memerlukan dukungan backend, hanya mengirimkan alamat tidak cukup, karena alamat adalah informasi publik yang mudah disalahgunakan.

Prinsip dan Proses SIWE

Proses SIWE dapat dirangkum dalam tiga langkah: menghubungkan dompet - menandatangani - mendapatkan identifikasi. Mari kita bahas lebih detail tentang ketiga langkah ini.

sambungkan dompet

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

tanda tangan

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

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

Setelah mendapatkan nilai Nonce dari frontend, bangun konten tanda tangan, biasanya mencakup nilai Nonce, nama domain, ID rantai, dan konten tanda tangan, dll. Kemudian gunakan metode yang disediakan dompet untuk menandatangani konten.

Akhirnya, kirim tanda tangan ke backend untuk diverifikasi.

mendapatkan identifikasi

Setelah verifikasi tanda tangan di backend berhasil, akan mengembalikan identifikasi pengguna, seperti JWT. Pada permintaan selanjutnya di frontend, sertakan alamat dan identifikasi untuk membuktikan kepemilikan dompet.

Praktik SIWE

Kami akan menggunakan Next.js untuk mengembangkan aplikasi SIWE sederhana, dengan tujuan agar Dapp dapat mengembalikan JWT untuk identifikasi. Perhatikan, demo ini hanya digunakan untuk memperkenalkan proses dasar, mungkin ada risiko keamanan di lingkungan produksi.

persiapan kerja

Kami perlu menyiapkan lingkungan Node.js, dan menggunakan Next.js untuk mengembangkan proyek full-stack.

Instal dependensi

Pertama, instal Next.js:

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 Next.js dasar.

Instal dependensi terkait SIWE

Kami akan menggunakan Ant Design Web3, yang gratis, terus dipelihara, pengalaman pengguna mirip dengan pustaka komponen biasa, dan mendukung SIWE. Perintah instalasi adalah sebagai berikut:

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 } from "@/app/api"; import { Mainnet, MetaMask, OkxWallet, TokenPocket, WagmiWeb3ConfigProvider, WalletConnect, } dari "@ant-design/web3-wagmi"; import { QueryClient } from "@tanstack/react-query"; import React dari "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;

Kemudian tambahkan tombol sambungkan dompet:

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 ( <> </connector></connectbutton></space>

Dengan ini, kami telah mencapai kerangka dasar login SIWE.

implementasi antarmuka

Sekarang kita akan mengimplementasikan antarmuka verifikasi identifikasi pengguna di backend.

Nonce

Nonce digunakan untuk meningkatkan keandalan tanda tangan. Kami menghasilkan string acak dan mengaitkannya dengan 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 biasanya diselesaikan oleh plugin dompet, kami menggunakan metode tanda tangan Wagmi.

verifikasiPesan

Backend perlu memverifikasi konten tanda tangan dan melakukan pemeriksaan keamanan:

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

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

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

Ini akan secara signifikan mengurangi waktu verifikasi dan meningkatkan kecepatan antarmuka.