Как создать VK Mini App на dev.vk.com

Чтобы создать VK Mini App: (1) зарегистрируйтесь на dev.vk.com, (2) создайте новое приложение через "Создать приложение" → выберите "Mini App", (3) укажите домен и URL вашего веб-приложения с SSL, (4) интегрируйте VK Bridge SDK в фронтенд, (5) протестируйте локально и через VK Web/Mobile, (6) загрузите иконки/скриншоты/описание, (7) отправьте на модерацию — она занимает 1-7 рабочих дней, новые приложения публикуются по четвергам.

Что такое VK Mini App

VK Mini App — это веб-приложение которое запускается внутри ВКонтакте через iframe, имея доступ к API соцсети через VK Bridge SDK. Главные особенности:

• Без установки. Пользователь открывает приложение по ссылке, ничего не качает
• Кроссплатформенно. Один кодбаз работает в web, iOS, Android, Android Lite
• Аудитория 70+ млн активных пользователей ВКонтакте
• VK Bridge — API для нативных функций: авторизация, платежи, push, шаринг
• Бесплатная инфраструктура VK CDN для статики (опционально)

Шаг 1: Регистрация на dev.vk.com

1. Перейдите на dev.vk.com
2. Войдите с вашим VK-аккаунтом (или создайте новый)
3. Подтвердите номер телефона — без этого нельзя создавать приложения
4. Согласитесь с Правилами платформы VK Mini Apps

Шаг 2: Создание нового приложения

1. В кабинете разработчика нажмите «Создать приложение»
2. Выберите тип «Mini App» (есть ещё IFrame Game, Standalone-app — для нашего случая нужен Mini App)
3. Заполните Название — может быть изменено позже
4. Выберите Категорию:
   • Бизнес
   • Образование
   • Финансы (наш случай для TON Trust Check)
   • Игры
   • Развлечения
   • Сервисы
   • Социальные
   • Утилиты
5. Нажмите «Создать»

После создания приложение получает уникальный app_id — он нужен для VK Bridge.

Шаг 3: Базовые настройки и домен

В разделе «Настройки» приложения заполните:

3.1. Основные параметры

• Базовый URL — основной адрес где размещён ваш фронтенд. Например: https://toncoinshop.com/vk-app/trust-check/
• Доверенный URL для редиректа — если используете VK OAuth
• Доменное имя — без протокола, например toncoinshop.com

3.2. SSL обязательно

VK Mini Apps грузятся только по HTTPS. Если у вас нет SSL — получите бесплатный через Let's Encrypt или Cloudflare.

3.3. Разрешения (Scope)

Запрашивайте только те разрешения которые реально нужны:

• friends — список друзей пользователя
• photos — фотографии
• email — email пользователя
• phone — телефон
• и т.д. — полный список

Чем больше permissions — тем сложнее пройти модерацию. Запрашивайте минимум.

Шаг 4: Интеграция VK Bridge SDK

VK Bridge — главный SDK для общения вашего Mini App с ВКонтакте. Без него приложение не сможет авторизовать пользователя или шарить контент.

4.1. Подключение через CDN

<script src="https://unpkg.com/@vkontakte/vk-bridge/dist/browser.min.js"></script>
<script>
  // VK Bridge доступен как window.vkBridge
  vkBridge.send('VKWebAppInit');
</script>

4.2. Через npm для React/Vue

npm install @vkontakte/vk-bridge

// В коде:
import bridge from '@vkontakte/vk-bridge';

bridge.send('VKWebAppInit');

// Получить данные пользователя
const user = await bridge.send('VKWebAppGetUserInfo');

// Открыть payment dialog
await bridge.send('VKWebAppOpenPayForm', {
  app_id: YOUR_APP_ID,
  action: 'pay-to-service',
  params: {amount: 100, description: 'Test'}
});

4.3. Главные методы которые нужно знать

• VKWebAppInit — обязательный первый вызов
• VKWebAppGetUserInfo — данные текущего пользователя
• VKWebAppShare — поделиться ссылкой
• VKWebAppShowWallPostBox — публикация на стене
• VKWebAppGetLaunchParams — параметры запуска (откуда пришёл пользователь)
• VKWebAppStorageGet / VKWebAppStorageSet — VK-storage для персональных данных

Шаг 5: VKUI для дизайна (рекомендуется)

VKUI — официальная UI-библиотека VK с компонентами в стиле ВКонтакте. Сильно ускоряет разработку и автоматически даёт правильный look для desktop/mobile/iOS/Android.

Установка

npm install @vkontakte/vkui @vkontakte/icons

Документация компонентов: vkcom.github.io/VKUI/

