Ionic/CordovaアプリでFacebookログイン

CordovaアプリでFacebookログインを実現するためにしたことメモ。ionicを使ったが、cordova系ならだいたい同じかと思う

1. Facebookでアプリ登録

Facebook Developersにてアプリを新規で登録する

2. phonegap-facebook pluginをセットアップ

pluginディレクトリにプラグインをcloneする

$ cd {APP_ROOT}/plugin
$ git clone https://github.com/Wizcorp/phonegap-facebook-plugin.git

3. プラットフォーム毎の設定

Android

key hashを生成しFacebook developerに登録

下記コマンドでkey hashを生成する

$ keytool -exportcert -alias androiddebugkey -keystore ~/.android/debug.keystore | openssl sha1 -binary | openssl base64

パスワードはandroidを入力する。(じゃないとうまいいかなかった)

生成したkey hashをfacebook developerにて登録する

プラグインにアプリIDとアプリ名をセットする

$ cordova -d plugin add  plugins/phonegap-facebook-plugin --variable APP_ID=1234567890 --variable APP_NAME="your-app-name"

iOS

プラグインにアプリIDとアプリ名をセットする。（もしやandoridでやっておけばいらないかも)

$ cordova -d plugin add  plugins/phonegap-facebook-plugin --variable APP_ID="1234567890" --variable APP_NAME="your-app-name”

Web

ionicの場合はplugin内のjsファイルを下記のようにコピーする。(じゃないとうまくいかなかった)

$ cp plugins/phonegap-facebook-plugin/www/js/facebookConnectPlugin.js www/js/

www/index.htmlのbodyすぐ下に下記タグを記入する

<div id="fb-root"></div>
<script src="js/facebookConnectPlugin.js"></script>

AppIDのセット

angular.module('yourApp',['ionic','ngCordova'])
.config(function($cordovaFacebookProvider){
    $cordovaFacebookProvider.setAppID(1234567890);
})
;

Tips: facebookでのドメイン設定

localhostで動かす場合はfacebook developersにてSite URLをhttp://localhost:8100/のようにlocalhostを含むURLを指定した後、ドメインをlocalhostとして設定する

4. 実装

使い方は下記のような感じ。こう書くことで全てのデバイスで同じように動く

anglar.module('myConrollers',[])
.controller('loginController', function( $scope, $cordovaFacebook ){
  $scope.login = function(){
    $cordovaFacebook.login(["public_profile", "email"])
    .then(function(success) {
        console.log("facebook id:" + success.authResponse.userID );
    });
  };
});