SIWE: Потужний інструмент для входу в Ethereum

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

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

Коли потрібно SIWE?

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

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

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

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

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

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

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

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

підпис

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

Спочатку отримайте випадково згенероване значення Nonce з бекенду, бекенд зв'яже його з поточною адресою.

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

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

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

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

Практика SIWE

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

Увага: цей Demo призначений лише для демонстрації основного процесу, використання в продуктивному середовищі може нести ризики безпеки.

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

Ми використовуємо Next.js для розробки повноцінних додатків, потрібно підготувати середовище 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

У файлі layout.tsx імплементувати 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 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} > {дiти} ); };

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

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

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-18a98c883797c414a689c54ae0d65302.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, }); }

(# verifyMessage

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

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)запит: Запит) { const { підпис, повідомлення } = await request.json019283746574839201(;

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

якщо )!nonce || nonce !== addressMap.get(address)928374656574839201 { викинути новий Error("Невірний нонце"(; }

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

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

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

Отже, базовий Dapp для входу SIWE вже розроблений.

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

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

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

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

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