Бойлерплейт VK Mini App

Самый быстрый старт — через официальный CLI:

npx @vkontakte/create-vk-mini-app
# Выберите имя проекта, шаблон (с TypeScript / без, с роутером / без)
cd your-app
npm install
npm start

Получите готовый проект с подключенным VK Bridge, VKUI, роутером и DevServer.

Шаг 6: Тестирование

6.1. Локально

Запустите ваш DevServer и в настройках Mini App укажите временный URL — например https://your-tunnel.ngrok-free.app/ (нужен HTTPS-туннель, потому что VK требует SSL):

# Установите ngrok
ngrok http 3000

# Скопируйте https URL и вставьте в "Базовый URL" в настройках Mini App

6.2. В ВКонтакте

В настройках приложения нажмите «Открыть в ВК» — приложение откроется в реальном окружении ВКонтакте на вашем аккаунте.

6.3. На мобильных

Откройте мобильное приложение ВКонтакте, перейдите по той же ссылке — приложение запустится в нативной обёртке. ОБЯЗАТЕЛЬНО протестируйте на iOS и Android — там VK Bridge может вести себя по-разному.

Шаг 7: Подготовка к публикации

7.1. Иконки и обложки

7.2. Описание

• Короткое описание — 1-2 предложения (до 150 символов)
• Полное описание — что делает приложение, ключевые функции (до 2000 символов)
• Что нового — changelog текущей версии

7.3. Правовая информация

• Пользовательское соглашение URL
• Политика конфиденциальности URL
• Если приложение для финансов / детей — могут запросить дополнительные документы

Шаг 8: Отправка на модерацию

1. В Панели управления приложением нажмите «Отправить на модерацию»
2. Приложение перейдёт в статус «На модерации»
3. Срок проверки: 1-7 рабочих дней (заявленный — до 7)
4. Модератор может задать вопросы через систему сообщений
5. Если приложение проходит модерацию — оно публикуется в каталоге
6. Релизы новых приложений происходят по четвергам
7. При отказе вы получите детальное объяснение причин и сможете внести правки

Шаг 9: Каталог и продвижение

После публикации:

• Приложение появится в каталоге по адресу vk.com/services в выбранной категории
• Будет доступно по прямой ссылке vk.com/app[ID]
• Получит свою статистику в кабинете разработчика (DAU, MAU, retention)
• Можно настроить виджеты сообществ которые открывают ваше Mini App
• Доступна реклама через VK Ads с прямой целью "Запуск Mini App"

Продвижение

• Виджеты в группах ВК — позволяют запускать ваше Mini App из сообществ
• VK Stories со ссылкой на Mini App
• Таргетированная реклама в VK Ads
• Бесплатная фичеринг — если приложение качественное и интересное, ВКонтакте может включить его в подборки на главной

❌ Частые причины отказа модерации

1. Технические ошибки. Приложение падает на загрузке или конкретных действиях. Решение: тщательно тестируйте на iOS, Android, desktop ВК.
2. Несоответствие описания фактическому функционалу. Решение: точное описание того что приложение делает.
3. Запрос лишних разрешений. Решение: только те, что реально используются.
4. Слабый функционал. Приложение делает то же что уже доступно в ВК. Решение: добавьте уникальную ценность.
5. Reference к сторонним соцсетям в качестве primary auth (Facebook/Twitter login без VK Login).
6. Прямой redirect на внешний сайт без полезной логики внутри VK Mini App.
7. Запрещённый контент. Азартные игры (без специальной лицензии), 18+, спам.
8. Несоблюдение SSL. Любые HTTP-запросы заблокируются браузером ВК.

✅ Чеклист перед модерацией

• ☐ Базовый URL приложения работает по HTTPS
• ☐ Вызов VKWebAppInit происходит при загрузке
• ☐ Все запрошенные scope действительно используются
• ☐ Тестирование на iOS, Android, desktop ВК прошло без падений
• ☐ Иконка 200×200 и 512×512 загружены
• ☐ Обложка 1120×630 загружена
• ☐ Минимум 3 скриншота добавлены
• ☐ Описание заполнено корректно и без trademark-нарушений
• ☐ Privacy Policy URL и Terms URL указаны
• ☐ Категория выбрана точно
• ☐ Адаптивная вёрстка для всех платформ
• ☐ Все ошибки в JS-консоли исправлены

📱 Наш VK Mini App

TON Trust Check — наше VK Mini App для проверки jetton-токенов прямо в ВКонтакте. Использует VK Bridge SDK, работает через публичный API TonCoinShop. Исходники: github.com/toncoinshop/vk-trust-check.