SIWE: нова парадигма автентифікації Dapp на основі підписів Ethereum

2025-07-12 04:02:35

SIWE: Використання Ethereum підпису для досягнення більш потужної ідентифікації Dapp

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

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

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

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

Для застосунків, які в основному орієнтовані на запити (, таких як etherscan ), не потрібно використовувати SIWE.

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

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

Основний процес SIWE включає три етапи: підключення гаманця, підписання, отримання ідентифікації.

Підключити гаманця

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

підпис

Кроки підписання включають:

Отримати значення Nonce: викликати бекенд-інтерфейс для отримання випадково згенерованого значення Nonce
Побудова вмісту підпису: містить значення Nonce, домен, ID ланцюга та іншу інформацію
Використовуйте гаманець для підпису
Надішліть підпис для перевірки на сервер

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

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

Практика SIWE

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

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

Ця стаття використовує Next.js для розробки повноцінного застосунку, потрібно підготувати середовище Node.js.

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

По-перше, встановіть Next.js:

npx create-next-app@14

Увійдіть до каталогу проекту та запустіть:

npm run dev

Відвідайте localhost:3000, щоб побачити базовий проект Next.js.

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

Використання Ant Design Web3 для підключення гаманця:

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

Введення Wagmi

У файлі layout.tsx імплементуйте WagmiProvider:

JSX "Користуйтеся клієнтом"; 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";

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(; повернути !!jwt; }, ｝｝ ланцюжки={)} транспорти={{ [Mainnet.id]: http[Mainnet](, ｝｝ walletConnect={{ projectId: YOUR_WALLET_CONNECT_PROJECT_ID, ｝｝ гаманці={[ MetaMask)(, WalletConnect)(, TokenPocket){ group: "Популярні", }(, OkxWallet)(, ]} queryClient={queryClient} > {діти} ); };

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

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

) реалізувати кнопку підключення

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

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

повернути ) <> <з'єднувач rendersignbutton="{renderSignBtnText}">

JWT: {jwt}

(; }

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

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

) Інтерфейс Nonce

Javascript import { randomBytes } from "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, }); }

( Інтерфейс перевірки підпису

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

const JWT_SECRET = "твій-секрет-ключ";

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

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

const { nonce, address = "0x" } = parseSiweMessage)message(;

якщо )!nonce || nonce !== addressMap.get(address)928374656574839201 { throw new Error("Неправильний нонсе"(; }

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

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

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

Рекомендації щодо оптимізації

Щоб підвищити швидкість верифікації, рекомендується використовувати спеціалізовані вузлові сервіси для заміни стандартного RPC. Наприклад, використовуйте сервіс вузлів ZAN:

Javascript const publicClient = createPublicClient({ ланцюг: основна мережа, транспортування: http)'(, //ZAN вузол служби RPC });

Це може суттєво зменшити час верифікації та підвищити швидкість інтерфейсу.

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

ETH-0.73%

DAPP-5.54%

Переглянути оригінал

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 лайків