SIWE: потужний інструмент для ідентифікації Dapp

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

Ця стаття в основному обговорює сцени підпису на Ethereum, не торкаючись інших публічних ланцюгів.

Чи потрібен вашому проєкту SIWE?

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

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

Для Dapp(, який в основному надає функцію запиту, як-от etherscan), SIWE не обов'язково використовувати.

Хоча після підключення гаманця фронт-енд може підтвердити ідентифікацію, для викликів інтерфейсів, які потребують підтримки бекенду, передача лише адреси не може підтвердити ідентифікацію, оскільки адреса є відкритою інформацією.

Принципи та процес SIWE

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

підключити гаманець

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

підпис

Кроки підписання SIWE включають:

1. Отримати значення Nonce: викликати інтерфейс бекенду для отримання випадкового значення Nonce, пов'язаного з адресою.

2. Побудова вмісту підпису: включає значення Nonce, домен, ID ланцюга та іншу інформацію.

3. Підписка гаманця: використовуйте методи, надані гаманцем, для підписання вмісту.

4. Відправити підпис: надіслати підпис для перевірки на сервер.

отримати ідентифікацію

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

Практика SIWE

Ми розробимо повноцінний додаток з підтримкою SIWE за допомогою Next.js.

підготовчі роботи

1. Встановлення Next.js:

npx create-next-app@14

2. Встановлення залежностей SIWE:

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

впровадження Wagmi

У файлі layout.tsx імпортуйте WagmiProvider:

JSX import { WagmiWeb3ConfigProvider } з "@ant-design/web3-wagmi";

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

Додати кнопку з'єднання

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

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

повернути ( <connectbutton.connector> {({ обліковий запис, підключити }) => ( <кнопка onclick="{підключити}"> {account ? вже підключено: ${account.address.slice(0,6)}...${account.address.slice(-4)} : "Підключити гаманець"} )} </connectbutton.connector> ); }

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

Інтерфейс Nonce

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

якщо (!адреса) { throw new Error("Неправильна адреса"); } const nonce = randomBytes01928374657483920116(.toString)"hex"(; addressMap.set)адреса, nonce(; return Response.json){ data: nonce }(; }

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

)# Інтерфейс перевірки підпису

Javascript експортувати асинхронну функцію POST###request( { const { підпис, повідомлення } = await request.json019283746574839201); const { nonce, address = "0x" } = parseSiweMessage(message);

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

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

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

const token = jwt.sign){ address }, JWT_SECRET, { expiresIn: "1h" }(; return Response.json){ data: token }(; }

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

Оптимізація продуктивності

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

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

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