Применение и практика SIWE в Web3 приложениях

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

Сценарии применения SIWE

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

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

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

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

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

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

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

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

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

Подпись

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

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

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

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

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

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

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

Руководство по практике

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

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

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

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

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

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

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

npm run dev

Установите зависимости, связанные с 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"; импорт { Основная сеть, MetaMask OkxWallet, ТокенКарман, WagmiWeb3ConfigProvider, WalletConnect, } из "@ant-design/web3-wagmi"; import { QueryClient } из "@tanstack/react-query"; импортировать React из "react"; import { createSiweMessage } из "viem/siwe"; импорт { 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;

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

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

JavaScript "использовать клиент"; импортировать тип { 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}; };

вернуть ( <>

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

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

Интерфейс Nonce

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

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

JavaScript импортировать { 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: Запрос) { 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" }); вернуть Response.json({ данные: токен, }); }

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

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

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

Заменить стандартный RPC publicClient:

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

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

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