SIWE: Потужний інструмент для посилення ідентифікації Dapp

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

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

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

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

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

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

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

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

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

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

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

підпис

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

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

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

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

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

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

Практика SIWE

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

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

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

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

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

npx create-next-app@14

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

npm run dev

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

Встановлення залежностей 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:

Javascript "використовувати клієнт"; 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 siwe="{{" 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){ група: "Популярні", }(, OkxWallet)(, ]} queryClient={queryClient} > {діти} ); };

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

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

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

Javascript "використовувати клієнт"; імпортувати тип { Обліковий запис } з "@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}; };

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

На цьому етапі ми вже реалізували базову структуру входу SIWE.

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

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

Тепер давайте реалізуємо інтерфейс для перевірки ідентифікації користувача на серверній стороні.

Нонс

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

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

(# signMessage

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

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

Задній кінець повинен перевірити вміст підпису та провести перевірку безпеки:

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###(, }(;

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

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

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

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

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

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

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

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

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

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

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