SIWE: мощный инструмент для усиленной идентификации Dapp

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

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

Когда необходимо использовать SIWE?

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

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

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

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

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

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

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

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

подпись

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

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

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

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

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

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

Практика SIWE

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

Подготовка

Нам нужно подготовить среду Node.js и использовать Next.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

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

JavaScript "использовать клиент"; import { getNonce, verifyMessage } из "@/app/api"; import { Основная сеть, 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 siwe="{{" 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} > {дети} ); };

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

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

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 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) { throw new Error("Неверный адрес"); } const nonce = randomBytes(16).toString("hex"); addressMap.set(адрес, nonce); вернуть Response.json({ данные: nonce, }); }

signMessage

signMessage обычно выполняется плагином кошелька, мы используем метод подписи Wagmi.

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

Бэкэнд должен проверить содержание подписи и провести проверку безопасности:

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

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

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

экспортировать асинхронную функцию POST(запрос: Запрос) { 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" }); return Response.json({ данные: токен, }); }

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

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

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

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