Ethereum идентификация: Руководство по реализации SIWE

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

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

Сценарии использования SIWE

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

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

Для приложений, ориентированных на запросы (, таких как блокчейн-эксплореры ), можно не использовать SIWE.

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

Принцип работы SIWE

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

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

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

подпись

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

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

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

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

Пример реализации SIWE

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

Подготовка окружения

Этот пример разработан на Nextjs и требует подготовки среды Node.js. Использование Nextjs позволяет удобно разрабатывать полнофункциональные проекты, не разделяя фронтенд и бэкенд.

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

Сначала установите Nextjs:

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

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

npm run dev

Перейдите по адресу localhost:3000, чтобы увидеть базовый проект Nextjs.

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

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

Установите соответствующие зависимости:

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

Настройка Wagmi

В файле layout.tsx импортируйте WagmiProvider:

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

вернуть ( <> <connector.siwebutton renderbuttontext="{renderSignBtnText}"> </connector.siweкнопка>

Реализация бэкенд-интерфейса

Интерфейс Nonce

Генерация случайного nonce и его ассоциация с адресом:

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

экспортировать асинхронную функцию GET(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, }); }

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

Проверка подписи и возврат JWT:

машинописный текст импортировать { 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 { подпись, сообщение } = await request.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({ данные: токен, }); }

Оптимизация производительности

Для повышения скорости верификации рекомендуется использовать специализированные узловые сервисы. В качестве примера узлового сервиса ZAN, после получения HTTPS RPC соединения с основной сетью Ethereum, замените значение по умолчанию для publicClient.

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

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