SIWE: Использование Эфирных подписей для более надежной идентификации Dapp

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

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

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

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

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

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

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

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

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

Подключите кошелек пользователя к Dapp через плагин кошелька.

Подпись

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

1. Получите значение Nonce: вызовите интерфейс backend для получения случайно сгенерированного значения Nonce.
2. Построение содержимого подписи: включает значения Nonce, домен, идентификатор цепочки и другую информацию
3. Используйте кошелек для подписи
4. Отправьте подпись на проверку на сервер

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

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

! [Руководство SIWE: Как сделать ваше децентрализованное приложение более мощным?] ](https://img-cdn.gateio.im/webp-social/moments-138fc08a9148099755d1fe162292922f.webp)

Практика SIWE

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

Подготовка

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

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

Сначала установите Next.js:

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

Перейдите в каталог проекта и выполните:

npm run dev

Для доступа к базовому проекту Next.js перейдите по адресу localhost:3000.

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

Использование Ant Design Web3 для подключения кошелька:

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

Введение Wagmi

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

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"; импорт { http } из "wagmi";

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 "использовать клиент"; импортировать тип { Account } из "@ant-design/web3"; import { ConnectButton, Connector } из "@ant-design/web3"; import { Flex, Space } из "antd"; импортировать React из "react";

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

const renderSignBtnText = ( defaultDom: React.ReactNode, аккаунт?: Аккаунт ) => { const { адрес } = аккаунт ?? {}; const ellipsisAddress = адрес ? ${address.slice(0, 6)}...${address.slice(-6)} : ""; вернуться Войти как ${ellipsisAddress}; };

вернуть ( <>

Реализация интерфейса

Интерфейс Nonce

JavaScript 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); вернуть Response.json({ данные: nonce, }); }

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

JavaScript 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 { подпись, сообщение } = await request.json();

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

если (!nonce || nonce !== addressMap.get(адрес)) { выкинуть новый Error("Invalid nonce"); }

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

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

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

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

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

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

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