SIWE简介:让你的Dapp identifikasi lebih aman

SIWE(Masuk dengan Ethereum) adalah metode verifikasi identitas pengguna yang berbasis Ethereum. Mirip dengan memulai transaksi, pengguna membuktikan kendali atas dompet dengan tanda tangan. Saat ini, sebagian besar plugin dompet utama telah mendukung metode verifikasi identitas yang sederhana ini.

Skenario Penerapan SIWE

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 berfokus pada pencarian seperti penjelajah blok ), SIWE tidak selalu diperlukan.

Perlu dicatat bahwa hanya dengan menghubungkan dompet tidak dapat sepenuhnya membuktikan identitas. Untuk panggilan antarmuka yang memerlukan dukungan backend, masih diperlukan verifikasi identitas tambahan, jika tidak, siapa pun dapat "meminjam" informasi alamat publik.

Cara Kerja SIWE

Proses dasar SIWE terdiri dari tiga langkah: menghubungkan dompet, menandatangani, mendapatkan identifikasi.

1. Menghubungkan dompet: Menghubungkan dompet pengguna melalui plugin dompet

2. Tanda tangan:

   • Dapatkan nilai Nonce: panggil antarmuka backend untuk mendapatkan nilai Nonce acak
   • Membangun konten tanda tangan: termasuk Nonce, nama domain, ID rantai, dan informasi lainnya
   • Menggunakan dompet untuk menandatangani
   • Kirim tanda tangan untuk verifikasi backend

3. Mendapatkan identifikasi: Setelah verifikasi tanda tangan backend berhasil, kembalikan identifikasi pengguna ( seperti JWT )

Praktik SIWE

Berikut kita akan mempraktikkan proses SIWE melalui sebuah Demo sederhana. Harap diperhatikan, Demo ini hanya digunakan untuk mendemonstrasikan proses dasar, tidak sebaiknya digunakan langsung di lingkungan produksi.

persiapan lingkungan

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

Instal dependensi

Pertama, buat proyek Next.js:

npx create-next-app@14

Masuk ke direktori proyek, instal dependensi 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:

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";

const YOUR_WALLET_CONNECT_PROJECT_ID = "xxx"; const queryClient = new QueryClient();

const WagmiProvider = ({ 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;

Tambahkan tombol koneksi

Buat tombol untuk menghubungkan dompet dan menandatangani:

jsx "gunakan klien"; import { ConnectButton } from "@ant-design/web3"; import React from "react"; import { JwtProvider } from "./JwtProvider";

ekspor default fungsi App() { const jwt = React.useContext(JwtProvider);

const renderSignBtnText = (defaultDom, account) => { const { address } = account ?? {}; const ellipsisAddress = address ? ${address.slice(0, 6)}...${address.slice(-6)} : ""; kembali Masuk sebagai ${ellipsisAddress}; };

return ( <> <connectbutton.signin label="{renderSignBtnText}" onsignmessagesuccess="{(" ==""> { console.log)"Tanda pesan sukses"(; ｝｝ />

![SIWE Pengguna Manual: Bagaimana Membuat Dapp Anda Lebih Kuat?])https://img-cdn.gateio.im/webp-social/moments-18a98c883797c414a689c54ae0d65302.webp(

) mengimplementasikan antarmuka backend

Antarmuka Nonce

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

ekspor async fungsi GET###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 tanda tangan

javascript import { createPublicClient, http } dari "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((, });

export async function POST)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, }(; }

![SIWE menggunakan manual: bagaimana membuat Dapp Anda lebih kuat?])https://img-cdn.gateio.im/webp-social/moments-9351d7f08e48962120d591c3a0c7d245.webp(

Saran Optimasi

Untuk meningkatkan kecepatan verifikasi, disarankan untuk menggunakan layanan node khusus. Anda dapat menggunakan layanan node ZAN, menggantikan RPC default:

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

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

![SIWE menggunakan manual: bagaimana membuat Dapp Anda lebih kuat?])https://img-cdn.gateio.im/webp-social/moments-0ce46cff7473e96e768adfb5fc6dafb8.webp(</connectbutton.signin>