SIWE: Alat Kuat untuk Masuk Ethereum

SIWE (Masuk dengan Ethereum) adalah metode untuk memverifikasi identitas pengguna di Ethereum. Mirip dengan memulai transaksi, ini membuktikan kontrol pengguna atas dompet melalui tanda tangan. Saat ini, sebagian besar plugin dompet utama telah mendukung metode otentikasi sederhana ini.

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

Kapan SIWE Diperlukan?

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

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

Untuk Dapp( yang terutama menyediakan fungsi pencarian seperti penjelajah blok ), mungkin tidak memerlukan SIWE.

Meskipun koneksi melalui dompet dapat membuktikan identitas di frontend, namun untuk panggilan API yang memerlukan dukungan backend, hanya mengirimkan alamat tidaklah cukup, karena alamat adalah informasi publik dan siapa pun dapat menggunakannya.

Prinsip dan Proses SIWE

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

sambungkan dompet

Ini adalah operasi umum dalam aplikasi Web3, menghubungkan dompet pengguna melalui plugin dompet.

tanda tangan

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

Pertama, ambil nilai Nonce yang dihasilkan secara acak dari backend, backend akan mengaitkannya dengan alamat saat ini.

Setelah mendapatkan nilai Nonce dari frontend, bangun konten tanda tangan, termasuk Nonce, nama domain, ID rantai, dan informasi lainnya, lalu gunakan metode tanda tangan dompet untuk menandatangani.

Terakhir, kirim tanda tangan ke backend untuk diverifikasi.

mendapatkan identitas

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

Praktik SIWE

Di bawah ini, kita akan mempraktikkan proses dasar SIWE melalui sebuah Demo sederhana, dengan tujuan agar Dapp dapat mengembalikan JWT yang digunakan untuk verifikasi identitas.

Perhatian: Demo ini hanya digunakan untuk menunjukkan proses dasar, penggunaan di lingkungan produksi mungkin memiliki risiko keamanan.

Persiapan kerja

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

Instal ketergantungan

Pertama, instal Next.js:

npx create-next-app@14

Selesaikan instalasi sesuai petunjuk.

Masuk ke direktori proyek dan mulai:

npm run dev

Akses localhost:3000 untuk melihat proyek Next.js dasar.

Instal dependensi terkait SIWE

Kami menggunakan Ant Design Web3 untuk menghubungkan dompet dan menerapkan fungsi SIWE:

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

memperkenalkan Wagmi

Mengimpor WagmiProvider di layout.tsx:

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 } 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 untuk menghubungkan dompet:

jsx "gunakan klien"; import type { Account } from "@ant-design/web3"; import { ConnectButton, Connector } from "@ant-design/web3"; import { Flex, Space } dari "antd"; import React dari "react"; import { JwtProvider } from "./JwtProvider";

export default function 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 cara ini, sebuah kerangka dasar SIWE untuk masuk telah terwujud.

implementasi antarmuka

Sekarang mari kita implementasikan beberapa antarmuka yang diperlukan untuk backend.

Nonce

Menghasilkan Nonce acak dan mengaitkannya dengan alamat:

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 (!address) { throw new Error("Invalid address"); } const nonce = randomBytes(16).toString("hex"); addressMap.set(address, nonce); return Response.json({ data: nonce, }); }

verifikasiPesan

Verifikasi tanda tangan dan kembalikan JWT:

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

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

Dengan ini, sebuah Dapp SIWE dasar untuk masuk telah selesai dikembangkan.

Optimalisasi Kinerja

Untuk meningkatkan kecepatan verifikasi, disarankan untuk menggunakan layanan node khusus. Di sini kami menggunakan layanan node ZAN, menggantikan RPC default publicClient:

javascript const publicClient = createPublicClient({ rantai: mainnet, transport: http('), //ganti dengan RPC layanan node ZAN yang didapat });

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