SIWE: Зробіть вашу DApp більш потужним способом ідентифікації
SIWE(Увійти за допомогою Ethereum) є методом перевірки ідентифікації користувача на Ethereum, подібно до ініціювання транзакції, що підтверджує управління гаманцем користувача. Наразі більшість плагінів гаманців підтримують цей простий спосіб ідентифікації, достатньо просто підписати інформацію в плагіні. У цій статті в основному обговорюються сценарії підпису на Ethereum, без залучення інших публічних блокчейнів.
Чи потрібен SIWE проекту?
Якщо ваш DApp має такі вимоги, ви можете розглянути можливість використання SIWE:
Мати власну систему ідентифікації користувачів
Потрібно перевірити інформацію, пов'язану з ідентифікацією користувачів
Але якщо ваш DApp в основному має функцію запиту, таку як застосунки типу etherscan, то SIWE не обов'язково.
Хоча підключення гаманця на DApp означає право власності на гаманець, це стосується лише фронтенду. Для викликів інтерфейсу, які потребують підтримки бекенду, передача лише адреси не може підтвердити ідентифікацію, оскільки адреса є відкритою інформацією.
Принципи та процес SIWE
Процес SIWE можна узагальнити в три етапи: підключення гаманця - підпис - отримання ідентифікації.
підключити гаманець
Це поширена операція Web3, яка підключає гаманець у DApp через плагін гаманця.
підпис
Кроки підпису включають отримання значення Nonce, підписування гаманцем та перевірку підпису на сервері.
По-перше, викликайте API на стороні сервера для отримання значення Nonce, сервер згенерує випадковий Nonce та зв'яже його з адресою. Після отримання Nonce на стороні клієнта, сформуйте вміст підпису, який включає Nonce, домен, ID ланцюга тощо, використовуючи методи, надані гаманцем, для підписання, а потім надішліть підпис на сервер.
отримати ідентифікацію
Після того, як перевірка підпису на бекенді буде успішною, буде повернено ідентифікатор користувача, наприклад, JWT. При наступних запитах з боку фронтенду потрібно вказати адресу та ідентифікацію, щоб підтвердити право власності на гаманець.
Практика SIWE
Ми розробимо DApp, що підтримує SIWE, на Next.js, метою є повернення JWT для ідентифікації.
![SIWE використання посібника: як зробити ваш DApp ще більш потужним?])https://img-cdn.gateio.im/webp-social/moments-53c03d1cb26f29a9d739e3d1aa0816df.webp(
) Додати кнопку з'єднання
Машинопис
"Користуйтеся клієнтом";
тип імпорту { 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(;
![SIWE використання посібника: як зробити ваш DApp більш потужним?])https://img-cdn.gateio.im/webp-social/moments-18a98c883797c414a689c54ae0d65302.webp(
) реалізація інтерфейсу
Інтерфейс Nonce
Машинопис
import { randomBytes } from "crypto";
import { addressMap } з ".. /кеш»;
Функція експорту асинхронної функції GET###request: 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,
});
}
(# Інтерфейс підтвердження повідомлень
Машинопис
import { createPublicClient, http } з "viem";
import { mainnet } з "viem/chains";
імпортувати JWT з "JSONWEBTOKEN";
import { parseSiweMessage } з "viem/siwe";
import { addressMap } з ".. /кеш»;
const JWT_SECRET = "твій-секрет-ключ";
const publicClient = createPublicClient){
ланцюг: основна мережа,
транспорт: http###(,
}(;
експортувати асинхронну функцію POST)запит: Запит) {
const { підпис, повідомлення } = await request.json019283746574839201(;
Щоб підвищити швидкість відповіді на вхід через SIWE, рекомендується використовувати спеціалізовані вузлові служби замість стандартного RPC-вузла. Наприклад, після отримання HTTPS RPC з'єднання з основною мережею Ethereum за допомогою служби вузлів ZAN, замініть стандартний RPC для publicClient:
Це може значно зменшити час перевірки та підвищити швидкість інтерфейсу.
 і не повинен розглядатися як схвалення його поглядів компанією Gate, а також як фінансова або професійна консультація. Див. Застереження для отримання детальної інформації.
10 лайків
Нагородити
10
7
Поділіться
Прокоментувати
0/400
FrogInTheWell
· 07-22 16:13
Здійснення важливої ідентифікації прав є очевидно необхідним.
Переглянути оригіналвідповісти на0
LiquidationWatcher
· 07-22 16:11
раніше вже постраждали від експлойтів гаманців... сподіваємось, що siwe цього разу нас не підведе
Переглянути оригіналвідповісти на0
LayerZeroHero
· 07-22 16:11
Знову приходить змішане рішення для верифікації
Переглянути оригіналвідповісти на0
ser_we_are_early
· 07-22 16:03
Дуже добре, використовувати це набагато надійніше, ніж підписувати вручну.
SIWE допомагає в ідентифікації DApp, створюючи безпечну та надійну систему користувачів.
SIWE: Зробіть вашу DApp більш потужним способом ідентифікації
SIWE(Увійти за допомогою Ethereum) є методом перевірки ідентифікації користувача на Ethereum, подібно до ініціювання транзакції, що підтверджує управління гаманцем користувача. Наразі більшість плагінів гаманців підтримують цей простий спосіб ідентифікації, достатньо просто підписати інформацію в плагіні. У цій статті в основному обговорюються сценарії підпису на Ethereum, без залучення інших публічних блокчейнів.
Чи потрібен SIWE проекту?
Якщо ваш DApp має такі вимоги, ви можете розглянути можливість використання SIWE:
Але якщо ваш DApp в основному має функцію запиту, таку як застосунки типу etherscan, то SIWE не обов'язково.
Хоча підключення гаманця на DApp означає право власності на гаманець, це стосується лише фронтенду. Для викликів інтерфейсу, які потребують підтримки бекенду, передача лише адреси не може підтвердити ідентифікацію, оскільки адреса є відкритою інформацією.
Принципи та процес SIWE
Процес SIWE можна узагальнити в три етапи: підключення гаманця - підпис - отримання ідентифікації.
підключити гаманець
Це поширена операція Web3, яка підключає гаманець у DApp через плагін гаманця.
підпис
Кроки підпису включають отримання значення Nonce, підписування гаманцем та перевірку підпису на сервері.
По-перше, викликайте API на стороні сервера для отримання значення Nonce, сервер згенерує випадковий Nonce та зв'яже його з адресою. Після отримання Nonce на стороні клієнта, сформуйте вміст підпису, який включає Nonce, домен, ID ланцюга тощо, використовуючи методи, надані гаманцем, для підписання, а потім надішліть підпис на сервер.
отримати ідентифікацію
Після того, як перевірка підпису на бекенді буде успішною, буде повернено ідентифікатор користувача, наприклад, JWT. При наступних запитах з боку фронтенду потрібно вказати адресу та ідентифікацію, щоб підтвердити право власності на гаманець.
Практика SIWE
Ми розробимо DApp, що підтримує SIWE, на Next.js, метою є повернення JWT для ідентифікації.
підготовчі роботи
npx create-next-app@14
npm install antd @ant-design/web3 @ant-design/web3-wagmi wagmi viem @tanstack/react-query --save
Введення Wagmi
Представте WagmiProvider у layout.tsx:
Машинопис "Користуйтеся клієнтом"; 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 = new QueryClient();
const WagmiProvider: React.FC = ({ children }) => { const [jwt, setJwt] = React.useState019283746574839201null(;
повернути ) <wagmiweb3configprovider siwe="{{" getnonce:="" async="" (address(=""> )очікувати getNonce(адреса().дані, 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){ group: "Популярні", }(, OkxWallet)(, ]} queryClient={queryClient} > <jwtprovider.provider value="{jwt}">{діти}</jwtprovider.provider> ); };
експорт за замовчуванням WagmiProvider;
![SIWE використання посібника: як зробити ваш DApp ще більш потужним?])https://img-cdn.gateio.im/webp-social/moments-53c03d1cb26f29a9d739e3d1aa0816df.webp(
) Додати кнопку з'єднання
Машинопис "Користуйтеся клієнтом"; тип імпорту { 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 renderBtnText = ) defaultDom: React.ReactNode, аккаунт?: Обліковий запис ( => { const { address } = аккаунт ?? {}; const ellipsisAddress = адреса ? ${address.slice)0, 6(}...${address.slice)-6(} : ""; повернути Увійти як ${ellipsisAddress}; };
повернути ) <>
![SIWE використання посібника: як зробити ваш DApp більш потужним?])https://img-cdn.gateio.im/webp-social/moments-18a98c883797c414a689c54ae0d65302.webp(
) реалізація інтерфейсу
Інтерфейс Nonce
Машинопис import { randomBytes } from "crypto"; import { addressMap } з ".. /кеш»;
Функція експорту асинхронної функції GET###request: 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, }); }
(# Інтерфейс підтвердження повідомлень
Машинопис import { createPublicClient, http } з "viem"; import { mainnet } з "viem/chains"; імпортувати JWT з "JSONWEBTOKEN"; import { parseSiweMessage } з "viem/siwe"; import { addressMap } з ".. /кеш»;
const JWT_SECRET = "твій-секрет-ключ";
const publicClient = createPublicClient){ ланцюг: основна мережа, транспорт: http###(, }(;
експортувати асинхронну функцію POST)запит: Запит) { const { підпис, повідомлення } = await request.json019283746574839201(;
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, рекомендується використовувати спеціалізовані вузлові служби замість стандартного RPC-вузла. Наприклад, після отримання HTTPS RPC з'єднання з основною мережею Ethereum за допомогою служби вузлів ZAN, замініть стандартний RPC для publicClient:
Машинопис const publicClient = createPublicClient({ ланцюг: основна мережа, транспорт: http)'(, //Служба RPC вузла ZAN });
Це може значно зменшити час перевірки та підвищити швидкість інтерфейсу.
![SIWE використання посібника: як зробити ваш DApp більш потужним?](https://img-cdn.gateio.im/webp-social/moments-0ce46cff7473e96e768adfb5fc6dafb8.webp(