Авторизация ВКонтакте через WebView в Android приложении
Здравствуй дорогой друг, в этой статье, на простом примере мы рассмотрим, каким образом можно реализовать авторизацию и использование api социальной сети «ВКонтакте» без подключения официального SDK. Пример приложения можно скачать на github по ссылке в конце статьи.
Создаем проект, подключаем зависимости
В проекте я буду использовать kotlin, mvvm, binding, navgraph подразумевается, что ты уже знаешь, что это такое 🙂
Создаем новый проект на основе Empty Activity, я назову его OAuthWithVK_Example
Создание нового проекта
Добавляем в зависимости.
Создаем необходимые классы и файлы
Создадим класс «App» расширяющий «Application», он будет представлять наше приложение и содержать экземпляр «AccountService» для хранения токена и экземпляр «Retrofit» с url для запросов к ВК api. Через companion object будем получать доступ к App и созданным экземплярам. По хорошему это нужно делать через DI, но для простоты примера сделаем так.
Создадим интерфейс «IAccountService» и его реализацию «VKAccountService», сервис будет предоставлять возможность сохранять и получать token и userId.
Создадим класс активити с именем «MainActivity» и соответствующий ему файл разметки «activity_main». Он будет содержать FragmentContainerView для навигации.
Обновим файл манифеста, указав корневое активити.
Для навигации по фрагментам понадобится файл «nav_graph».
Теперь создадим первый класс фрагмента для авторизации, назовем его «AuthFragment». Здесь нам нужен только виджет WebView, который создадим программно. Для открытия окна авторизации нужен url с параметрами, создаем приватное поле с именем «_authParams», оно будет содержать строку с необходимой конфигурацией, далее передадим ее в WebView. В методе onViewCreated будем открывать окно аутентификации, реагировать на события ‘Подтверждение разрешений’, ‘Ошибка ввода логина/пароля’, ‘Успех’ и др. В коде я оставил TODO куда нужно будет вставить ваш client_id приложения, как его получить рассмотрим в конце статьи.
В зависимости от того какое событие сейчас происходит (ввод пароля, ошибка, заблокированный аккаунт), текущий url у WebView будет изменяться, на основе этого будем определять текущий статус аутентификации. Для этого создадим класс «AuthWebViewClient» расширяющий «WebViewClient», переопределим метод onPageFinished в котором будем парсить текущую открытую ссылку.
Перечислим статусы аутентификации в enum, который назовем «AuthStatus», этот enum будем передаваться кэлбеком из класса AuthWebViewClient во фрагмент.
После верного ввода логина/пароля и подтверждения разрешений, будет получен и записан в память токен и идентификатор пользователя. С фрагментом аутентификации на этом все.
Приступим к созданию второго фрагмента, здесь мы сделаем всего 1 запрос на получение списка друзей. На экране покажем кнопку для выхода, textview для показа кол-ва друзей и скролящийся textview для показа списка друзей.
Создадим фрагмент с именем «InfoFragment» и соответствующий ему xml файл с разметкой «info_fragment».
Запрос на список друзей будем делать во ViewModel, эту вью модель передадим в биндинг, LiveData сама будет устанавливать данные в TextView.
Осталось написать интерфейс «FriendsGetRequest» с запросом для ретрофит и на этом с программной частью будем заканчивать 🙂
Теперь разберемся, как получить client_id, это один из параметров запроса на авторизацию, его выдает ВК для понимания, какое приложение собирается обращаться к его api. Что бы его получить зайдите на свою страницу ВК и найдите меню «Управление», если его нет в списке, нужно добавить его в настройках страницы.
Кликнув по меню «Управление» мы попадем в раздел «Мои приложения», для создания нового приложения нажмите кнопку «Создать»
Раздел «Мои приложения»
В открывшемся окне укажите название приложения и выберите тип «Standalone-приложение» далее жмем кнопку «Подключить приложение». После нажатия на кнопку, вам придет смс на подключенный к странице номер.
Когда приложение будет создано перейдите в меню «Настройки», там будет указан client_id, который нужно вставить в код на место TODO, все остальные настройки по желанию 🙂
Авторизация через VK Api
Делаю авторизацию в приложении через vk api(официальное vk android sdk). Проблема в том, что я не могу понять логику работы с токеном. Насколько я помню на php(на сайтах) это делается просто. Отправляется запрос с параметрами, оно перенаправляет на сайт ВК для разрешения доступа, если true, тогда возвращает назад с json данными (id, токен). Далее токен нужно использовать в запросах.На андроид получение токена ещё ясно. Его можно взять из метода
И что с ним делать? Как его использовать в api запросах. На оф. сайте пишет пример запроса:
Где здесь токен?
Я конечно не знаток по данному языку программирования, но в запрос нужно ещё добавить:
Android и VKontakte SDK, часть 3 (авторизация и получение прав)
Во второй части я описал, как получить авторизацию от vk не используя сторонних библиотек и sdk. Недостаток данного способа в том, что каждому новому пользователю приходится вводить логин и пароль социальной сети. Время идет и вот vkontakte создает свою sdk для android! С помощью нее можно легко получить токен авторизации пользователя не вводя ни каких данных и даже не видя самого окна запроса прав.
Для начала нужно подключить Android VK SDK к вашему проекту и по пунктам выполнить все действия из официальной документации SDK по настройке и подключению, а именно: «Подготовка к использованию VK SDK», «Как получить отпечаток сертификата», «Подключение VK SDK в Android-приложении».
Далее создаем activity с авторизацией:
Вместо переменной vk_app_id нужно вписать свой ID приложения ВКонтакте. Данный экран выполняет все необходимые действия по получению токена и необходимой информации о пользователе. Использовать данных экран достаточно просто, допустим мы имеем некую кнопку, при нажатии на которую будет происходить авторизация:
VKONTAKTE_CODE — любое число, по которому будет происходить проверка в функции onActivityResult в переменной requestCode, что ответ пришел именно от нужного нам экрана, тем самым фильтровать логику ответов различных экранов (допустим, когда у нас несколько кнопок авторизации разных соц. сетей).
Данный код нужно расместить в любом месте вашего основного экрана, в мое случае это было в методе onCreate класса LoginActivity. Все полученные данные из экрана VKontakteActivity попадут в функцию onActivityResult основного экрана вашего приложения, т.е. откуда VKontakteActivity было запущено:
Данный способ существенно упрощает жизнь всем вашим пользователям, т.к. не заставляет вводить лишние данные при авторизации. Если вдруг у пользователя нет приложения ВКонтакте на телефоне, то vk sdk откроет страницу авторизации в обычном webview и сделает все, что было описано во второй части.