что такое mini apps vk
Что такое mini apps vk
VK Mini Apps — это платформа встраиваемых кроссплатформенных приложений ВКонтакте. Они создаются на базе стандартных веб-технологий: HTML, JavaScript, CSS.
В этом разделе вы найдёте инструкции для разработчиков мини-приложений.
Как создать мини-приложение на платформе VK Mini Apps, в двух видеоуроках.
Важно! Библиотеку VK Bridge необходимо использовать при разработке любого приложения. Остальные библиотеки — не обязательно.
Создайте приложение на этой странице: https://vk.com/apps?act=manage.
Выберите «Встраиваемое приложение», тип: «VK Mini App», укажите название и подтвердите действие. Вы попадёте в интерфейс администрирования Вашего приложения.
Перейдите на вкладку «Настройки» и заполните поля «Мобильная версия»/«Полная версия», указав ссылку на адрес приложения — URL страницы на вашем сайте, которая будет отображаться в браузере в официальных мобильных клиентах и внутри фрейма в веб-версии ВКонтакте.
В конце URL укажите слэш, если ссылаетесь на папку, иначе мини-приложение может открыться в браузере вместо мобильного приложения.
Если какую-то из версий, полную или мобильную, вы не планируете реализовывать — оставьте соответствующее поле пустым.
Чтобы создать шаблон приложения, выполните команду:
С помощью VKUI вы можете создать привлекательный интерфейс мини-приложения для мобильных устройств.
Для использования в полной версии элементы пока не адаптированы.
Если вы используете библиотеку для создания шаблона, отдельно подключать VKUI не нужно.
npm install @vkontakte/vkui || yarn add @vkontakte/vkui
На устройствах с Android нажатие кнопки «Назад» вызывает в вебвью событие history.back (см. документацию). По нажатию этой кнопки официальное приложение сделает возврат на предыдущую страницу вашего приложения или закроет его, если вернуться невозможно. Поэтому для корректной навигации необходимо обрабатывать нажатие аппаратной клавиши в мини-приложении и реализовывать роутинг, например, при помощи библиотеки react-router.
Чтобы мини-приложение могло использовать API ВКонтакте и API устройства пользователя, необходимо подключить библиотеку VK Bridge, которая служит для отправки и получения событий.
В справочнике VK Bridge есть список всех событий, которые можно использовать. Обратите внимание на то, что в коде приложения обязательно нужно вызывать событие инициализации VKWebAppInit, иначе приложение не запустится.
Если ранее вы не работали с API ВКонтакте, рекомендуем прочитать это руководство.
Если ранее вы не работали с React, рекомендуем прочитать это руководство.
vk-bridge — это NPM-пакет для отправки и получения событий в вашем
приложении.
Если вы используете библиотеку для создания шаблона, отдельно подключать VK Bridge не нужно.
npm install @vkontakte/vk-bridge || yarn add @vkontakte/vk-bridge
Как создать мини-приложение: база знаний VK Mini Apps
Полезные материалы на каждый этап жизненного цикла
Мы много рассказываем о том, как создавать мини-приложения и запускать их на платформе VK Mini Apps. И видим, сколько классных идей у разработчиков — и опытных, и начинающих. Хочется, чтобы каждый мог воплотить свою задумку в компактном сервисе, который легко войдёт в жизнь пользователя.
Так что в этой статье собираем все материалы, рекомендации и полезные ссылки. Сгруппируем их по этапам жизненного цикла мини-приложения: от идеи до релиза и монетизации.
Находим идею
Ищите идею удобного сервиса — в своём и чужом опыте, в проблемах людей, в любой сфере жизни. Устраивайте мозговые штурмы сами с собой, с родственниками или друзьями — и фиксируйте каждую мысль. Такие записи помогут спланировать разработку так, чтобы потом не пришлось откатываться к началу и добавлять упущенную функцию.
Проектируем и прототипируем
Когда идея полностью сформулирована, приступайте к проектированию. Здесь творчество сменяется рутинными, но очень важными процессами — именно они сберегут вам нервы и ресурсы на этапе реализации.
Наглядный пример стоимости ошибки на разных этапах разработки:
Убедитесь, что идея жизнеспособна. Если планируете зарабатывать на своём мини-приложении и нужен будет трафик — проведите исследование потенциального рынка. Соберите данные, пообщайтесь с целевой аудиторией, изучите её потребности и боли. Составьте две-три пользовательские истории. Займитесь техническим проектированием: составьте список фич, которые хотите видеть в MVP и в финальной версии.
После этого можно переходить к созданию прототипа вашего будущего приложения.
Кастомизируем UX/UI
На этом этапе предстоит балансировать между «Делаю, как мне нравится», «Делаю как умею» и «Делаю, как будет удобно пользователям».
Найти и сохранить такое равновесие сложно даже опытным дизайнерам и разработчикам. Так что этап кастомизации — поле бесконечных экспериментов, А/B-тестов и проверок гипотез. У тех, кто создаёт мини-приложения, есть мощное подспорье — VKUI. Это набор React-компонентов, с помощью которых можно создавать интерфейсы, внешне неотличимые от приложения VK.
Разрабатываем
Наконец можно приступить к реализации. Делимся всеми ссылками, которые вам помогут.
→ Must read перед разработкой:
Проходим модерацию и тестирование
Когда в прод уехало последнее обновление, вы более-менее уверены в качестве мини-приложения и готовы к тестированию — самое время отправить ваш проект на модерацию.
Модераторы проверят, соответствует ли он правилам размещения сервисов на платформе VK Mini Apps и учтены ли критерии размещения. Ещё они могут отметить, где стоит доработать UX и UI. Замечания модераторов помогут улучшить приложение, а на финальной проверке — ещё и устранить уязвимости, угрожающие данным пользователей.
Чтобы сервис попал к ним в ближайший четверг (актуально для каждой недели), нужно написать модератору, что вы готовы к тестированию, в понедельник до 18:00 по московскому времени.
В среднем бета-тестирование занимает около двух полных недель. Есть смысл постараться попасть в него как можно раньше — особенно если вы претендуете на грант от VK Fresh Code. Участники конкурса размещают готовое мини-приложение в каталоге до заявленной даты. Для нынешней, четвёртой волны программы — это 21 октября 2020 года.
Финальная модерация: выходим в каталог
Все репорты закрыты, и ваш мини-апп вышел из тестирования почти идеальным. Пора ещё раз напомнить о себе модератору — в том же тикете, где вы общались ранее.
Останется сделать приятные мелочи: загрузить иконки и обложки для отображения в каталоге и на сниппетах. После этого ваш проект опубликуется в официальном каталоге платформы VK Mini Apps.
После релиза: продвигаем и монетизируем
Активная аудитория растёт, количество показов рекламы увеличивается, система монетизации работает. Что дальше?
Главное — не останавливаться на достигнутом и продумать качественную рекламную кампанию для мини-приложения.
Сейчас ВКонтакте есть две модели монетизации мини-приложений: это покупки внутри приложений и реклама. Их можно использовать отдельно или вместе.
Мы будем дополнять эту статью материалами о новых методах и технологиях на платформе VK Mini Apps — так что возвращайтесь.
Разработка приложений в VK mini apps
Почему надо смотреть в сторону разработки приложений для работы в VK? У меня за спиной много лет фронтенд-разработки для массовых сервисов, и то, что сейчас предлагает разработчику социальная сеть «ВКонтакте» — быстрый и эффективный способ построить еще один канал коммуникации с действительно большой аудиторией. Ниже расскажу, в чем идея VK mini apps, какие технологии использовать при разработке приложения и на что стоит обратить внимание.
Платформа VK mini apps
«ВКонтакте» предоставляет сторонним разработчикам возможность писать веб-приложения и размещать их в каталоге приложений и/или продвигать внутри сети. Пользователям приложений не нужно скачивать отдельные нативные приложения из Google Play/App Store, функционал выбранного приложения доступен внутри пользовательской сессии основного приложения во «ВКонтакте» или через браузер, на сайте соцсети. В социальной сети есть подробная инструкция о том, как начать работу на платформе VK mini apps.
Инфраструктура приложения VK mini app
Приложение VK mini app представляет собой обычный веб-ресурс, располагаемый по определенному адресу. Его мы должны разместить в «Панели управления приложением» социальной сети.
«ВКонтакте» позволяет разместить три версии приложения:
Ваш веб-ресурс встраивается в приложение «ВКонтакте» через обычное WebView, при открытии с десктопа — через iFrame. Поэтому необходимо держать в уме, что часть функционала JavaScript может быть недоступна, необходимо тщательное тестирование.
После тестирования веб-приложения на разных устройствах его можно отправлять на модерацию, чтобы оно могло быть размещено в каталоге. Заявка на модерацию отправляется из «Панели управления приложением». Объявленный «ВКонтакте» срок модерации — 7 дней. Выкладки новых приложений (сервисов по терминологии «ВКонтакте») происходят раз в неделю по четвергам.
Есть подробная памятка о том, как создать правильное приложение. Рекомендую внимательно свериться с ней, прежде чем отдавать приложение на модерацию.
Разработка приложения VK mini app
Итак, приложение VK Mini Apps — это, по сути, обычное веб-приложение, которое встраивается в платформу посредством iFrame или WebView. Поэтому выбор технологий, на котором оно будет написано, за вами.
Однако для разработки фронтенда «ВКонтакте» рекомендует собственную библиотеку готовых компонентов VK UI, выполненную на React:
Это удобно — многие типовые компоненты уже готовы, осталось только встроить их в структуру вашей страницы или SPA.
Компоненты уже стилизованы согласно styleguide «ВКонтакте» — пользователю будет привычнее и удобнее работать с теми элементами управления и интерактивом, к которым он уже привык, находясь внутри социальной сети.
«ВКонтакте» не требует от разработчика следования какой бы то ни было жесткой архитектуре построения фронтенда — мы берем только то, что нужно, и модифицируем компоненты так, как нужно. Например, вы всегда сможете добавить глупому view-компоненту свой класс, свой обработчик событий, сделать вложенные компоненты любой глубины и так далее.
Существует достаточно подробная (правда, не совсем полная) документация по VKUI. Исходный код на GitHub: https://github.com/VKCOM/VKUI. Соответственно, максимально простая установка:
Обязательно нужно поставить следующий метатег в head верстки страницы вашего приложения, иначе на устройствах с iOS будет неправильно отображаться нативная навигация «ВКонтакте»:
Далее нам нужно просто встроить React-приложение на страницу.
Параметры открытия приложения
«ВКонтакте» сам добавляет параметры запуска к адресной строке, по которой открывается ваше приложение. Их список следующий: vk_user_id, vk_app_id, vk_are_notifications_enabled, vk_language, vk_ref, vk_access_token_settings, vk_group_id, vk_viewer_group_role, vk_platform, vk_is_favorite, sign. То есть фрейм с вашим приложением откроется примерно с похожим адресом: youvkapp.ru/?vk_access_token_settings=notify&vk_app_id=888888&vk_are_notifications_enabled=1&vk_is_app_user=1&vk_is_favorite=1&vk_language=ru&vk_platform=desktop_web&vk_ref=other&vk_user_id=111111&sign=fsdfsdgfgfiuoitu8345u34j
Это позволяет уже при старте приложения иметь достаточно полный набор данных, извлеченных из url, чтобы начать персональное взаимодействие с конкретным пользователем. Например, говорить с ним на одном языке — русском, английском или каком-то другом, либо попросить о включении своих уведомлений.
Дополнительные параметры в этот список «ВКонтакте» на ноябрь 2019 года включать не планирует. Однако в url можно передать произвольный хэш, например: youvkapp.ru#custom_param
Роутинг
Если в приложении больше одного экрана (я думаю, это как раз ваш случай), нужен переход между экранами. За показ того или иного экрана отвечает state нашего React-приложения. Что касается организации View, то «ВКонтакте» предлагает два способа: смена активного компонента VKUI View и VKUI Panel.
Каждый View отвечает за свой пользовательский сценарий: основной, дополнительный, вызов справочников, страницы поиска и другие. Внутри View содержится свой набор Panel — это конкретные шаги (экраны) в пользовательском сценарии. Абстрактно это выглядит так:
В state в activePanel мы прописываем id того элемента, который нужно показать.
Верстка и компоненты
Теперь можно посмотреть типичную страницу внутри Panel, созданную с помощью компонентов VK UI.
Библиотека VK UI предоставляет практически полный набор компонентов, необходимых для построения интерактивного приложения: всевозможные элементы форм, попапы, стилизованные алерты, галереи, панели навигации, спиннеры, аватары, футеры и так далее.
Как видно, появился ещё один пакет vkontakte:
Можно воспользоваться удобным менеджером по подбору нужной иконки.
Основное правило — правильно использовать компонент либо собственную верстку шапки. В правой части шапки нативное приложение «ВКонтакте» размещает кнопки управления.
Стоит обратить внимание: «ВКонтакте» заявляет, что компоненты могут отображаться на десктопах не совсем адекватно. Однако их можно стилизовать, добавляя свои css-правила. Например, так была стилизована анимация переходов между панелями в одном приложении:
Эти стили подключаются в общем потоке стилей, подключаемых к вашему приложению.
Библиотека VK Connect
Библиотека VK Connect предоставляет доступ к широким возможностям как самой сети «ВКонтакте», так и к возможностям устройства, если мы работаем из-под мобильного приложения. Для ее подключения нужно установить пакет vkontakte/vk-connect: npm i —save-dev vkontakte/vk-connect.
Среди многочисленных возможностей VK Connect — сканирование QR-кода, получение геопозиции, вызов карточки контактов. Также есть широкие возможности по использованию возможностей соцсети: включение-выключение уведомлений, публикация записей на стене, авторизация сообщества, подписка на сообщения. Их нужно использовать с умом: например, существует ограничение на количество уведомлений — не более одного в сутки. Есть отдельные рекомендации по уведомлениям. Полный список возможностей представлен в документации.
Чтобы наше приложение вообще начало работу, нужно сначала выполнить инициализацию:
Все дальнейшее взаимодействие с библиотекой происходит похожим образом. Методом connect.send вызываем нужное действие и слушаем ответы. Для этого мы должны подписаться на события:
В объекте detail возвращается type — название типа события, ответ на которое мы ждем, и data — набор данных. В примере выше мы слушаем ответ на запрос connect.send(«VKWebAppGetUserInfo», <>), который должен вернуть данные о пользователе приложения: имя, пол, дату рождения, место проживания, ссылку на картинку аватара в соцсети.
«ВКонтакте» не гарантирует поддержку всех событий на всех устройствах (iOS, Android, Web), поэтому лучше делать проверку такой поддержки перед исполнением кода:
VK Connect также обеспечивает поддержку запросов к API VK, если нужно что-то большее, чем может предоставить сама библиотека VK Connect:
VK Pay
VK Pay — это, по сути, удобный фронтенд для использования онлайн-сервиса оплаты с помощью Деньги Mail.Ru. Для вызова платежной формы достаточно открыть платежное окно с помощью вызова в библиотеке VK Connect:
Таким образом, можно продавать ваши услуги и товары, используя внутреннее платежное средство в сети «ВКонтакте». Подробнее в официальной документации.
VK Mini Apps: немного безопасности сервисов
Если вы не знаете, что такое VK Mini Apps, советуем ознакомиться с блогом ВКонтакте.
Сервисы легко писать, они хорошо интегрируются с инфраструктурой ВКонтакте, это все привлекает как разработчиков, так и пользователей с каждым днём всё больше. И это повод позаботиться о том, чтобы в сервисе соблюдались требования безопасности и прорабатывались самые частые кейсы, которые могут привести к утечкам или утере данных.
В этой статье мы отметим важные пункты, на которые стоит обратить внимание.
1. Проверка параметров запуска
Именно благодаря параметрам запуска сервис может проверить, что запрос делает сам пользователь, а не кто-то другой пытается подделать запрос. В документации можно найти много нужных и важных параметров, на которых может быть завязана информация в сервисе, стоит обратить внимание на самые главные: id пользователя, id сообщества, с которого запускался сервис, роль в сообществе. Все эти параметры передаются с приставкой vk_, это нужно, чтобы можно было проверить их подлинность. Вместе с этими параметрами ВКонтакте передает и SHA256 ключ в параметре sign, который и нужен для проверки подлинности этих параметров.
Уверенность в запросах от клиентского кода — это одна из главных вещей, о которой должен позаботиться разработчик.
Примеры проверки параметров на PHP, Java и Python: https://vk.com/dev/vk_apps_launch_params
2. Серверная сессия пользователя или CSRF
CSRF — подделка запроса из другого сервера.
Некоторые разработчики предпочитают держать пользователя на серверной сессии, что избавляет их от необходимости с каждым запросом передавать дополнительные данные, которые бы идентифицировали пользователя. Возможно, этот вариант привлекает более простым способом взаимодействия с данными пользователей, но, увы, самым лучшим он не является. Даже если вы проверили все параметры запуска пользователя, о которых мы говорили в первом пункте, сервис всё равно может быть подвержен CSRF-уязвимости. Данная уязвимость позволяет злоумышленнику подделать запрос из своего сайта, скинув пользователю ссылку. После перехода по ней выполнится запрос от его имени на серверный адрес сервиса, где уже будет поднята активная сессия.
Это очень актуальный кейс для продуктов, которые что-то создают по запросу пользователя. Стоит очень внимательно относиться к таким вещам и защищать такие запросы хешем, который злоумышленник не сможет обойти, так как получить его может только сам пользователь.
3. SQL инъекции
SQL инъекции — выполнение любого запроса в базу.
Формы ввода данных — частая штука в сервисах. У кого-то это полноценная форма с несколькими полями ввода, для кого-то это одна строка поиска. Так или иначе, все строки ввода могут быть подвержены SQL инъекции, если эти формы неправильно обрабатывать. В следствие чего, вы можете упустить доступ к вашей базе данных, что может привести либо к утечкам данных, либо какому-то иному вреду серверу. Стоит строго относиться ко всем данным, которые приходят на сервер. Если вы ожидаете числовое значение, то проверяйте, что пришло именно число. Если вы ожидаете строку — экранируйте всё, что может привести к вызову запроса, вместо поиска по строке.
4. Вывод данных или исполняем XSS
XSS — выполнение произвольного JS кода.
После правильной обработки данных на сервере — экранирования опасных символов, стоит также побеспокоиться и о выводе контента из базы на страницу пользователя. Если удалось миновать инъекцию на сервере — это не значит, что всё будет хорошо и на клиенте. Стоит внимательно следить за тем, чтобы никакой чужеродный JS код не мог там выполниться. Начиная от банальной проверки на тег alert, заканчивая атрибутами в других тегах (например, onerror в img). Любой XSS позволит выполнить код от имени ваших посетителей.
5. Флуд-контроль
Не стоит забывать о том, что любой запрос можно повторить. Один раз, два, а может, и сто раз за минуту. Стоит всегда контролировать количество запросов от пользователя, чтобы уберечь себя от ненужного спама.
Флуд.
Это могут быть:
Случайный запрос.
Возможно, пользователь 2 раза нажал на кнопку либо проблемы с запросом в местах с плохим покрытием сети. Такие запросы могут повториться, что приведет к дублированию информации, что необходимо учесть. Каждый запрос на создание информации можно проверять на время, либо передавать с ним уникальный хеш, который генерируется на старте создания информации и передается с клиента на сервер. Тогда по нему можно будет ориентироваться, был такой запрос или нет.
Особенно флуд-контроль актуален для кликеров, где не учитывают массовый повтор действий с целью накрутить монеты. Нужно понимать, что некоторые показатели человек физически не может делать со скоростью света на протяжении 24/7.
6. Рейтинговая таблица
Если в вашем сервисе используются таблицы с лучшими результатами, то стоит позаботиться о том, чтобы она генерировалась максимально честно.
Таблица результатов.
Тест, опрос, выполнение каких-то действий — все это может повышать очки и продвижение в таблице с другими пользователями. Зачастую данные действия выполняются со стороны клиента, а на сервер лишь передается, сколько баллов получил пользователь. Это неправильное поведение.
Правильнее будет вести весь подсчет на стороне сервера, проверять сделанные действия или же голоса в опросе. Контролировать повтор этих действий, особенно если его нельзя выполнить несколько раз.
Игровая таблица.
У игровой таблицы такие же проблемы, как и у обычной, но тут проблема ещё и в том, что контролировать игры, которые полностью завязаны на клиентском коде, достаточно сложно. Тем не менее, даже это можно защитить, усложнив процесс генерированием хешей для игры и предоставлением результатов уже на самом сервере. Можно завязывать очки на игровом времени, понимая, что человек за 2 секунды игры не может попасть в топ. Размышлять над ужесточением таблицы, тем самым пропуская туда лишь честных игроков.
7. Оплата
Некоторые сервисы принимают оплату через VK Pay, но не смотрят на корректность успешной оплаты, сколько денег вообще дошло до сервиса, просто ждут от метода успешного выполнения и с клиента информируют о завершении оплаты. Так делать категорически запрещено. Клиентский код не может проверить, действительно ли было что-то оплачено или нет.
Для проверки оплаты нужно использовать Callback API или Bots Long Poll API в случае оплаты на счет физического лица и серверный платежный коллбек при подключении юридического лица.
После подключения одного из типов чтения событий к сообществу и успешной оплаты в сообщество будет приходить событие vkpay_transaction, которое будет отправлено на ваш сервер со стороны сервера ВКонтакте, тем самым с клиента невозможно будет подделать данный запрос.
То же касается и платежей на счет юридических лиц.
8. Ключи доступа
Случается такое, что важные ключи утекают на сторону клиента. Стоит очень внимательно обращаться к важным ключам. Это может быть, как и сервисный ключ приложения, так и ещё более важные ключи.
Запросы сервисным токеном со стороны клиента
Есть ситуация, в которой, вместо запроса токена у самого пользователя, используют токен приложения. Это может показаться более эстетическим решением, так как пользователь не видит лишних запросов, но если сервисный токен уйдёт не в те руки, то он может быть использован не по назначению. Например, злоумышленник сможет отправлять уведомления пользователям, разрешившим пуш-уведомления от вашего сервиса.
Утечка сервисного токена с сервера
Даже если вы храните ключ на сервере, он всё равно может утечь на сторону клиента. Если в какой-то момент запрос с данным ключом не выполняется успешно — стоит показывать клиенту ошибку запроса. Стоит быть уверенным в том, что показывается пользователю, а также внимательно следить за тем, что никакие секретные ключи не утекают с сервера на клиент.
9. Обработка ошибок
Вслед за предыдущим пунктом мы отметим обработку ошибок. Многие привыкли писать методы в коде только на успешное выполнение, не предполагая, что кому-то в голову придёт подменять значения в запросе, подставляя туда что-то, что никогда не должно там быть. После таких подмен сервер может не выдержать, что-нибудь сломается или он просто упадет.
Логи
Каждая ошибка может записываться в лог, а специальный вызов ошибок может вообще привести к тому, что лог займет весь диск, а сервер не сможет нормально функционировать. Стоит защищать сервер от этого.
Вывод полной информации об ошибке (stack trace)
Так злоумышленник может узнать полные адреса до ваших файлов, вплоть до всех методов, которые где-то были вызваны. Данная информация может помочь узнать, где именно стоит искать слабые места. Вплоть до того, что он даже сможет узнать, на чём написан сервер.