Ionic - Cordova Facebook

Questo plugin viene utilizzato per connettersi all'API di Facebook. Prima di iniziare a integrare Facebook, devi creare un'app Facebook qui . Creerai un'app Web e quindi salterai la schermata di avvio rapido. Quindi, è necessario aggiungere la piattaforma del sito Web nel filesettingspagina. È possibile utilizzare il seguente frammento di codice per l'URL del sito durante lo sviluppo.

http://localhost:8100/

Dopodiché, devi aggiungere Valid OAuth redirect URIs sul settings/advancedpagina. Basta copiare i seguenti due URL.

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

Installazione del plugin di Facebook

Abbiamo eseguito tutti i passaggi precedenti per affrontare alcuni problemi che si verificano spesso quando si utilizza questo plug-in. Questo plugin è difficile da configurare perché sono coinvolti molti passaggi e la documentazione non li copre tutti. Ci sono anche alcuni problemi noti di compatibilità con altri plugin Cordova, quindi useremoTeleric verified pluginversione nella nostra app. Inizieremo installando la piattaforma browser sulla nostra app dal prompt dei comandi.

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

Successivamente, ciò che dobbiamo fare è aggiungere il file root elemento sopra il file body tag in index.html.

index.html

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

Ora aggiungeremo il plug-in di Facebook di Cordova alla nostra app. Devi cambiareAPP_ID e APP_NAME per abbinare l'app Facebook che hai creato in precedenza.

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

Ora aperto index.html e aggiungi il codice seguente dopo il tuo bodyetichetta. Anche in questo caso è necessario assicurarsi che il fileappId e versioncorrispondono all'app Facebook che hai creato. Ciò garantirà che l'SDK di Facebook venga caricato in modo asincrono senza bloccare il resto dell'app.

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>

Servizio angolare

Dato che abbiamo installato tutto, dobbiamo creare un servizio che sarà la nostra connessione a Facebook. Queste cose possono essere fatte con meno codice all'interno dicontroller, ma cerchiamo di seguire le migliori pratiche, quindi utilizzeremo il servizio Angular. Il codice seguente mostra l'intero servizio. Lo spiegheremo più tardi.

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;
   }
});

Nel servizio di cui sopra, stiamo creando quattro funzioni. I primi tre sono autoesplicativi. La quarta funzione viene utilizzata per la connessione all'API del grafico di Facebook. Restituirà il fileid e email dall'utente Facebook.

Stiamo creando promise objectsper gestire funzioni JavaScript asincroniche. Ora dobbiamo scrivere il nostro controller che chiamerà queste funzioni. Chiameremo ciascuna funzione separatamente per una migliore comprensione, ma probabilmente sarà necessario mescolarne alcune insieme per ottenere l'effetto desiderato.

Codice controller

.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();
   }
})

Probabilmente ti starai chiedendo perché non siamo tornati Authservizio direttamente dalle espressioni di funzione (prime quattro funzioni). La ragione di ciò è che probabilmente vorrai aggiungere un po 'più di comportamento dopo ilAuthviene restituita la funzione. Potresti inviare alcuni dati al tuo database, cambiare il percorso dopo il login, ecc. Questo può essere fatto facilmente usando JavaScriptthen() metodo per gestire tutte le operazioni asincrone invece dei callback.

Ora dobbiamo consentire agli utenti di interagire con l'app. Il nostro HTML conterrà quattro pulsanti per chiamare le quattro funzioni che abbiamo creato.

Codice 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>

Quando l'utente tocca il LOG INpulsante, apparirà la schermata di Facebook. L'utente verrà reindirizzato all'app dopo che l'accesso è andato a buon fine.