SIWE: paradigma baru autentikasi identifikasi Dapp yang didorong oleh tanda tangan Ethereum

2025-07-12 04:02:35

SIWE: Menggunakan Ethereum untuk menandatangani dan mewujudkan autentikasi identifikasi Dapp yang lebih kuat

SIWE(Masuk dengan Ethereum) adalah cara untuk memverifikasi identitas pengguna di Ethereum, mirip dengan memulai transaksi, digunakan untuk membuktikan kontrol pengguna atas dompet. Saat ini, sebagian besar plugin dompet telah mendukung cara verifikasi tanda tangan sederhana ini.

Kapan SIWE perlu digunakan?

Jika Dapp 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 pencarian seperti etherscan(, tidak perlu menggunakan SIWE.

Meskipun identifikasi dapat dilakukan setelah menghubungkan dompet di front-end Dapp, namun untuk panggilan interface yang memerlukan dukungan back-end, hanya mengirimkan alamat tidak cukup, karena alamat adalah informasi publik yang mudah disalahgunakan.

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

Prinsip dan Proses SIWE

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

) sambungkan dompet

Menghubungkan dompet pengguna di Dapp melalui plugin dompet.

tanda tangan

Langkah-langkah penandatanganan meliputi:

Mendapatkan nilai Nonce: Memanggil antarmuka backend untuk mendapatkan nilai Nonce yang dihasilkan secara acak
Membangun konten tanda tangan: mencakup nilai Nonce, nama domain, ID rantai, dan informasi lainnya
Menggunakan dompet untuk tanda tangan
Kirim tanda tangan untuk verifikasi backend

mendapatkan identifikasi

Setelah verifikasi tanda tangan di belakang layar berhasil, kembalikan identifikasi pengguna ### seperti JWT(. Setelah itu, saat permintaan dari frontend, bawa alamat dan identifikasi untuk membuktikan kepemilikan dompet.

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

Praktik SIWE

Berikut adalah cara untuk mengimplementasikan SIWE dalam proyek, dengan tujuan agar Dapp dapat mengembalikan JWT untuk verifikasi identifikasi pengguna.

) persiapan kerja

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

Instal ketergantungan

Pertama, instal Next.js:

npx create-next-app@14

Masuk ke direktori proyek dan jalankan:

npm run dev

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

Pasang ketergantungan terkait SIWE

Menggunakan Ant Design Web3 untuk menghubungkan dompet:

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

![SIWE menggunakan manual: Bagaimana membuat Dapp Anda lebih kuat?]###https://img-cdn.gateio.im/webp-social/moments-355ea961b315585f7d217cbcf6a3fa69.webp(

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

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(=""> )tunggu dapatNonce(alamat().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={)} transports=｛｛ [Mainnet.id]: http[Mainnet](, ｝｝ walletConnect=｛｛ projectId: YOUR_WALLET_CONNECT_PROJECT_ID, ｝｝ wallets={[ MetaMask)(, WalletConnect)(, TokenPocket){ grup: "Populer", }(, OkxWallet)(, ]} queryClient={queryClient} > {children} ); };

ekspor default WagmiProvider;

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

) mengimplementasikan tombol koneksi

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

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

return ) <>

JWT: {jwt}

(; }

![SIWE Penggunaan Manual: Bagaimana membuat Dapp Anda lebih kuat?])https://img-cdn.gateio.im/webp-social/moments-18a98c883797c414a689c54ae0d65302.webp(

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 )!alamat( { 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 } 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 { 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, }(; }

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

Saran Optimalisasi

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

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

Dengan cara ini, waktu verifikasi dapat secara signifikan dikurangi dan kecepatan antarmuka dapat ditingkatkan.

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

ETH-1.67%

DAPP1.11%

Lihat Asli

This page may contain third-party content, which is provided for information purposes only (not representations/warranties) and should not be considered as an endorsement of its views by Gate, nor as financial or professional advice. See Disclaimer for details.

14 Suka