SIWE: Cara identifikasi yang lebih kuat untuk DApp Anda

SIWE(Masuk dengan Ethereum) adalah metode untuk memverifikasi identifikasi pengguna di Ethereum, mirip dengan memulai transaksi, yang membuktikan kontrol pengguna atas dompet. Saat ini, sebagian besar plugin dompet mendukung metode verifikasi identitas sederhana ini, hanya perlu menandatangani informasi di dalam plugin. Artikel ini terutama membahas skenario penandatanganan di Ethereum, tanpa melibatkan rantai publik lainnya.

Apakah proyek memerlukan 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

Namun, jika DApp Anda terutama berfungsi untuk pencarian, seperti aplikasi seperti etherscan, maka tidak selalu diperlukan SIWE.

Meskipun menghubungkan dompet di DApp menunjukkan kepemilikan dompet, ini hanya berlaku untuk frontend. Untuk panggilan antarmuka yang memerlukan dukungan backend, hanya mengirimkan alamat tidak dapat membuktikan identifikasi, karena alamat adalah informasi publik.

Prinsip dan Proses SIWE

Proses SIWE dapat diringkas 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

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

Pertama, panggil antarmuka belakang untuk mendapatkan nilai Nonce, backend akan menghasilkan Nonce acak dan mengaitkannya dengan alamat. Setelah frontend mendapatkan Nonce, bangun konten tanda tangan, termasuk Nonce, nama domain, ID rantai, dll., gunakan metode yang disediakan dompet untuk melakukan tanda tangan, lalu kirim tanda tangan ke backend.

mendapatkan identifikasi

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

Praktik SIWE

Kami akan mengembangkan sebuah DApp yang mendukung SIWE menggunakan Next.js, dengan tujuan mengembalikan JWT untuk identifikasi.

pekerjaan persiapan

1. Instal Next.js:

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:

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

ekspor default WagmiProvider;

Tambahkan tombol koneksi

typescript "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 { address } = account ?? {}; const ellipsisAddress = address ? ${address.slice(0, 6)}...${address.slice(-6)} : ""; kembali Masuk sebagai ${ellipsisAddress}; };

return ( <>

implementasi antarmuka

Antarmuka Nonce

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

Verifikasi pesan antarmuka

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 fungsi POST(permintaan: Permintaan) { const { tandaTangan, pesan } = 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 respons login SIWE, disarankan untuk menggunakan layanan node khusus sebagai pengganti node RPC default. Sebagai contoh layanan node ZAN, setelah mendapatkan koneksi HTTPS RPC untuk jaringan utama Ethereum, ganti RPC default publicClient:

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

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