SIWE: зробіть автентифікацію вашого Dapp більш безпечною та надійною

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

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

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

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

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

Щодо Dapp(, який має основну функцію запиту, як-от блокчейн-браузер ), то SIWE не обов'язково.

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

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

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

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

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

підпис

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

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

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

Нарешті підпись надсилається на сервер для перевірки.

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

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

практика SIWE

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

підготовка

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

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

Спочатку встановіть Next.js:

npx create-next-app@14

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

npm run dev

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

Ми використовуємо бібліотеку компонентів Ant Design Web3 для реалізації підключення гаманця та функції 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:

JSX "використовуйте клієнта"; 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(=""> )await getNonce(address().data, 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){ group: "Популярні", }(, OkxWallet)(, ]} queryClient={queryClient} > <jwtprovider.provider value="{jwt}">{діти}</jwtprovider.provider> ); };

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

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

Потім додайте кнопку підключення гаманця:

JSX "використовувати клієнт"; тип імпорту { 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}; };

повернути ) <>

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

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

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

Нонс

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

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

експортувати асинхронну функцію GET###запит: Запит( { 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, }); }

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

Серверна частина повинна перевірити вміст підпису та повернути JWT для подальшої перевірки прав:

Javascript імпортувати { створитиПублічнийКлієнт, http } з "viem"; import { mainnet } з "viem/chains"; імпортувати JWT з "JSONWEBTOKEN"; import { parseSiweMessage } з "viem/siwe"; import { addressMap } з ".. /кеш»;

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

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

Пропозиції щодо оптимізації

Для підвищення швидкості входу SIWE рекомендується використовувати спеціалізовані послуги вузлів для прискорення часу відповіді інтерфейсу. Можна використовувати такі послуги вузлів, як ZAN, отримавши відповідне RPC-з'єднання, а потім замінити за замовчуванням RPC у коді:

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

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

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

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