Обратно

​Регистрация и вход через нативные приложения Вконтакте и Facebook в мобильном приложении на Cordova

Андрей ГуровМенеджер проектов Cтудии
Дата 9 ноября 2017

Регистрация и вход являются основой основ практически для всех современных мобильных (и не только) приложений. Установленные на устройстве официальные приложения социальных сетей – это простейший для пользователя способ зарегистрироваться или войти: ему не нужно заполнять логин и пароль вручную.

По части технологий для реализации входа можно использовать универсальные OAuth-библиотеки, либо официальные SDK соцсетей. У официальных SDK есть важное преимущество: они производят авторизацию через установленные приложения, либо через аккаунты пользователя в системных настройках. Благодаря SDK, мы можем запросить больше сведений о пользователе: список друзей или круг интересов и отображать в приложении релевантную информацию.

Но подобный сценарий работает только в нативных приложениях. В нашем случае, для Cordova готового решения не существовало, доступные плагины-обертки над SDK больше похожи на незавершенные, чем на серьезные решения. Самый популярный плагин для Вконтакте вообще отказывался собираться под Cordova.

Задача

Сделать авторизацию приложения с помощью нативного SDK поставщика авторизации и далее передать токен доступа в backend, чтоб пройти верификацию в нем. Проще говоря, нам нужно авторизоваться на бэкенде по токену, полученному через нативное приложение социальной сети. Если приложение передаст неверный токен, то социальная сеть не отдаст данные, соответственно авторизация не пройдет.

Решение схематично

Мы воспользовались наработками следующих плагинов и реализовали вышеуказанную схему взаимодействия.

https://github.com/jeduan/cordova-plugin-facebook4
https://github.com/DrMoriarty/cordova-social-vk

Вот issue, который возник в процессе реализации. В качестве решения мы написали hook, который автоматизирует найденное решение.

Далее, в зависимости от используемой пользователем версии (мобильное приложение или веб-версия) происходит выбор стратегии авторизации: в первом случае, вышеуказанная схема, во втором обычный oauth через device.

Какие обязательные параметры понадобятся для настройки будущего взаимодействия?

При авторизации через Вконтакте

Переходим в раздел разработчика и создаем новое Standalone приложение

Из настроек понадобится ключ, сервис токен и включенный open api

Важные параметры для настройки плагина App Bundle ID, App ID для IOS и Package name для Android, а также Signing certificate fingerprint

Не забудьте добавить ключ App signing certificate fingerprint из Google Play

При авторизации через Facebook

Регистрируем новое приложение на странице разработчика. Сохраняем секретный ключ и id приложения

В настройках добавляем необходимые для авторизации платформы. Для Ios указываем идентификатор сборки и идентификатор приложения в App Store (их можно посмотреть в itunes connect)

Для Android указываем ключевой hash-address и Package name из Google Play

Не забудьте сделать приложение доступным всем пользователям

Счастливый конец изысканий можно протестировать в разработанном нами приложении Two Capitals, которое доступно и в Эпстор и в Гуглплей. Регистрация и вход в приложение через установленные на мобильном устройстве Вконтакте или Facebook занимает у пользователя менее 10 секунд без нужды вспоминать и вводить логин / пароль от соц. сети.

Загрузить в Appstore

Доступно в Google Play

Остались вопросы?