イオン-Cordova Facebook

このプラグインは、Facebook APIへの接続に使用されます。 Facebookの統合を開始する前に、Facebookアプリhttps://developers.facebook.com/[こちら]を作成する必要があります。 Webアプリを作成し、クイックスタート画面をスキップします。次に、 settings ページでWebサイトプラットフォームを追加する必要があります。開発中は、サイトURLに次のコードスニペットを使用できます。

http://localhost:8100/

その後、 settings/advanced ページで*有効なOAuthリダイレクトURI *を追加する必要があります。次の2つのURLをコピーするだけです。

https://www.facebook.com/connect/login_successl
http://localhost:8100/oauthcallbackl

Facebookプラグインのインストール

このプラグインを使用するときによく発生する問題に対処するために、上記のすべての手順を実行しました。このプラグインは、多くの手順が含まれており、ドキュメントではそれらのすべてが網羅されていないため、セットアップが困難です。他のCordovaプラグインとの互換性に関する既知の問題もいくつかあるため、アプリでは* Teleric検証済みプラグイン*バージョンを使用します。コマンドプロンプトからアプリにブラウザープラットフォームをインストールすることから始めます。

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

次に、 indexl の body タグの上に root 要素を追加する必要があります。

インデックス

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

次に、アプリにCordova Facebookプラグインを追加します。以前に作成したFacebookアプリに合わせて APP_ID と APP_NAME を変更する必要があります。

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

ここで indexl を開き、 body タグの後に次のコードを追加します。ここでも、 appId と version が作成したFacebookアプリと一致していることを確認する必要があります。これにより、アプリの残りの部分をブロックすることなく、Facebook SDKが非同期でロードされます。

インデックス

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

上記のサービスでは、4つの関数を作成しています。最初の3つは一目瞭然です。 4番目の関数は、FacebookグラフAPIへの接続に使用されます。 Facebookユーザーからの id と email を返します。

非同期JavaScript関数を処理する* promiseオブジェクト*を作成しています。次に、これらの関数を呼び出すコントローラーを作成する必要があります。理解を深めるために各関数を個別に呼び出しますが、望みの効果を得るにはおそらくそれらのいくつかを一緒に混ぜる必要があります。

コントローラコード

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

おそらく、関数式（最初の4つの関数）から直接 Auth サービスを返さなかったのではないかと思われます。この理由は、おそらく Auth 関数が返された後、いくつかの動作を追加する必要があるためです。データベースにデータを送信したり、ログイン後にルートを変更したりできます。これは、コールバックの代わりにJavaScript * then（）*メソッドを使用してすべての非同期操作を処理することで簡単に実行できます。

次に、ユーザーがアプリを操作できるようにする必要があります。 HTMLには、作成した4つの関数を呼び出すための4つのボタンが含まれます。

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画面が表示されます。ログインが成功すると、ユーザーはアプリにリダイレクトされます。

Ionic Cordova Facebook

Ionic-facebook

目次

イオン-Cordova Facebook

Facebookプラグインのインストール

インデックス

インデックス

角度サービス

services.js

コントローラコード

HTMLコード