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

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

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

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

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

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

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

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

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

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

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

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

подпись

Шаги подписи SIWE включают:

1. Получить значение Nonce: вызвать интерфейс backend для получения случайного значения Nonce, связанного с адресом.

2. Создание содержимого подписи: включает значение Nonce, доменное имя, ID цепочки и другую информацию.

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

4. Отправка подписи: отправьте подпись на сервер для проверки.

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

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

Практика SIWE

Мы разработаем полнофункциональное приложение с поддержкой SIWE на Next.js.

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

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

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

JSX import { WagmiWeb3ConfigProvider } из "@ant-design/web3-wagmi";

const WagmiProvider = ({ дети }) => { вернуть ( <wagmiweb3configprovider config="{{" siwe:="" {="" getnonce:="" async="" (address)=""> (await getNonce(адрес)).data, createMessage: (props) => createSiweMessage({ ... props, утверждение: "Муравьиный дизайн Web3" }), verifyMessage: async (message, signature) => { const jwt = (await verifyMessage(message, подпись)).data; setJwt(jwt); вернуть !!jwt; }, }, цепи: [Mainnet], транспорт: { [Mainnet.id]: http(), }, кошельки: [MetaMask(), WalletConnect(), TokenPocket(), OkxWallet()] ｝｝ > {дети} ); };

Добавить кнопку соединения

Создать кнопку для подключения кошелька и подписи:

JSX экспортировать по умолчанию функцию App() { const jwt = React.useContext(JwtProvider);

вернуть ( <connectbutton.connector> {({ аккаунт, подключить }) => ( <кнопка onclick="{connect}"> {account ? Connected: ${account.address.slice(0,6)}...${account.address.slice(-4)} : "Подключить кошелек"} )} </connectbutton.connector> ); }

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

Интерфейс Nonce

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

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

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

JavaScript экспортировать асинхронную функцию POST(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({ data: token }); }

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

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

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

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