Ionic - Cordova Facebook

此外掛用於連線 Facebook API。在開始整合 Facebook 之前，您需要建立一個 Facebook 應用在此。您將建立一個 Web 應用，然後跳過快速入門螢幕。然後，您需要在**設定**頁面新增網站平臺。在開發過程中，您可以使用以下程式碼片段作為站點 URL。

https://:8100/

之後，您需要在**設定/高階**頁面新增**有效的 OAuth 重定向 URI**。只需複製以下兩個 URL。

https://#/connect/login_success.html
https://: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 = "//#/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 螢幕。登入成功後，使用者將被重定向到應用程式。

列印頁面