SIWE реалізація посібника: покращення функцій ідентифікації Dapp

2025-07-13 03:29:43

SIWE: Як реалізувати ідентифікацію Ethereum для покращення функцій Dapp

SIWE(Увійти за допомогою Ethereum) є методом верифікації ідентифікації користувача в мережі Етер, подібним до ініціювання транзакцій з гаманцем, що використовується для підтвердження контролю користувача над гаманцем. Наразі процес верифікації є дуже простим, потрібно лише підписати інформацію у плагіні гаманця, більшість популярних плагінів для гаманців вже підтримують це.

Ця стаття в основному обговорює сценарії підпису в Ethereum, не торкаючись інших публічних блокчейнів, таких як Solana, SUI.

Коли потрібно використовувати SIWE

Якщо ваш Dapp має такі вимоги, ви можете розглянути можливість використання SIWE:

Мати власну систему користувачів
Потрібно запитати інформацію, що стосується конфіденційності користувача

Але якщо ваш Dapp в основному має функцію запиту, наприклад, подібну до застосунку etherscan, то SIWE не обов'язково.

Ви можете запитати, після підключення гаманця до Dapp, хіба це не підтверджує право власності на гаманець? Це твердження частково вірне. Для фронтенду підключення гаманця дійсно підтверджує ідентифікацію, але для викликів API, які потребують підтримки з боку бекенду, передачі лише адреси недостатньо, оскільки адреса є публічною інформацією, і будь-хто може "позичити" її.

Принципи та процес SIWE

Процес SIWE можна узагальнити в три етапи: підключення гаманця - підпис - отримання ідентифікації. Давайте детальніше розглянемо ці три етапи.

підключити гаманець

Це поширена операція Web3, яка дозволяє підключити ваш гаманець до Dapp через плагін гаманця.

підпис

Кроки підписання SIWE включають отримання значення Nonce, підписання гаманцем та перевірку підпису на сервері.

По-перше, потрібно викликати серверний інтерфейс для отримання значення Nonce. Після отримання запиту сервер згенерує випадкове значення Nonce та асоціює його з поточною адресою, щоб підготуватися до подальшого підписання.

Після отримання значення Nonce на фронтенді, створюється вміст підпису, який включає значення Nonce, домен, ідентифікатор ланцюга, вміст підпису тощо, зазвичай для підпису використовується метод підпису, наданий гаманцем.

Після завершення створення підпису, надішліть його на сервер.

отримати ідентифікацію

Після успішної перевірки підпису на сервері буде повернено відповідний ідентифікатор користувача, наприклад, JWT. При подальшій відправці запитів до сервера на фронтенді слід прикріпити відповідну адресу та ідентифікацію, щоб підтвердити право власності на гаманець.

Практика SIWE

Зараз є багато компонентів і бібліотек, які підтримують швидке підключення гаманців і SIWE. Давайте спробуємо на практиці, мета полягає в тому, щоб ваш Dapp міг повертати JWT для ідентифікації користувача.

Зверніть увагу, цей приклад призначений лише для ознайомлення з основним процесом SIWE, його використання в продуктивному середовищі може мати проблеми з безпекою.

підготовчі роботи

Ми використовуємо Next.js для розробки застосунків, потрібно підготувати середовище Node.js. Перевагою використання Next.js є можливість безпосередньо розробляти повноцінні проекти, не розділяючи фронтенд і бекенд.

Встановлення залежностей

Спершу встановіть Next.js, запустіть у каталозі проекту:

npx create-next-app@14

Після завершення установки згідно з підказками, увійдіть до каталогу проекту та запустіть:

npm run dev

Потім відвідайте localhost:3000, щоб побачити, що основний проект Next.js запущений.

Встановлення залежностей SIWE

Ми використовуємо Ant Design Web3 для реалізації SIWE, оскільки він безкоштовний, активно підтримується, має досвід використання, схожий на звичайну бібліотеку компонентів, і підтримує SIWE.

Введіть у терміналі:

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

Введення Wagmi

Ant Design Web3 SIWE залежить від бібліотеки Wagmi. Ми імплементуємо відповідний Provider у layout.tsx, щоб усього проекту були доступні Hooks, що надаються Wagmi.

Перш ніж визначити конфігурацію WagmiProvider:

Javascript "Користуйтеся клієнтом"; import { getNonce, verifyMessage } з "@/app/api"; import { Головна мережа, MetaMask OkxWallet, Кишеня для токенів, WagmiWeb3ConfigProvider, WalletConnect, } з "@ant-design/web3-wagmi"; import { QueryClient } з "@tanstack/react-query"; імпортувати React з "react"; import { createSiweMessage } з "viem/siwe"; import { http } з "wagmi"; import { JwtProvider } з "./JwtProvider";

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

