Aplikasi dan Praktik SIWE dalam Aplikasi Web3

SIWE(Masuk dengan Ethereum) adalah cara autentikasi pengguna yang berbasis Ethereum, mirip dengan transaksi yang dimulai oleh dompet, untuk membuktikan kontrol pengguna atas dompet tersebut. Saat ini, plugin dompet utama telah mendukung cara autentikasi sederhana ini secara luas, cukup dengan menandatangani informasi di dalam plugin. Artikel ini terutama membahas skenario tanda tangan di Ethereum, tidak termasuk blockchain publik lainnya.

Skenario Penerapan SIWE

SIWE terutama digunakan untuk menyelesaikan masalah verifikasi identitas alamat dompet. Jika aplikasi Anda memiliki kebutuhan berikut, Anda dapat mempertimbangkan untuk menggunakan SIWE:

• Memiliki sistem pengguna yang independen
• Perlu memeriksa informasi terkait privasi pengguna

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

Meskipun identitas dapat dinyatakan melalui koneksi dompet di frontend aplikasi, untuk panggilan antarmuka yang memerlukan dukungan backend, hanya mengirimkan alamat tidak cukup, karena alamat adalah informasi publik yang mudah disalahgunakan oleh orang lain.

Prinsip dan Proses SIWE

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

Sambungkan Dompet

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

Tanda Tangan

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

1. Dapatkan nilai Nonce: Panggil antarmuka backend untuk mendapatkan nilai Nonce acak, dan hubungkan dengan alamat saat ini.

2. Membangun konten tanda tangan: termasuk nilai Nonce, nama domain, ID rantai, konten tanda tangan, dll., gunakan metode yang disediakan oleh dompet untuk menandatangani.

3. Kirim tanda tangan: Kirim tanda tangan ke backend untuk diverifikasi.

Mendapatkan identitas

Setelah verifikasi tanda tangan backend berhasil, kembalikan identitas pengguna ( seperti JWT ). Permintaan frontend selanjutnya menyertakan alamat dan identitas, yang dapat membuktikan kepemilikan dompet.

Panduan Praktik

Berikut adalah cara cepat untuk mengintegrasikan SIWE dalam aplikasi, dengan tujuan mengembalikan JWT untuk verifikasi identitas pengguna. Perlu dicatat, contoh ini hanya digunakan untuk menunjukkan alur dasar, penggunaan di lingkungan produksi mungkin memiliki risiko keamanan.

Persiapan Lingkungan

Artikel ini menggunakan Next.js untuk mengembangkan aplikasi full-stack, perlu menyiapkan lingkungan Node.js.

Pasang ketergantungan

Pertama, instal Next.js:

npx create-next-app@14

Masukkan direktori proyek dan jalankan:

npm run dev

Instal ketergantungan terkait SIWE

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

Konfigurasi 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 dari "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

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 { address } = account ?? {}; 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 } 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, }); }

Antarmuka Verifikasi Pesan

javascript import { createPublicClient, http } from "viem"; import { mainnet } dari "viem/chains"; import jwt dari "jsonwebtoken"; import { parseSiweMessage } from "viem/siwe"; import { addressMap } dari "../cache";

const JWT_SECRET = "your-secret-key"; // Harap gunakan kunci yang lebih aman, dan tambahkan pemeriksaan kedaluwarsa, dll.

const publicClient = createPublicClient({ rantai: mainnet, transport: http(), });

ekspor async function 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, }); }

Optimalisasi Kinerja

Untuk meningkatkan kecepatan respons login SIWE, disarankan untuk menggunakan layanan node khusus sebagai pengganti node RPC default. Artikel ini menggunakan layanan node ZAN, yang dapat diperoleh dari konsolnya untuk mendapatkan koneksi RPC.

Ganti RPC default publicClient:

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

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