Беспрепятственный онбординг с zkLogin
Как уменьшить трение при использовании кошелька, сохранить поток пользователей и спрогнозировать рост
Что, если бы ваше Web3-приложение имело такой же бесшовный процесс регистрации, как и современный Web2-сервис? Это основное обещание zkLogin на блокчейне Sui. Он функционирует как OAuth для Sui, позволяя пользователям входить в систему с помощью привычных аккаунтов Google, Apple, X и других. Затем доказательство с нулевым разглашением безопасно связывает эту Web2-идентичность с ончейн-адресом Sui — без всплывающих окон кошелька, без сид-фраз, без оттока пользователей.
Влияние реально и немедленно. С сотнями тысяч уже активных аккаунтов zkLogin, тематические исследования сообщают о значительном росте конверсии пользователей, подскочившей с удручающих 17% до здоровых 42% после устранения традиционных барьеров, связанных с кошельками. Давайте разберем, как это работает и что это мож ет дать вашему проекту.
Почему кошельки убивают конверсию при первом взаимодействии
Вы создали новаторское dApp, но ваша воронка привлечения пользователей протекает. Виновник почти всегда один и тот же: кнопка «Подключить кошелек». Стандартный Web3-онбординг — это лабиринт из установки расширений, предупреждений о сид-фразах и викторин по крипто-жаргону.
Это огромный барьер для новичков. UX-исследователи наблюдали ошеломляющий 87%-ный отток в тот момент, когда появлялся запрос кошелька. В показательном эксперименте простое перенаправление этого запроса на более поздний этап процесса оформления заказа увеличило коэффициент завершения до 94%. Даже для пользователей, интересующихся криптовалютой, основной страх заключается в следующем: «Я могу потерять свои средства, если нажму не ту кнопку». Устранение этого единственного, пугающего шага является ключом к разблокированию экспоненциального роста.
Как работает zkLogin (простым языком)
zkLogin элегантно обходит проблему кошельков, используя технологии, которым уже доверяет каждый интернет-пользователь. Магия происходит за кулисами в несколько быстрых шагов:
- Эфемерная пара ключей: Когда пользователь хочет войти в систему, временная, односессионная пара ключей генерируется локально в его браузере. Думайте об этом как о временном пропуске, действительном только для этой сессии.
- OAuth-танец: Пользователь входит в систему со своим аккаунтом Google, Apple или другим социальным аккаунтом. Ваше приложение умело встраивает уникальное значение (nonce) в этот запрос на вход.
- ZKP-сервис: После успешного входа в систему ZKP-сервис (Zero-Knowledge Proof) генерирует криптографическое доказательство. Это доказательство подтверждает: "Этот OAuth-токен авторизует владельца временного пропуска," не раскрывая при этом личную идентичность пользователя в блокчейне.
- Вывод адреса: JWT (JSON Web Token) пользователя от OAuth-провайдера объединяется с уникальным salt для детерминированного генерирования его постоянного адреса Sui. Salt хранится в секрете, либо на стороне клиента, либо в безопасном бэкенде.
- Отправка транзакции: Ваше приложение подписывает транзакции временным ключом и прикрепляет ZK-доказательство. Валидаторы Sui проверяют доказательство в блокчейне, подтверждая легитимность транзакции без необходимости использования пользователем традиционного кошелька.
Пошаговое руководство по интеграции
Готовы к реализации? Вот краткое руководство с использованием SDK на TypeScript. Принципы идентичны для Rust или Python.
1. Установите SDK
Пакет @mysten/sui
включает все необходимые вспомогательные функции zklogin
.
pnpm add @mysten/sui
2. Сгенерируйте ключи и Nonce
Сначала создайте эфемерную пару ключей и nonce, привязанный к текущей эпохе в сети Sui.
const keypair = new Ed25519Keypair();
const { epoch } = await suiClient.getLatestSuiSystemState();
const nonce = generateNonce(
keypair.getPublicKey(),
Number(epoch) + 2,
generateRandomness(),
);
3. Перенаправление на OAuth
Сформируйте соответствующий URL для входа через OAuth для используемого провайдера (например, Google, Facebook, Apple) и перенаправьте пользователя.
4. Декодируйте JWT и получите Salt пользователя
После того как пользователь войдет в систему и будет перенаправлен обратно, получите id_token
из URL. Используйте его для получения специфичного для пользователя salt из вашего бэкенда, затем выведите его адрес Sui.
const jwt = new URLSearchParams(window.location.search).get("id_token")!;
const salt = await fetch("/api/salt?jwt=" + jwt).then((r) => r.text());
const address = jwtToAddress(jwt, salt);