Ethereum ідентифікація: Посібник з реалізації SIWE

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

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

Сценарії використання SIWE

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

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

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

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

Принцип роботи SIWE

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

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

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

підпис

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

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

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

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

Приклад реалізації SIWE

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

Підготовка середовища

Цей приклад розроблений на основі Nextjs, потрібно підготувати середовище Node.js. Використання Nextjs дозволяє зручно розробляти повноцінні проекти, не розділяючи фронтенд та бекенд.

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

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

npx create-next-app@14

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

npm run dev

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

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

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

Встановлення відповідних залежностей:

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

налаштування Wagmi

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

Машинопис "Користуйтеся клієнтом"; import { getNonce, verifyMessage } з "@/app/api"; імпортувати { Головна мережа, 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 siweconfig="{{" getnonce:="" async="" (address(=""> )очікування getNonce(адреса().дані, 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} > {діти} ); };

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

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

) Реалізація кнопки «Підключити»

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

Машинопис "Користуйтеся клієнтом"; тип імпорту { 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(;

const renderBtnText = ) defaultDom: React.ReactNode, рахунок?: Рахунок ( => { const { address } = аккаунт ?? {}; const ellipsisAddress = адреса ? ${address.slice)0, 6(}...${address.slice)-6(} : ""; повернутись Увійти як ${ellipsisAddress}; };

повернути ) <> <connector.siwebutton renderbuttontext="{renderSignBtnText}"> </connector.siwebutton>

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

) реалізація бекенд-інтерфейсу

Інтерфейс Nonce

Генерація випадкового Nonce та його асоціація з адресою:

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

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

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

(# Інтерфейс перевірки повідомлень

Перевірка підпису та повернення JWT:

Машинопис 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({ дані: токен, }); }

Оптимізація продуктивності

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

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

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

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

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