Посібник з використання SIWE: покращте функціональність вашого Dapp

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

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

Чи потрібен вашому проекту SIWE?

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

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

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

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

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

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

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

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

підпис

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

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

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

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

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

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

Практичні дії

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

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

Переконайтеся, що середовище Node.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

Імпорт відповідного Provider у layout.tsx:

Машинопис "Користуйтеся клієнтом"; import { getNonce, verifyMessage } з "@/app/api"; імпортувати { Головна мережа, MetaMask OkxWallet, Кишеня для токенів, WagmiWeb3ConfigProvider, WalletConnect, } з "@ant-design/web3-wagmi"; import { QueryClient } з "@tanstack/react-query"; імпортувати React з "реакція"; import { createSiweMessage } з "viem/siwe"; імпортувати { 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(; повернути !!jwt; }, ｝｝ ланцюжки={)} транспорти={{ [Mainnet.id]: http[Mainnet](, ｝｝ walletConnect={{ projectId: YOUR_WALLET_CONNECT_PROJECT_ID, ｝｝ гаманці={[ MetaMask)(, WalletConnect)(, TokenPocket){ group: "Популярні", }(, OkxWallet)(, ]} queryClient={queryClient} > {діти} ); };

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

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

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

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

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

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

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

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

Нонси

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

Машинопис імпортувати { randomBytes } з "crypto"; імпортувати { addressMap } з "../cache";

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

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

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

Перевірте підпис та поверніть JWT:

Машинопис імпортувати { створитиПублічнийКлієнт, http } з "viem"; імпортувати { mainnet } з "viem/chains"; імпортувати jwt з "jsonwebtoken"; import { parseSiweMessage } з "viem/siwe"; імпортувати { addressMap } з "../cache";

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("Неправильний nonce"(; }

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

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

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

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

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

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

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

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