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. При подальших запитах з фронтенду потрібно додавати відповідну адресу та ідентифікатор, щоб підтвердити право власності на гаманець.

Практика

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

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

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

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

По-перше, встановіть Next.js, виконавши в каталозі проекту:

npx create-next-app@14

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

npm run dev

Відповідно до підказки терміналу, ви можете перейти за адресою localhost:3000, щоб побачити базовий проект Next.js.

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

SIWE потрібно увійти в систему, тому потрібно підключити гаманець. Тут ми використовуємо Ant Design Web3, тому що:

1. Повністю безкоштовно та активно підтримується
2. Як компонентна бібліотека Web3, досвід використання схожий на звичайну компонентну бібліотеку, без додаткового розумового навантаження.
3. Підтримка SIWE

Виконати в терміналі:

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

впровадження Wagmi

SIWE в Ant Design Web3 залежить від бібліотеки Wagmi. Нам потрібно імплементувати відповідний Provider у layout.tsx, щоб весь проект міг використовувати Hooks, які надає Wagmi.

По-перше, визначте конфігурацію 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"; імпортувати { 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 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){ група: "Популярні", }(, OkxWallet)(, ]} queryClient={queryClient} > {діти} ); };

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

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

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

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

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

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

SIWE потребує деякі інтерфейси для допомоги бекенду в перевірці особистості користувача. Зараз ми простенько реалізуємо це.

Нонс

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

Nonce реалізація дуже проста, спочатку генеруємо випадковий рядок ###, що складається з літер і цифр (, а потім встановлюємо зв'язок між nonce та address:

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

(# signMessage

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

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

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

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

Javascript імпортувати { створитиПублічнийКлієнт, http } з "viem"; імпортувати { 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(; console.log)"nonce", nonce, address, addressMap(;

// Перевірте, чи збігається значення nonce якщо )!nonce || nonce !== addressMap.get(address)928374656574839201 { throw new Error("Неправильний nonce"(; }

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

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

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

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

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

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

Отримавши HTTPS RPC підключення до основної мережі Ethereum, замініть за замовчуванням RPC publicClient у коді:

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

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

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

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