SIWE: Membuat otentikasi identifikasi Dapp Anda lebih aman dan dapat diandalkan

SIWE(Masuk dengan Ethereum) adalah metode untuk memverifikasi identitas pengguna di Ethereum, mirip dengan transaksi yang diajukan oleh dompet, digunakan untuk membuktikan bahwa pengguna memiliki kendali atas dompet tersebut. Saat ini, plugin dompet utama telah mendukung metode verifikasi identitas sederhana ini, hanya perlu menandatangani informasi di dalam dompet.

Artikel ini terutama membahas skenario tanda tangan SIWE di Ethereum, tanpa melibatkan blockchain publik lainnya seperti Solana dan SUI.

Kapan SIWE perlu digunakan?

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

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

Untuk Dapp( yang berfokus pada fungsi pencarian seperti penjelajah blok), tidak selalu memerlukan SIWE.

Anda mungkin bertanya, setelah menghubungkan dompet ke Dapp, bukankah itu sudah menunjukkan kepemilikan dompet? Pernyataan ini tidak sepenuhnya akurat. Bagi front-end, menghubungkan dompet memang dapat membuktikan identitas, tetapi untuk pemanggilan antarmuka yang memerlukan dukungan back-end, hanya mengirimkan alamat tidak dapat memverifikasi identitas, karena alamat adalah informasi publik.

Prinsip dan Proses SIWE

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

menghubungkan dompet

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

tanda tangan

Langkah tanda tangan SIWE mencakup mendapatkan nilai Nonce, tanda tangan dompet, dan verifikasi tanda tangan backend.

Pertama, 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 termasuk Nonce, nama domain, ID rantai, dan konten tanda tangan, dll. Kemudian gunakan metode tanda tangan yang disediakan oleh dompet untuk menandatangani konten tersebut.

Akhirnya, kirim tanda tangan ke backend untuk diverifikasi.

mendapatkan identifikasi

Setelah verifikasi tanda tangan di backend berhasil, akan mengembalikan identifikasi pengguna yang sesuai, biasanya berupa token JWT. Frontend dalam permintaan selanjutnya membawa alamat dan identifikasi, sehingga dapat membuktikan kepemilikan dompet.

Praktik SIWE

Kami dapat mengimplementasikan fungsi SIWE melalui operasi nyata, dengan tujuan agar Dapp dapat mengembalikan JWT untuk verifikasi identifikasi pengguna. Perlu dicatat, demo berikut hanya untuk mendemonstrasikan alur dasar, mungkin ada risiko keamanan di lingkungan produksi.

persiapan kerja

Artikel ini 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 dependensi

Pertama, instal Next.js:

npx create-next-app@14

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

npm run dev

Pasang ketergantungan terkait SIWE

Kami menggunakan pustaka komponen Ant Design Web3 untuk mengimplementasikan koneksi dompet dan fungsi SIWE:

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. Kami mengimpor Provider terkait di layout.tsx, sehingga seluruh proyek dapat menggunakan Hooks yang disediakan oleh Wagmi.

Pertama, definisikan konfigurasi WagmiProvider:

jsx "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 } dari "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, ｝｝ wallets={[} MetaMask(), WalletConnect(), TokenPocket({ grup: "Populer", }), OkxWallet(), ]} queryClient={queryClient} > <jwtprovider.provider value="{jwt}">{children}</jwtprovider.provider> ); };

ekspor default WagmiProvider;

Kemudian tambahkan tombol untuk menghubungkan dompet:

jsx "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 ( <>

Dengan ini, kami telah berhasil membangun kerangka login SIWE yang sederhana.

implementasi antarmuka

Nonce

Nonce digunakan untuk menghasilkan konten tanda tangan yang berbeda setiap kali, meningkatkan keandalan tanda tangan. Kode implementasinya adalah sebagai berikut:

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

export async function GET(request: Request) { const { searchParams } = new URL(request.url); const address = searchParams.get("address");

jika (!alamat) { throw new Error("Alamat tidak valid"); } const nonce = randomBytes(16).toString("hex"); addressMap.set(address, nonce); return Response.json({ data: nonce, }); }

verifyMessage

Backend perlu memverifikasi konten tanda tangan, dan mengembalikan JWT untuk pemeriksaan izin selanjutnya:

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 masa berlaku, 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);

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 untuk mempercepat waktu respons antarmuka. Anda dapat menggunakan layanan node seperti ZAN, setelah mendapatkan koneksi RPC yang sesuai, ganti RPC default dalam kode.

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

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