SIWE: Alat yang kuat untuk menyediakan identifikasi pada Dapp

SIWE (Sign-In with Ethereum) adalah metode untuk memverifikasi identitas pengguna di Ethereum, mirip dengan memulai transaksi, yang membuktikan kontrol pengguna atas dompet mereka. Saat ini, sebagian besar plugin dompet mendukung metode tanda tangan sederhana ini.

Artikel ini terutama membahas skenario tanda tangan di Ethereum, tanpa melibatkan rantai publik lainnya.

Apakah proyek Anda memerlukan SIWE?

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

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

Untuk Dapp( yang terutama menyediakan fungsi pencarian seperti etherscan), SIWE tidak perlu digunakan.

Meskipun setelah menghubungkan dompet, frontend dapat mengonfirmasi identifikasi, tetapi untuk pemanggilan antarmuka yang memerlukan dukungan backend, hanya mengirimkan alamat tidak dapat membuktikan identifikasi, karena alamat adalah informasi publik.

Prinsip dan Proses SIWE

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

sambungkan dompet

Ini adalah operasi Web3 yang umum, terhubung ke Dapp melalui plugin dompet.

tanda tangan

Langkah-langkah tanda tangan SIWE meliputi:

1. Dapatkan nilai Nonce: panggil antarmuka backend untuk mendapatkan nilai Nonce acak, yang terhubung dengan alamat.

2. Membangun konten tanda tangan: termasuk nilai Nonce, nama domain, ID rantai, dan informasi lainnya.

3. Tanda tangan dompet: Gunakan metode yang disediakan oleh dompet untuk menandatangani konten.

4. Kirim tanda tangan: Kirim tanda tangan untuk diverifikasi oleh backend.

mendapatkan identifikasi

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

Praktik SIWE

Kami akan mengembangkan aplikasi full-stack yang mendukung SIWE menggunakan Next.js.

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:

jsx import { WagmiWeb3ConfigProvider } from "@ant-design/web3-wagmi";

const WagmiProvider = ({ children }) => { return ( <wagmiweb3configprovider config="｛｛" siwe:="" {="" getnonce:="" async="" (address)=""> (await getNonce(address)).data, createMessage: (props) => createSiweMessage({ ...props, statement: "Ant Design Web3" }), verifyMessage: async (message, signature) => { const jwt = (await verifyMessage(message, signature)).data; setJwt(jwt); return !!jwt; }, }, chains: [Mainnet], transportasi: { [Mainnet.id]: http(), }, wallets: [MetaMask(), WalletConnect(), TokenPocket(), OkxWallet()] ｝｝ > {children} ); };

Tambahkan tombol koneksi

Buat tombol untuk menghubungkan dompet dan menandatangani:

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

return ( <connectbutton.connector> {({ akun, sambungkan }) => ( {akun ? Terhubung: ${account.address.slice(0,6)}...${account.address.slice(-4)} : "Sambungkan Dompet"} )} </connectbutton.connector> ); }

mewujudkan antarmuka belakang

Antarmuka Nonce

javascript ekspor fungsi asinkron GET(request) { 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 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("Invalid nonce"); }

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

Optimasi Kinerja

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('), // Layanan RPC node ZAN });

Ini akan secara signifikan meningkatkan kecepatan respons antarmuka.