Руководство по реализации технологии SIWE: создание мощной системы аутентификации Dapp

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

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

Когда необходимо использовать SIWE

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

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

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

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

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

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

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

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

подпись

Включает три этапа: получение значения Nonce, подпись кошелька и проверка подписи на сервере:

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

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

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

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

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

Практическое руководство

В следующем будет представлено, как реализовать функцию SIWE в проекте Nextjs, возвращая JWT для идентификации.

Подготовка среды

1. Установите Nextjs:

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

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

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

Введение Wagmi

Импортируйте 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;

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

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

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

вернуть ( <>

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

Интерфейс 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, }); }

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

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: Запрос) { 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, после получения HTTPS RPC подключения к основной сети Ethereum, замените стандартный RPC для publicClient:

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

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