SIWE: добавление возможностей идентификации для Dapp

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

Когда требуется SIWE

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

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

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

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

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

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

1. Подключение кошелька: Подключите кошелек в Dapp с помощью плагина кошелька.

2. Подпись:

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

3. Получение идентификации:

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

Практика SIWE

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

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

1. Установка Next.js:

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

2. Установите зависимости SIWE:

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

реализовать SIWE

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

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"; 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;

2. Добавить кнопку подключения:

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}; };

вернуть ( <> {jwt} ); }

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

1. Интерфейс 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); return Response.json({ данные: nonce, }); }

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

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(адрес)) { throw new Error("Неверный нонc"); }

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

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

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

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

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

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

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