SIWE: сделайте проверку вашей идентификации Dapp более безопасной и надежной

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

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

Когда нужно использовать SIWE?

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

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

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

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

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

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

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

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

подпись

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

Сначала нужно вызвать интерфейс backend для получения значения Nonce. Backend сгенерирует случайное значение Nonce и свяжет его с текущим адресом для подготовки к последующей подписи.

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

В конце концов, подпись отправляется на сервер для проверки.

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

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

Практика SIWE

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

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

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

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

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

NPX создать-следующий-app@14

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

npm run dev

Установка зависимостей, связанных с SIWE

Мы используем библиотеку компонентов Ant Design Web3 для реализации подключения кошелька и функции SIWE:

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

Ввод Wagmi

Ant Design Web3 использует библиотеку Wagmi для реализации SIWE. Мы импортируем соответствующий Provider в layout.tsx, чтобы весь проект мог использовать хуки, предоставляемые Wagmi.

Сначала определите конфигурацию 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 = новый QueryClient();

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

вернуть ( <wagmiweb3configprovider: siweconfig="{{" getnonce:="" async="" (address)=""> (await getNonce(адрес)).data, 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} > <jwtprovider.provider value="{jwt}">{children}</jwtprovider.provider> ); };

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

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

JSX "использовать клиента"; импортировать тип { Аккаунт } из "@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.

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

Нонсе

Nonce используется для генерации каждого раза различного содержания подписи, что повышает надежность подписи. Реализация кода следующая:

JavaScript import { randomBytes } из "crypto"; import { addressMap } from ".. /cache";

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

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

verifyMessage

Бэкэнд должен проверить содержимое подписи и вернуть JWT для последующей проверки прав доступа:

JavaScript import { createPublicClient, http } из "viem"; импортировать { mainnet } из "viem/chains"; импорт JWT из "jsonwebtoken"; import { parseSiweMessage } из "viem/siwe"; import { addressMap } from ".. /cache";

const JWT_SECRET = "your-secret-key"; // Пожалуйста, используйте более безопасный ключ и добавьте проверку на истечение срока действия и т.д.

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

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

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

если (!nonce || nonce !== addressMap.get(адрес)) { выкинуть новый Error("Invalid nonce"); }

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

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

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

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

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

JavaScript const publicClient = createPublicClient({ цепочка: мейннет, транспорт: http('), //ZAN узел служебный RPC });

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

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