Вход через 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.

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

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

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

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

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

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

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

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

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

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

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

<uses-permission android:name="android.permission.INTERNET" />

1

<uses-permission android:name="android.permission.INTERNET" />
Добавьте activity в секцию   application:

<activity android:name="com.vk.sdk.VKServiceActivity" android:label="ServiceActivity" android:theme="@style/VK.Transparent" />

1
2
3

<activity android:name="com.vk.sdk.VKServiceActivity"
    android:label="ServiceActivity"
    android:theme="@style/VK.Transparent" />

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

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

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

В Xcode нажмите правой клавишей на Info.plist, и выберите Open As Source Code.

Скопируйте и вставьте следующий XML сниппет в тело вашего Info.plist ( <dict>...</dict>), заменив [APP_ID] на идентификатор вашего приложения в ВК:

<key>CFBundleURLTypes</key>
<array>
  <dict>
  <key>CFBundleURLSchemes</key>
  <array>
    <string>vk[APP_ID]</string>
  </array>
  </dict>
</array>

<key>CFBundleURLTypes</key>

<array>

<dict>

<key>CFBundleURLSchemes</key>

<array>

</array>

</dict>

</array>

Также добавьте:

<key>LSApplicationQueriesSchemes</key> <array> <string>vk</string> <string>vk-share</string> <string>vkauthorize</string> </array>

1
2
3
4
5
6

<key>LSApplicationQueriesSchemes</key>
<array>
    <string>vk</string>
    <string>vk-share</string>
    <string>vkauthorize</string>
</array>

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

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

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

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

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

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

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

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

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

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

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

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

final vk = VKLogin();
final appId = '7503887'; // Your application ID
await vk.initSdk(appId);

final vk = VKLogin();

final appId = '7503887'; // Your application ID

await vk.initSdk(appId);

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

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

import 'package:flutter_login_vk/flutter_login_vk.dart';

// Создаем инстанцию VKLogin
final vk = VKLogin();

// Инициализируем
await vk.initSdk('7503887');

// Запрашиваем вход
final res = await vk.logIn(permissions: [
  VKScope.email,
  VKScope.friends,
]);

// Проверяем результат
if (res.isValue) {
    // Ошибки нет, но мы еще не знаем, вошел
    // пользователь или нет, он мог отменить вход. 
    // Нужно проверить свойство isCanceled:
    final VKLoginResult data = res.asValue.value;

    if (res.isCanceled) {
        // Пользователь отменил вход
    } else {
        // Вход выполнен ?

        // Отправьте этот access token на сервер для валидации
        // и авторизации в вашем приложении
        final VKAccessToken accessToken = res.accessToken;
        print('Access token: ${accessToken.token}');
    
        // Получаем данные профиля
        final profile = await fb.getUserProfile();
        print('Добро пожаловать, ${profile.firstName}! Ваш ID: ${profile.userId}');

        // Получаем email. Выше, при логине, мы запросили права,
        // поэтому можем прочитать электронную почту пользователя
        final email = await fb.getUserEmail();
        print('Ваш email: $email');
    }
} else {
    // Ошибка входа
    final errorRes = res.asError;
    print('Ошибка при входе: ${errorRes.error}');
}

import 'package:flutter_login_vk/flutter_login_vk.dart';

// Создаем инстанцию VKLogin

final vk = VKLogin();

// Инициализируем

await vk.initSdk('7503887');

// Запрашиваем вход

final res = await vk.logIn(permissions: [

VKScope.email,

VKScope.friends,

]);

// Проверяем результат

if (res.isValue) {

// Ошибки нет, но мы еще не знаем, вошел

// пользователь или нет, он мог отменить вход.

// Нужно проверить свойство isCanceled:

final VKLoginResult data = res.asValue.value;

if (res.isCanceled) {

// Пользователь отменил вход

} else {

// Вход выполнен ?

// Отправьте этот access token на сервер для валидации

// и авторизации в вашем приложении

final VKAccessToken accessToken = res.accessToken;

print('Access token: ${accessToken.token}');

// Получаем данные профиля

final profile = await fb.getUserProfile();

print('Добро пожаловать, ${profile.firstName}! Ваш ID: ${profile.userId}');

// Получаем email. Выше, при логине, мы запросили права,

// поэтому можем прочитать электронную почту пользователя

final email = await fb.getUserEmail();

print('Ваш email: $email');

}

} else {

// Ошибка входа

final errorRes = res.asError;

print('Ошибка при входе: ${errorRes.error}');

}

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

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

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

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

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

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

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