Ionic - Cordova Facebook

此插件用于连接 Facebook API。在开始集成 Facebook 之前，您需要创建一个 Facebook 应用在此。您将创建一个 Web 应用，然后跳过快速入门屏幕。然后，您需要在**设置**页面添加网站平台。在开发过程中，您可以使用以下代码片段作为站点 URL。

https://127.0.0.1:8100/

之后，您需要在**设置/高级**页面添加**有效的 OAuth 重定向 URI**。只需复制以下两个 URL。

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

安装 Facebook 插件

我们执行了上述所有步骤来解决使用此插件时经常出现的一些问题。此插件很难设置，因为涉及许多步骤，并且文档没有涵盖所有步骤。与其他 Cordova 插件也存在一些已知的兼容性问题，因此我们将在我们的应用程序中使用**Telerik 验证的插件**版本。我们将从命令提示符中向我们的应用程序安装浏览器平台开始。

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

接下来，我们需要做的是在**index.html**中**body**标签的顶部添加**root**元素。

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**和**version**与您创建的 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 = "//127.0.0.1/en_US/sdk.js";
      fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
</script>

Angular 服务

由于我们已经安装了所有内容，因此我们需要创建一个服务，该服务将成为我们与 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;
   }
});

在上面的服务中，我们创建了四个函数。前三个是不言自明的。第四个函数用于连接到 Facebook 图形 API。它将从 Facebook 用户返回**id**和**email**。

我们正在创建**promise 对象**来处理异步 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 屏幕。登录成功后，用户将被重定向到应用程序。

打印页面