Ionic — Cordova Facebook

Этот плагин используется для подключения к Facebook API. Прежде чем начать интеграцию с Facebook, вам нужно создать приложение Facebook здесь . Вы создадите веб-приложение, а затем пропустите экран быстрого запуска. Затем вам необходимо добавить платформу сайта на странице настроек . Вы можете использовать следующий фрагмент кода для URL сайта в процессе разработки.

http://localhost:8100/

После этого вам нужно добавить действительные URI перенаправления OAuth на страницу настроек / дополнительных настроек . Просто скопируйте следующие два URL.

https://www.facebook.com/connect/login_success.html
http://localhost:8100/oauthcallback.html

Установка плагина Facebook

Мы сделали все шаги выше, чтобы решить некоторые проблемы, которые часто появляются при использовании этого плагина. Этот плагин сложно настроить, поскольку в нем много шагов, а документация не охватывает все из них. Есть также некоторые известные проблемы совместимости с другими плагинами Cordova, поэтому мы будем использовать версию плагина, проверенную Teleric, в нашем приложении. Мы начнем с установки платформы браузера в наше приложение из командной строки.

C:\Users\Username\Desktop\MyApp>ionic platform add browser

Далее нам нужно добавить корневой элемент поверх тега body в index.html .

index.html

<div id = "fb-root"></div>

Теперь мы добавим плагин Cordova Facebook в наше приложение. Вам нужно изменить APP_ID и APP_NAME, чтобы они соответствовали приложению Facebook, которое вы создали ранее.

C:\Users\Username\Desktop\MyApp>cordova -d plugin add 
   https://github.com/Telerik-Verified-Plugins/Facebook/ 
   --variable APP_ID = "123456789" --variable APP_NAME = "FbAppName"

Теперь откройте index.html и добавьте следующий код после тега body . Опять же, вам нужно убедиться, что appId и версия соответствуют приложению Facebook, которое вы создали. Это обеспечит асинхронную загрузку Facebook SDK без блокировки остальной части приложения.

index.html

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

   (function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) {return;}
      js = d.createElement(s); js.id = id;
      js.src = "//connect.facebook.net/en_US/sdk.js";
      fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
</script>

Угловой сервис

Поскольку мы все установили, нам нужно создать сервис, который будет нашим подключением к Facebook. Эти вещи могут быть выполнены с меньшим количеством кода внутри контроллера , но мы стараемся следовать лучшим практикам, поэтому мы будем использовать сервис Angular. Следующий код показывает весь сервис. Мы объясним это позже.

services.js

.service('Auth', function($q, $ionicLoading) {
   this.getLoginStatus = function() {
      var defer = $q.defer();
      
      FB.getLoginStatus(function(response) {
		   if (response.status === "connected") {
            console.log(JSON.stringify(response));
         } else {
            console.log("Not logged in");
         }
      });

      return defer.promise;
   }
   this.loginFacebook = function() {
      var defer = $q.defer();

      FB.login(function(response) {
		   if (response.status === "connected") {
            console.log(JSON.stringify(response));
         } else {
            console.log("Not logged in!");
         }
      });

      return defer.promise;
   }
   this.logoutFacebook = function() {
      var defer = $q.defer();

      FB.logout(function(response) {
         console.log('You are logged out!');
      });

      return defer.promise;
   }
   this.getFacebookApi = function() {
      var defer = $q.defer();

      FB.api("me/?fields = id,email", [], function(response) {
		
         if (response.error) {
            console.log(JSON.stringify(response.error));
         } else {
            console.log(JSON.stringify(response));
         }
      });

      return defer.promise;
   }
});

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

Мы создаем объекты обещаний для обработки асинхронных функций JavaScript. Теперь нам нужно написать наш контроллер, который будет вызывать эти функции. Мы будем вызывать каждую функцию отдельно для лучшего понимания, но вам, вероятно, придется смешать некоторые из них, чтобы получить желаемый эффект.

Код контроллера

.controller('MyCtrl', function($scope, Auth, $ionicLoading) {
   
   $scope.checkLoginStatus = function() {
      getLoginUserStatus();
   }

   $scope.loginFacebook = function(userData) {
      loginFacebookUser();
   };

   $scope.facebookAPI = function() {
      getFacebookUserApi();
   }

   $scope.logoutFacebook = function() {
      logoutFacebookUser();
   };

   function loginFacebookUser() {
      return Auth.loginFacebook();
   }

   function logoutFacebookUser() {
      return Auth.logoutFacebook();
   }

   function getFacebookUserApi() {
      return Auth.getFacebookApi();
   }

   function getLoginUserStatus() {
      return Auth.getLoginStatus();
   }
})

Вы, наверное, задаетесь вопросом, почему мы не вернули сервис Auth непосредственно из выражений функций (первые четыре функции). Причина этого заключается в том, что вы, вероятно, захотите добавить больше поведения после того, как функция Auth будет возвращена. Вы можете отправить некоторые данные в свою базу данных, изменить маршрут после входа в систему и т. Д. Это легко сделать с помощью метода JavaScript then () для обработки всех асинхронных операций вместо обратных вызовов.

Теперь нам нужно разрешить пользователям взаимодействовать с приложением. Наш HTML будет содержать четыре кнопки для вызова четырех функций, которые мы создали.

HTML-код

<button class = "button" ng-click = "loginFacebook()">LOG IN</button>
<button class = "button" ng-click = "logoutFacebook()">LOG OUT</button>
<button class = "button" ng-click = "checkLoginStatus()">CHECK</button>
<button class = "button" ng-click = "facebookAPI()">API</button>

Когда пользователь нажимает кнопку « ВХОД» , появляется экран Facebook. Пользователь будет перенаправлен в приложение после успешного входа в систему.