SIWE简介:让你的Dapp ідентифікація更安全

SIWE(Увійти з Ethereum) є способом автентифікації користувачів на основі Ethereum. Подібно до ініціювання транзакції, користувачі підтверджують контроль над гаманцем шляхом підписання. Наразі більшість основних гаманців плагінів вже підтримують цей простий спосіб автентифікації.

Сценарії використання SIWE

Якщо ваш Dapp має такі вимоги, ви можете розглянути можливість використання SIWE:

• Мати незалежну систему ідентифікації користувачів
• Потрібно запитати інформацію, пов'язану з ідентифікацією користувача.

Для Dapp(, орієнтованих на запити, таких як блокчейн-браузери ), SIWE не обов'язково.

Варто зазначити, що лише з'єднання через гаманець не може повністю підтвердити ідентифікацію. Для викликів інтерфейсу, які потребують підтримки з боку сервера, все ще потрібна додаткова ідентифікація, інакше будь-хто може "позичити" публічну інформацію про адресу.

Принцип роботи SIWE

Основний процес SIWE включає три етапи: підключення гаманця, підписання, отримання ідентифікації.

1. Підключити гаманець: підключити гаманець користувача через плагін гаманця

2. Підпис:

   • Отримати значення Nonce: викликати інтерфейс бекенду для отримання випадкового значення Nonce
   • Побудова вмісту підпису: включає інформацію про Nonce, домен, ID ланцюга тощо
   • Використовуйте гаманець для підпису
   • Надішліть підпис для перевірки на сервер

3. Отримати ідентифікацію: Після успішної перевірки підпису на сервері, повертається ідентифікація користувача ( як JWT)

Практика SIWE

Нижче ми практикуємо процес SIWE через просту демонстрацію. Зверніть увагу, що ця демонстрація призначена тільки для показу основного процесу і не підходить для безпосереднього використання в виробничому середовищі.

підготовка середовища

Ми використовуємо Next.js для розробки повноцінних додатків, потрібно підготувати середовище Node.js.

Встановлення залежностей

По-перше, створіть проект Next.js:

npx create-next-app@14

Після входу в каталог проекту, встановіть залежності, пов'язані з SIWE:

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"; імпорт { Головна мережа, MetaMask OkxWallet, Кишеня для токенів, WagmiWeb3ConfigProvider, WalletConnect, } з "@ant-design/web3-wagmi"; import { QueryClient } з "@tanstack/react-query"; імпортувати React з "react"; import { createSiweMessage } з "viem/siwe"; import { http } з "wagmi";

const YOUR_WALLET_CONNECT_PROJECT_ID = "xxx"; const queryClient = new QueryClient();

const WagmiProvider = ({ children }) => { const [jwt, setJwt] = React.useState019283746574839201null(;

повернути ) <wagmiweb3configprovider siwe="{{" getnonce:="" async="" (address(=""> )await getNonce(address().data, createMessage: )props( => { return createSiweMessage) { ... реквізити, твердження: "Ant Design Web3" }(; }, verifyMessage: async )message, signature( => { const jwt = )await verifyMessage(message, signature().data; setJwt)jwt(; повернути !!jwt; }, ｝｝ ланцюжки={)} транспортує=｛｛ [Mainnet.id]: http[Mainnet](, ｝｝ walletConnect={{ projectId: YOUR_WALLET_CONNECT_PROJECT_ID, ｝｝ гаманці={[} MetaMask)(, WalletConnect)(, TokenPocket){ група: "Популярні", }(, OkxWallet)(, ]} queryClient={queryClient} > {діти} ); };

експорт за замовчуванням WagmiProvider;

![SIWE використання посібника: Як зробити ваш Dapp більш потужним?])https://img-cdn.gateio.im/webp-social/moments-53c03d1cb26f29a9d739e3d1aa0816df.webp(

) Додати кнопку підключення

Створити кнопку для підключення гаманця та підпису:

JSX "Користуйтеся клієнтом"; import { ConnectButton } з "@ant-design/web3"; імпортувати React з "react"; import { JwtProvider } з "./JwtProvider";

експорт за замовчуванням функція App###( { const jwt = React.useContext)JwtProvider(;

const renderBtnText = )defaultDom, account( => { const { address } = аккаунт ?? {}; const ellipsisAddress = адреса ? ${address.slice)0, 6(}...${address.slice)-6(} : ""; повернутися Увійти як ${ellipsisAddress}; };

повернути ) <> <connectbutton.signin label="{renderSignBtnText}" onsignmessagesuccess="{((" ==""> { console.log)"Успішно підписано повідомлення"(; ｝｝ />

![SIWE використання посібника: Як зробити ваш Dapp більш потужним?])https://img-cdn.gateio.im/webp-social/moments-18a98c883797c414a689c54ae0d65302.webp(

) реалізація бекенд інтерфейсу

Інтерфейс Nonce

Javascript import { randomBytes } from "crypto"; import { addressMap } з ".. /кеш»;

експортувати асинхронну функцію GET###request( { const { searchParams } = new URL)request.url(; const address = searchParams.get)"address"(;

якщо )!address( { throw new Error)"Недійсна адреса"(; } const nonce = randomBytes01928374657483920116).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 } з ".. /кеш»;

const JWT_SECRET = "твій-секрет-ключ";

const publicClient = createPublicClient){ ланцюг: основна мережа, транспорт: http###(, }(;

експортувати асинхронну функцію POST)request) { const { підпис, повідомлення } = await request.json();

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

якщо (!nonce || nonce !== addressMap.get)address(928374656574839201 { throw new Error("Невірний нонс"); }

const valid = await publicClient.verifySiweMessage){ повідомлення, адреса, підпис, }(;

якщо )!valid( { throw new Error)"Недійсний підпис"(; }

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

![Посібник з використання SIWE: як зробити ваш Dapp більш потужним?])https://img-cdn.gateio.im/webp-social/moments-9351d7f08e48962120d591c3a0c7d245.webp(

Пропозиції щодо оптимізації

Щоб підвищити швидкість перевірки, рекомендується використовувати спеціалізовані вузлові служби. Можна використовувати службу вузлів ZAN, замінивши стандартний RPC:

Javascript const publicClient = createPublicClient){ ланцюг: основна мережа, транспортування: http('), }(;

Це може значно зменшити час перевірки та підвищити швидкість відповіді інтерфейсу.

! [Посібник SIWE: Як зробити ваш децентралізований додаток потужнішим?] ](https://img-cdn.gateio.im/webp-social/moments-0ce46cff7473e96e768adfb5fc6dafb8.webp)</connectbutton.signin>