Посібник з реалізації технології SIWE: створення потужної системи автентифікації Dapp

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

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

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

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

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

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

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

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

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

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

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

підпис

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

1. Отримати випадкове згенероване значення Nonce з бекенду, пов’язане з поточною адресою.

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

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

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

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

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

Далі буде представлено, як реалізувати функціонал SIWE в проекті Nextjs, повертаючи JWT для ідентифікації.

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

1. Встановлення Nextjs:

npx create-next-app@14

2. Встановіть залежності 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(=""> )очікувати getNonce(адреса().дані, 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){ group: "Популярні", }(, OkxWallet)(, ]} queryClient={queryClient} > {діти} ); };

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

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

) Додати кнопку підключення

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

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

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

![Посібник з використання 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); повернути Response.json({ дані: nonce, }); }

(# Інтерфейс перевірки підпису

Javascript import { createPublicClient, http } з "viem"; import { mainnet } з "viem/chains"; імпортувати JWT з "JSONWEBTOKEN"; import { parseSiweMessage } з "viem/siwe"; import { addressMap } з ".. /кеш»;

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({ дані: токен, }); }

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

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

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

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

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