SIWE: Додати можливості ідентифікації до Dapp

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

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

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

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

Для додатків, які в основному базуються на запитах, таких як etherscan, SIWE можна не використовувати.

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

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

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

1. Підключення гаманця: підключіть гаманець у Dapp за допомогою плагіна гаманця.

2. Підпис:

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

3. Отримати ідентифікацію:

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

Практика SIWE

Ми розробимо Dapp, що підтримує SIWE, використовуючи Next.js, мета якого полягає в поверненні JWT для перевірки ідентифікації користувача.

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

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

npx create-next-app@14

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

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

реалізація SIWE

1. Представте 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"; 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){ група: "Популярні", }(, OkxWallet)(, ]} queryClient={queryClient} > {діти} ); };

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

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

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

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

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

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

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

1. Інтерфейс Nonce:

Javascript import { randomBytes } from "crypto"; import { addressMap } з ".. /кеш»;

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

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

2. Інтерфейс перевірки повідомлень:

Javascript import { createPublicClient, http } з "viem"; імпортувати { 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("Неправильний нонс"(; }

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

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

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

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

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

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

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

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