Вход через VK.com во Flutter приложении

В этой статье я попытаюсь дать подробные инструкции по подключению авторизации через ВКонтакте в ваше Flutter приложение.

Вход осуществляется с помощью VK SDK. Для добавления SDK в приложение будем использовать плагин flutter_login_vk с pub.dev. Плагин поддерживает iOS и Android.

Итак, начнем. Установите последнюю версию плагина для логина через VK, как указано на вкладке «Installing». Теперь можно двигаться дальше, для начала нам нужно создать приложение на VK.com.

Шаг 1 из 5. Создание приложения на VK.com

Создайте приложение на ВКонтакте https://vk.com/editapp?act=create.

  1. Введите «Название».
  2. Выберите «Standalone-приложение» в качестве платформы.
  3. Нажмите «Подключить приложение».

Приложение будет создано. Теперь откройте вкладку «Настройки» и скопируйте ID приложения (далее в статье мы будем называть его [APP_ID] ).

Дальше следует настроить приложение для нужных платформ в секции «Настройки SDK». Если вам не нужна какая-то из платформ, можете просто пропустить соответствующий ей подраздел.

Настройка приложения для Android

  1. Укажите в поле «Название пакета для Android» package name вашего Android приложения. Его можно найти в атрибуте  package тега корневого тега   ApplicationManifest.xml  ( /android/app/src/main/AndroidManifest.xml).
  2. Укажите в поле «Main activity для Android» класс основной activity вашего преложения (вместе с пакетом). По умолчанию это будет   com.yourcompany.yourapp.MainActivity (на забудьте заменить com.yourcompany.yourapp на свои значения).
  3. Чтобы заполнить поле «Отпечаток сертификата для Android» вам нужно создать SHA1 отпечаток как описано в документации (нужно брать значение без префикса   SHA1: ). Добавьте отпечатки для debug и релизного сертификатов. Примечание: если ваше приложение использует функцию подписания Google Play App Signing (а скорее всего да), то вам нужно взять SHA-1 отпечаток сертификата из Google Play Console (раздел Управление релизом — Подписи приложений).⚠️ Важно! Нужно добавлять отпечатки для всех вариантов сборок. Т.е. если вы используете CI/CD, который собирает APK для тестирования со своим собственным сертификатом (например это может быть автоматически сгенерированный debug сертификат, или какой-то еще), то вам нужно добавлять отпечатки для них тоже.
  4. Нажмите «Сохранить изменения».

Настройка приложения для iOS

  1. Укажите ваш Bundle идентификатор в поле «App Bundle ID для iOS» (вы можете найти его в Xcode: Runner — Target Runner — General, раздел «Identity», поле «Bundle Identifier»).
  2. Также заполните поле «App ID для iOS» — это ваш SKU (его можно найти в App Store Connect: My Apps — {Ваше приложение} — App Store — App Information, раздел «General Information»). Чаще всего он такой же, как Bundle ID.
  3. Нажмите «Сохранить изменения».

Шаг 2 из 5. Настройка Android

Теперь переходим к настройки Flutter приложения для работы с VK SDK. Начнем с Android (если ваша целевая платформа только iOS — пропустите этот шаг).

Отредактируйте   ApplicationManifest.xml  ( /android/app/src/main/AndroidManifest.xml):

  1. Добавьте требуемое разрешение  INTERNET в корень тега  manifest, если его там еще нет (почти наверняка есть):
  2. Добавьте activity в секцию   application:

Можете посмотреть как должен выглядеть   ApplicationManifest.xml  в примере.

Шаг 3 из 5. Настройка iOS

Настройте  Info.plist ( ios/Runner/Info.plist). Вы можете редактировать его как текстовый файл из вашей IDE или можете открыть проект ( ios/Runner.xcworkspace) в Xcode:

  1. В Xcode нажмите правой клавишей на  Info.plist, и выберите  Open As Source Code.
  2. Скопируйте и вставьте следующий XML сниппет в тело вашего  Info.plist ( <dict>...</dict>), заменив  [APP_ID] на идентификатор вашего приложения в ВК:
  3. Также добавьте:

Смотрите полный  Info.plist в примере.

⚠️ ПРИМЕЧАНИЕ. Проверьте, не объявлены ли уже ключи  CFBundleURLTypes или  LSApplicationQueriesSchemes в вашем  Info.plist. Если да, то нужно слить из значения с представленными выше, а не добавлять дублирующий ключ.

Шаг 4 из 5. Дополнительная настройка приложения на VK.com

Теперь Flutter приложение готово к работе, но, прежде чем можно будет выкатывать функционал для пользователей, следует произвести некоторую дополнительную настройки вашего приложения в ВК.

Перейдите в «Мои приложения» на VK Developers и нажмите «Редактировать» для нужного приложения.

На вкладке «Информация» вам нужно:

  1. Ввести «Описание».
  2. Выбрать подходящую «Категорию».
  3. Загрузить маленькую иконку (favicon) в поле «Иконка 32×32».
  4. Нажмите «Сохранить изменения».
  5. Загрузите «Квадратную обложку» и «Квадратную обложку для каталога» в секции «Обложки и скриншоты» — их будут видеть пользователи.

Затем перейдите на вкладку «Настройки» и включите приложение: измените «Состояние» со значения «Приложение отключено» на значение «Приложение включено и видно всем».

Нажмите «Сохранить изменения».

Шаг 5 из 5. Реализация входа в приложении

Мы подключили плагин, настроили приложение на VK.com и подготовили свое Flutter приложения для реализации входа, осталось только заюзать плагин в Dart коде нашего приложения.

Для начала, создайте инстанцию  VKLogin. Затем, прежде чем будет вызван любой метод или проверен  accessToken, вам следует инициализировать VK SDK с идентификатором вашего ВК приложения ( [APP_ID]):

Теперь можно использовать плагин: проверять авторизацию, запрашивать вход через ВК, получать информацию о пользователе и так далее.

Вот пример кода:

Примечание по поводу инициалиации

Когда вы вызываете  initSdk(), плагин пытается восстановить предыдущую сессию. Если токен истек — он будет обновлен.

Также, во время восстановления, пользователю может быть показан экран входа (только если пользователь уже был залогинен).

В дополнение, вы можете передать в  initSdk() требуемые разрешения (параметр  scope), и если текущая сессия пользователя не предоставляет их, то будет выполнен выход.

Ну и еще вы можете указать какую версию API использовать, но не стоит этого делать.


Вот и все! Надеюсь статья была вам полезной. Если возникли какие-то вопросы, уточнения или исправления — прошу оставлять комментарии, буду благодарен.

И в конце еще раз ссылка на плагин:

Pub Version

Добавить комментарий