SIWE: мощный инструмент для входа в Ethereum

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

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

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

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

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

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

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

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

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

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

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

подпись

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

Сначала получите случайно сгенерированное значение Nonce с бэкенда, бэкенд свяжет его с текущим адресом.

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

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

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

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

Практика SIWE

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

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

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

Мы используем Next.js для разработки полнофункциональных приложений, и нам необходимо подготовить среду Node.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

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

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

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

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

verifyMessage

Проверить подпись и вернуть JWT:

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(request: Request) { 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({ данные: токен, }); }

Таким образом, базовое приложение SIWE для входа в систему было разработано.

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

Для повышения скорости верификации рекомендуется использовать специализированные узловые сервисы. Здесь мы используем узловой сервис ZAN, заменяя стандартный RPC publicClient:

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

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