Руководство по использованию SIWE: улучшите функциональность вашего Dapp

SIWE (Sign-In with Ethereum) — это способ проверки идентичности пользователя на Ethereum, похожий на инициирование транзакции, которая подтверждает контроль пользователя над кошельком. В настоящее время большинство кошельковых плагинов поддерживают этот простой метод аутентификации, который требует только подписи в плагине.

В данной статье в основном рассматриваются сценарии подписи на Ethereum, не затрагивая другие публичные цепочки, такие как Solana, SUI и т.д.

! [Руководство SIWE: Как сделать ваше децентрализованное приложение более мощным?] ](https://img-cdn.gateio.im/webp-social/moments-9e9c9e786391f84b004cd8450a29acce.webp)

Нужен ли вашему проекту SIWE?

Если ваше Dapp имеет следующие требования, вы можете рассмотреть возможность использования SIWE:

• Иметь свою собственную пользовательскую систему
• Необходимо запросить информацию, связанную с конфиденциальностью пользователей.

Но если ваш Dapp в основном предназначен для функции запроса, подобно etherscan, то вы можете не использовать SIWE.

Вы можете спросить, не означает ли подключение кошелька на Dapp, что он принадлежит вам? Это утверждение не совсем верно. Для фронтенда подключение кошелька действительно указывает на личность, но для вызовов интерфейса, которые требуют поддержки бэкенда, просто передача адреса недостаточна для подтверждения личности, потому что адрес является общедоступной информацией, и любой может его использовать.

! [Руководство SIWE: Как сделать ваше децентрализованное приложение более мощным?] ](https://img-cdn.gateio.im/webp-social/moments-138fc08a9148099755d1fe162292922f.webp)

Принципы и процесс SIWE

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

Подключить кошелек

Это распространенная операция Web3, подключение кошелька в Dapp через плагин кошелька.

Подпись

Шаги подписи SIWE включают получение значения Nonce, подпись кошелька и проверку подписи на стороне сервера.

Для получения значения Nonce необходимо вызвать интерфейс backend. Backend генерирует случайное значение Nonce и связывает его с текущим адресом, чтобы подготовиться к дальнейшей подписи.

После получения значения Nonce на фронтенде, необходимо построить содержание подписи, включая значение Nonce, доменное имя, идентификатор цепочки и содержание подписи и т. д., обычно для подписи используется метод, предоставленный кошельком.

После завершения создания подписи отправьте ее на сервер.

Получить идентификатор

После проверки подписи на серверной стороне возвращается идентификатор пользователя, например, JWT. При последующих запросах с фронтенда адрес и идентификатор пользователя должны быть переданы, чтобы подтвердить право собственности на кошелек.

Практическая работа

Мы будем использовать Next.js для разработки полнофункционального приложения, интегрирующего функцию SIWE. Обратите внимание, что этот демо-версия предназначена только для демонстрации основного процесса и не подходит для прямого использования в производственной среде.

Подготовительная работа

Убедитесь, что среда Node.js установлена.

Установка зависимостей

Сначала установите Next.js:

NPX создать-следующий-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

Импортировать соответствующий Provider в layout.tsx:

машинописный текст "использовать клиент"; импортировать { 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 = новый QueryClient();

const WagmiProvider: React.FC = ({ дети }) => { const [jwt, setJwt] = React.useState(null);

вернуть ( <wagmiweb3configprovider: siweconfig="{{" getnonce:="" async="" (address)=""> (ожидать getNonce(адрес)).данные, createMessage: (props) => { return createSiweMessage({ ... props, statement: "Ant Design Web3" }); }, verifyMessage: async (message, signature) => { const jwt = (await verifyMessage(message, подпись)).data; setJwt(jwt); возвращать!! JWT; }, ｝｝ цепочки={[Mainnet]} transports={{ [Mainnet.id]: http(), ｝｝ walletConnect={{ projectId: YOUR_WALLET_CONNECT_PROJECT_ID, ｝｝ кошельки={[} MetaMask(), WalletConnect(), TokenPocket({ группа: "Популярные", }), OkxWallet(), ]} queryClient={queryClient} > {дети} ); };

экспорт по умолчанию WagmiProvider;

Добавить кнопку подключения кошелька:

машинописный текст "использовать клиента"; импортировать тип { 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 renderSignBtnText = ( defaultDom: React.ReactNode, аккаунт?: Учетная запись ) => { const { адрес } = аккаунт ?? {}; const ellipsisAddress = адрес ? ${address.slice(0, 6)}...${address.slice(-6)} : ""; вернуться Войти как ${ellipsisAddress}; };

вернуть ( <>

! [Руководство SIWE: Как сделать ваше децентрализованное приложение более мощным?] ](https://img-cdn.gateio.im/webp-social/moments-18a98c883797c414a689c54ae0d65302.webp)

реализация интерфейса

Нонсе

Создание случайного Nonce и его связывание с адресом:

машинописный текст import { randomBytes } из "crypto"; import { addressMap } from ".. /cache";

экспортировать асинхронную функцию GET(request: Запрос) { const { searchParams } = новый URL(request.url); const address = searchParams.get("address");

если (!адрес) { throw new Error("Некорректный адрес"); } const nonce = randomBytes(16).toString("hex"); addressMap.set(адрес, nonce); вернуть Response.json({ данные: nonce, }); }

проверитьСообщение

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

машинописный текст импортировать { createPublicClient, http } из "viem"; импортировать { mainnet } из "viem/chains"; импорт JWT из "jsonwebtoken"; импортировать { parseSiweMessage } из "viem/siwe"; import { addressMap } from ".. /cache";

const JWT_SECRET = "ваш-секретный-ключ";

const publicClient = createPublicClient({ цепь: основная сеть, транспорт: http(), });

экспортировать асинхронную функцию POST(запрос: Request) { const { подпись, сообщение } = await request.json();

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

если (!nonce || nonce !== addressMap.get(адрес)) { throw new Error("Неверный нонc"); }

const valid = await publicClient.verifySiweMessage({ сообщение, адрес, подпись, });

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

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

! [Руководство SIWE: Как сделать ваше децентрализованное приложение более мощным?] ](https://img-cdn.gateio.im/webp-social/moments-9351d7f08e48962120d591c3a0c7d245.webp)

Рекомендации по оптимизации

Для повышения скорости верификации рекомендуется использовать специализированные узловые сервисы. Можно использовать узловой сервис ZAN, получив RPC-соединение, после чего заменить в коде стандартный RPC:

машинописный текст const publicClient = createPublicClient({ цепочка: основная сеть, транспорт: http('), //RPC-сервис узла ZAN });

Это значительно повысит скорость отклика интерфейса.

! [Руководство SIWE: Как сделать ваше децентрализованное приложение более мощным?] ](https://img-cdn.gateio.im/webp-social/moments-0ce46cff7473e96e768adfb5fc6dafb8.webp)