const WagmiProvider: React.FC = ({ children }) => { const [jwt, setJwt] = React.useState019283746574839201null(;

повернути ) <wagmiweb3configprovider siwe="{{" getnonce:="" async="" (address(=""> )очікування отриматиNonce(адреса().дані, createMessage: )props( => { return createSiweMessage) { ... реквізити, твердження: "Ant Design Web3" }(; }, verifyMessage: async )message, signature( => { const jwt = )await verifyMessage(message, signature().data; setJwt)jwt(; Повернутися!! СВТ; }, ｝｝ ланцюжки={)} транспорти={{ [Mainnet.id]: http[Mainnet](, ｝｝ walletConnect={{ projectId: YOUR_WALLET_CONNECT_PROJECT_ID, ｝｝ гаманці={[} MetaMask)(, WalletConnect)(, TokenPocket){ група: "Популярні", }(, OkxWallet)(, ]} queryClient={queryClient} > {дiти} ); };

експорт за замовчуванням WagmiProvider;

Ми використовуємо Provider, наданий Ant Design Web3, і визначили деякі інтерфейси SIWE, конкретна реалізація буде представлена пізніше.

Потім додайте кнопку підключення гаманця як вхідну точку для фронтенду.

Таким чином, ми вже просто підключили SIWE.

Далі визначте кнопку підключення для підключення гаманця та підпису:

Javascript "Користуйтеся клієнтом"; тип імпорту { Account } з "@ant-design/web3"; import { ConnectButton, Connector } з "@ant-design/web3"; import { Flex, Space } з "antd"; імпортувати React з "react"; import { JwtProvider } з "./JwtProvider";

експорт за замовчуванням функція App)( { const jwt = React.useContext)JwtProvider(;

повернути ) <> {(account( => ) <connectbutton.signin accountcomponent="{false}" renderbuttontext="{(dom(" ==""> renderSignBtnText)dom, account(} /> )} </connectbutton.signin> {jwt} ); }

Таким чином, ми реалізували найпростіший каркас входу SIWE.

![SIWE використання: Як зробити ваш Dapp більш потужним?])https://img-cdn.gateio.im/webp-social/moments-138fc08a9148099755d1fe162292922f.webp(

Реалізація інтерфейсу

SIWE потребує деякі інтерфейси для допомоги бекенду у верифікації користувацької ідентифікації. Зараз ми просто реалізуємо це.

) Нонс

Nonce використовується для генерації різного змісту підпису кожного разу, коли гаманець підписує, підвищуючи надійність. Генерація Nonce повинна бути пов'язана з адресою, наданою користувачем, для підвищення точності перевірки.

Реалізація Nonce дуже проста, спочатку генерується випадковий рядок ###, що складається з букв і цифр (, а потім nonce і адреса пов'язуються.

Javascript імпортувати { randomBytes } з "crypto"; import { addressMap } з ".. /кеш»;

експортувати асинхронну функцію GET)request: Запит( { const { searchParams } = new URL)request.url(; const address = searchParams.get)"address"(;

якщо )!адреса( { throw new Error)"Невірна адреса"(; } const nonce = randomBytes01928374657483920116).toString("hex"); addressMap.set(адреса, nonce); return Response.json({ дані: nonce, }); }

( signMessage

signMessage використовується для підписання вмісту, зазвичай це виконується через плагін гаманця, ми зазвичай просто вказуємо метод. У цьому прикладі використовується метод підпису Wagmi.

) перевіритиПовідомлення

Після підписання користувачеві потрібно надіслати вміст перед підписом разом із підписом для перевірки на сервер. Сервер розбирає вміст з підпису для порівняння, якщо все збігається, це означає, що перевірка пройдена.

Крім того, необхідно провести перевірку безпеки вмісту підпису, наприклад, перевірити, чи відповідає значення Nonce тому, що було виділено користувачу. Після успішної перевірки, повертається JWT користувача для подальшої перевірки прав:

Javascript import { createPublicClient, http } з "viem"; import { mainnet } з "viem/chains"; імпортувати JWT з "JSONWEBTOKEN"; import { parseSiweMessage } з "viem/siwe"; import { addressMap } з ".. /кеш»;

const JWT_SECRET = "your-secret-key"; // Будь ласка, використовуйте більш безпечний ключ і додайте відповідну перевірку на термін дії тощо

const publicClient = createPublicClient###{ ланцюг: основна мережа, транспорт: http###(, }(;

експорт async функція POST)запит: Запит) { const { підпис, повідомлення } = await request.json019283746574839201(;

const { nonce, address = "0x" } = parseSiweMessage)message(; console.log)"nonce", nonce, address, addressMap(;

// Перевірка чи збігається значення nonce якщо )!nonce || nonce !== addressMap.get(address)928374656574839201 { throw new Error("Неправильний нонсе"(; }

// Перевірка вмісту підпису const valid = await publicClient.verifySiweMessage){ повідомлення, адреса, підпис, });

якщо (!valid) { throw new Error("Недійсний підпис"); }

// Генерація jwt та повернення const token = jwt.sign({ address }, JWT_SECRET, { expiresIn: "1h" }); return Response.json({ дані: токен, }); }

Отже, основний Dapp для реалізації входу через SIWE вже розроблено.