Авторизация в мобильном устройстве на Cordova через Facebook

👁 60 просмотров

Вход в Cordova — приложение с помощью Facebook является одной из наиболее востребованных статей, и здесь мы рассмотрим один из способов реализовать данную настройку.

Для реализации входа будет использован сторонний плагин cordova-plugin-facebook4, который является форком из репозитория phonegap-facebook-plugin.

Данный плагин использует последний SDK SDK для Facebook, позволяя реализовать получение данных из профиля Facebook в проектах Cordova.

В этой статье мы позволим нашему пользователю войти в систему со своей учетной записью Facebook, и после того, как мы пройдем проверку подлинности, мы сделаем запрос на захват некоторой пользовательской информации из нашего профиля Facebook.

Нам нужно будет создать новое приложение для Facebook через свой профиль и подключить наше Facebook — приложение к приложению Cordova и результат этого будет похож следующим образом:

  • если пользователь не авторизирован в Facebook, то вывести формы авторизации;
  • подтверждение, что вы даете разрешение на доступ к своим данным через приложение Facebook приложению Cordova;
  • передача данных нашего профиля приложению на Cordova и использование для регистрации или для входа в систему.

Создаем новое приложение Facebook

Заходим в свой аккаунт на Facebook и в левом списке ищем пункт Приложения

Жмем на пункт "Управление приложениями"
Жмем на пункт «Управление приложениями»

 

Создаем новое приложение

Тут мы создаем новое приложение или используем существующее. У меня оно уже есть
Тут мы создаем новое приложение или используем существующее. У меня оно уже есть

Выбираем для приложения продукты авторизации

Тут добавляем новый продукт для приложения. Для авторизации достаточно добавить продукт "Вход через Facebook"
Тут добавляем новый продукт для приложения. Для авторизации достаточно добавить продукт «Вход через Facebook»

Обращаем внимание на ID приложения. Он нам нужен будет на этапе настройки плагина cordova-plugin-facebook4 .

Далее настраиваем наше приложение, заполняя основную информацию

Заполняем основную информацию в настройках приложения
Заполняем основную информацию в настройках приложения

И далее основное — добавление платформ к приложению. В данном примере добавим только платформу Android, но вам никто не мешает добавить и остальные

Тут добавляем необходимые для нас платформы, к которым наше приложение Facebook будет комуницировать с этими платформами
Тут добавляем необходимые для нас платформы, к которым наше приложение Facebook будет комуницировать с этими платформами

 

На этапе добавления, в данном случает добавления платформы Android, достаточно прописать идентификатор приложения в Google Play. Чтобы приложение работало оно может быть и не опубликовано в Google Play — это необязательно, но прописать индентификатор необходимо для работоспособности.

Настройка клиентского приложения на Cordova

После создания приложения Cordova необходимо добавить вышеупомянутый плагин командой с параметрами приложения Facebook

cordova plugin add cordova-plugin-facebook4 --save --variable APP_ID="123456789" --variable APP_NAME="myApplication"
  • APP_ID — это ИД приложения Facebook;
  • APP_NAME — имя приложения Facebook.

Теперь код SDK Facebook для авторизации через приложение доступно через код приложения Cordova и сначала нужно инициализировать

        window.fbAsyncInit = function() {
            FB.init({
                appId      : '1971003386550161',
                xfbml      : true,
                version    : 'v2.4'
            });
        };

Далее выполняем код авторизации

                    try {
                        var fbLoginSuccess = function (userData) {
                             if (userData.status=='connected'){
                                  facebookConnectPlugin.api("me/?fields=id,last_name,first_name,birthday,email, picture.width(200).height(200)", ['public_profile', 'user_friends', 'email'],
                                       function onSuccess (result) {
                                            alert("Result: "+JSON.stringify(result));
                                       }, function onError (error) {
                                            alert("Failed: "+JSON.stringify(error));
                                       }
                                  );
                             }
                        };
                        facebookConnectPlugin.login(["public_profile"], fbLoginSuccess,
                             function loginError (error) {
                                  alert('error='+JSON.stringify(error))
                             }
                        );
                   }
                   catch (e) {
                        alert('error1='+e.message);
                   }
                }

Результатом будет следующие данные, которые мы уже можем использовать в нашем приложении