SIWE: Позвольте вашему DApp использовать более мощный способ идентификации

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

Нужно ли проекту SIWE?

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

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

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

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

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

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

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

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

подпись

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

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

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

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

Практика SIWE

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

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

1. Установите Next.js:

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

2. Установите зависимости, связанные с SIWE:

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

Введение Wagmi

Импортируйте WagmiProvider в layout.tsx:

машинописный текст "использовать клиент"; 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"; import { JwtProvider } из "./JwtProvider";

const YOUR_WALLET_CONNECT_PROJECT_ID = "c07c0051c2055890eade3556618e38a6"; const queryClient = новый QueryClient();

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

вернуть ( <wagmiweb3configprovider siwe="{{" 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} > <jwtprovider.provider value="{jwt}">{children}</jwtprovider.provider> ); };

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

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

машинописный текст "использовать клиент"; импортировать тип { Счет } из "@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}; };

вернуть ( <>

реализовать интерфейс

Интерфейс Nonce

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

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

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

Интерфейс проверки сообщения

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

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

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

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

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

если (!nonce || nonce !== addressMap.get(адрес)) { throw new Error("Недопустимый nonce"); }

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

если (!valid) { throw new Error("Недопустимая подпись"); }

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

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

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

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

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