Соціальна аутентифікація в dApp з Web3Auth: підвищення конверсії

Замість того щоб змушувати користувача зберігати seed phrase або завантажувати MetaMask, ви даєте йому вхід через Google, Apple або email. Це не просто зручність — це конверсія. Потенційна аудиторія вашого dApp у десять разів ширша, якщо прибрати бар'єр встановлення розширення. Ми використовуємо Web3Auth, щоб вирішити це завдання без компромісів у безпеці. За нашими оцінками, Web3Auth збільшує конверсію онбордингу в 3-5 разів порівняно з ручним введенням seed phrase.

Під капотом — порогова криптографія (MPC/TSS). При реєстрації генерується ключова пара, приватний ключ розділяється на три shares: один зберігається у нод Web3Auth (tKey), другий — локально в браузері (deviceShare), третій — опціональний backup (наприклад, пароль). Для підпису транзакції потрібні мінімум два shares з трьох. Web3Auth ніколи не має повного ключа. Навіть якщо атакуючий скомпрометує їхню інфраструктуру, він не отримає доступ до користувацьких коштів.

Як порогова криптографія захищає користувачів?

На відміну від seed phrase, який зберігається в одному місці та може бути вкрадений, MPC розподіляє довіру. Кожен share ізольований, а поріг (2 з 3) означає, що компрометація одного вузла не дає доступу до ключа. Це стандарт безпеки, який використовується в банківських системах. Як зазначено в документації Web3Auth, порогова криптографія виключає єдину точку відмови.

Як працює відновлення доступу?

Користувач втратив пристрій — не проблема. Він заходить через той самий OAuth-провайдер, і система відновлює backup share (якщо був налаштований) або генерує новий deviceShare при підтвердженні через другий фактор (пароль від backup). Це гібрид self-custody та managed wallet: ви зберігаєте контроль над ключами, але юзеру не потрібно нічого пам'ятати.

Чому варто обрати Web3Auth для dApp?

Web3Auth повертає стандартний EIP-1193 provider — це означає, що ваш існуючий код на ethers.js, viem або wagmi працює без змін. Ви просто підміняєте window.ethereum на provider від Web3Auth. Весь стек (signTypedData, відправка ETH, взаємодія з контрактами) залишається колишнім. Жодного vendor lock-in: у будь-який момент ви можете переключитися на іншу абстракцію ключів.

Порівняння Modal та NoModal SDK

Процес інтеграції

1. Аналіз — визначаємо цільову аудиторію, список OAuth-провайдерів, вимоги до white-label та кастомізації UI. Обираємо версію SDK: Modal (готовий UI) або NoModal (лише логіка).

2. Проектування — проектуємо потік аутентифікації: реєстрація, логін, відновлення, відкликання сесій. Визначаємо backup-механізми (пароль, соціальний backup). Інтегруємо з вашою бекенд-авторизацією (JWT-токени, сесії).

3. Реалізація — налаштовуємо Web3Auth Dashboard, отримуємо clientId. Підключаємо SDK, реалізуємо виклики login/logout. Приклад коду нижче — базова інтеграція з модалом:

import { Web3Auth } from '@web3auth/modal' import { CHAIN_NAMESPACES } from '@web3auth/base' const web3auth = new Web3Auth({ clientId: 'YOUR_CLIENT_ID', chainConfig: { chainNamespace: CHAIN_NAMESPACES.EIP155, chainId: '0x1', rpcTarget: 'https://rpc.ankr.com/eth' } }) await web3auth.initModal() // Вхід — модал з Google/Twitter/Email/Apple const provider = await web3auth.connect() // Далі використовуємо як звичайний EIP-1193 provider const ethersProvider = new ethers.BrowserProvider(provider) const signer = await ethersProvider.getSigner() 

4. White-label та кастомізація — для production зазвичай потрібен власний бренд. Використовуємо NoModal SDK:

import { Web3AuthNoModal } from '@web3auth/no-modal' import { OpenloginAdapter } from '@web3auth/openlogin-adapter' const web3auth = new Web3AuthNoModal({ clientId, chainConfig }) const openloginAdapter = new OpenloginAdapter({ adapterSettings: { uxMode: 'redirect', whiteLabel: { appName: 'My App', logoLight: 'https://example.com/logo.png', defaultLanguage: 'uk' } } }) web3auth.configureAdapter(openloginAdapter) await web3auth.init() // Виклик конкретного провайдера await web3auth.connectTo('openlogin', { loginProvider: 'google' }) 

5. Тестування — перевіряємо всі сценарії: перший вхід, повторний, втрата пристрою, відкликання доступу. Використовуємо testnet (Goerli, Sepolia). Перевіряємо latency підписання транзакцій — MPC додає ~100-300 мс, що непомітно для користувача.

6. Деплой на mainnet — змінюємо RPC, оновлюємо clientId для прода, вмикаємо backup-механізми. Налаштовуємо моніторинг через Tenderly.

Що входить у роботу

• Підбір конфігурації Web3Auth (кількість shares, поріг, backup)
• Налаштування OAuth-провайдерів (Google, Apple, Twitter, Discord, GitHub)
• Реалізація UI: готовий модал або повністю кастомний інтерфейс
• Інтеграція з існуючою системою авторизації (JWT, сесії)
• Код на TypeScript/React/Vue з підтримкою ethers.js, viem, wagmi
• Документація з адміністрування Web3Auth Dashboard
• Тестування безпечних сценаріїв (відновлення, відкликання ключів)
• Гарантія: підтримуємо код протягом 3 місяців після інтеграції

Строки та вартість

Вартість розраховується індивідуально — залежить від складності UI, кількості провайдерів та вимог до безпеки. Оцінку проекту робимо за 1 день: надсилайте опис dApp та цільову аудиторію. Отримайте консультацію інженера, який реалізував Web3Auth у 12+ dApp, включаючи DeFi-платформи та NFT-маркетплейси. Наш досвід — 5 років у Web3, 30+ успішних інтеграцій. Гарантуємо стабільну роботу на mainnet та підтримку нових стандартів (ERC-4337, EIP-3074).

Хочете прибрати бар'єр входу для користувачів? Зв'яжіться з нами — оцінимо проект та запропонуємо архітектуру під ключ.