Застосування та практика SIWE у Web3-додатках

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

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

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

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

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

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

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

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

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

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

підпис

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

1. Отримати значення Nonce: викликати бекенд-інтерфейс для отримання випадкового значення Nonce та зв'язати його з поточною адресою.

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

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

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

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

Практичний посібник

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

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

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

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

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

npx create-next-app@14

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

npm run dev

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

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

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

Представте WagmiProvider у layout.tsx:

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"; імпортувати { http } з "wagmi"; імпортувати { 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(=""> )очікувати 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){ група: "Популярні", }(, 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}; };

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

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

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

Інтерфейс Nonce

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

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

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

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)запит: Request) { 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" }); повернути Response.json({ дані: токен, }); }

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

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

Замініть стандартний RPC для publicClient:

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

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

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