Ionic - Cordova Facebook

Este plugin é usado para conectar a API do Facebook. Antes de começar a integrar o Facebook, você precisa criar um aplicativo do Facebook aqui . Você criará um aplicativo da web e pulará a tela de início rápido. Então, você precisa adicionar a plataforma do site nosettingspágina. Você pode usar o seguinte snippet de código para a URL do site durante o desenvolvimento.

http://localhost:8100/

Depois disso, você precisa adicionar Valid OAuth redirect URIs no settings/advancedpágina. Basta copiar os dois URLs a seguir.

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

Instalando o plug-in do Facebook

Fizemos todas as etapas acima para resolver alguns problemas que freqüentemente aparecem ao usar este plugin. Este plugin é difícil de configurar porque há várias etapas envolvidas e a documentação não cobre todas elas. Existem também alguns problemas de compatibilidade conhecidos com outros plug-ins do Cordova, portanto, usaremosTeleric verified pluginversão em nosso aplicativo. Começaremos instalando a plataforma do navegador em nosso aplicativo a partir do prompt de comando.

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

Em seguida, o que precisamos fazer é adicionar o root elemento em cima do body marcar em index.html.

index.html

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

Agora vamos adicionar o plugin Cordova para Facebook ao nosso aplicativo. Você precisa mudarAPP_ID e APP_NAME para corresponder ao aplicativo do Facebook que você criou antes.

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

Agora aberto index.html e adicione o seguinte código após seu bodytag. Mais uma vez, você precisa ter certeza de que oappId e versioncorrespondem ao aplicativo do Facebook que você criou. Isso garantirá que o SDK do Facebook seja carregado de forma assíncrona, sem bloquear o restante do aplicativo.

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>

Serviço Angular

Já que instalamos tudo, precisamos criar um serviço que será a nossa conexão com o Facebook. Essas coisas podem ser feitas com menos código dentro docontroller, mas tentamos seguir as melhores práticas, por isso vamos usar o serviço Angular. O código a seguir mostra todo o serviço. Explicaremos mais tarde.

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

No serviço acima, estamos criando quatro funções. Os três primeiros são autoexplicativos. A quarta função é usada para conectar à API gráfica do Facebook. Ele retornará oid e email do usuário do Facebook.

Estamos criando promise objectspara lidar com funções JavaScript assíncronas. Agora precisamos escrever nosso controlador que chamará essas funções. Chamaremos cada função separadamente para melhor compreensão, mas provavelmente você precisará misturar algumas delas para obter o efeito desejado.

Código do Controlador

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

Você provavelmente está se perguntando por que não retornamos Authserviço diretamente das expressões de função (primeiras quatro funções). A razão para isso é que você provavelmente desejará adicionar mais algum comportamento após oAuthfunção é retornada. Você pode enviar alguns dados ao seu banco de dados, alterar a rota após o login, etc. Isso pode ser feito facilmente usando JavaScriptthen() método para lidar com todas as operações assíncronas em vez de retornos de chamada.

Agora precisamos permitir que os usuários interajam com o aplicativo. Nosso HTML conterá quatro botões para chamar as quatro funções que criamos.

Código 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 o usuário toca no LOG INbotão, a tela do Facebook aparecerá. O usuário será redirecionado para o aplicativo após o login ser bem-sucedido.