アシアルブログ

アシアルの中の人が技術と想いのたけをつづるブログです

MonacaアプリでFacebookログインを使ってみよう

認証システムは作るのはもちろん、維持運用するのも大変です。そこでFacebookTwitterといったソーシャルサービスを使った認証システムが重宝されます。Monacaアプリにおいてもニーズの多いFacebookログインをデモコードを使って紹介します。



必要なもの





今回はオプションとしてjQueryも使っています。



Facebookアプリ



まず最初にFacebookアプリを登録しましょう。Facebook Developersのサイトで新規アプリを作成します。ここで大事なのはアプリのApp IDになります。





Facebookアプリ



そしてSettingsのAdvancedにおいて、次のように指定します。





後はデフォルトのままで良いかと思います。





Facebookアプリの設定



OpenFB





OpenFBのGitHubプロジェクトページ



Facebookが公式に提供しているJavaScript SDKの場合、認証後のURLを変更できません。そこで、サードパーティ製のOpenFBというライブラリを使います。こちらのJavaScriptファイルをダウンロードしてください。



Monacaアプリを作成



今回は最小限のテンプレートで作成しています。まずindex.htmlは次のようになります。





<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <script src="components/loader.js"></script>
    <link rel="stylesheet" href="components/loader.css">
    <link rel="stylesheet" href="css/style.css">
    <script src="js/openfb.js"></script>
    <script src="js/jquery.min.js"></script>
    <script src="js/app.js"></script>
</head>
<body>
  
  
  
  <a class="fb-login" href="#">Facebookログイン</a>
  <a class="fb-logout" href="#">ログアウト</a>
  <div class="profile">
    <div class="name"></div>
    <div class="image"></div>
  </div>
</body>
</html>


div.profile以下はFacebookログインがうまくいった場合に表示される情報です。次にjs/app.jsを作成します。





var onDeviceReady = function () {
};
document.addEventListener("deviceready", onDeviceReady, false);


onDeviceReadyの中でOpenFBを初期化します。





openFB.init({appId: '999999999999', tokenStore: window.localStorage, accessToken: window.localStorage.accessToken});


appIdは取得したFacebookアプリのものに置き換えてください。OpenFBはデフォルトではsessionStorageになっており、再読込するとログイン状態が解除されてしまいます。そこでlocalStorageに置き換えています。また、再読込時などにログイン状態を維持できるようにaccessTokenも渡しておきます。



初期化が終わったらログイン状態をチェックします。openFB.apiというメソッドでFacebookAPIを叩きます。OAuth Tokenのあるなしで判定しても良いのですが、有効期限が切れている場合もありますので都度確認する方が正確でしょう。



そして /me、つまり自分自身の情報がとれればログインしている、取れなければしていないと見なして処理分けしています。自分の情報が取れる場合はsuccessにコールバックがきます。コールバックされる際には自分自身の情報が変数に入ってきますので、その中から自由に情報を使えます。逆にエラーの場合はログインしていないと判断しています。





var fb_init = function () {
    openFB.api({path: '/me', 
        success: function (me) {
            $(".fb-login").hide();
            $(".fb-logout").show();
            $(".profile .name").text(me.last_name + " " + me.first_name);
            $(".profile .image").html($("<img />").attr("src", "http://graph.facebook.com/"+me.id+"/picture?type=small"));
        },
        error: function (err) {
            $(".fb-logout").hide();
            $(".fb-login").show();
            $(".profile .name").empty();
            $(".profile .image").empty();
        }
    }); 
};
fb_init();


後はFacebookログイン、ログアウトの機能を追加します。





// Facebookログイン
$(".fb-login").on("click", function () {
    openFB.login(function (data) {
        fb_init();
    }, {scope: 'email,read_stream,publish_actions'});
});

// Facebookログアウト
$(".fb-logout").on("click", function () {
    openFB.logout(function () {
        fb_init();
    });
});


どちらもOpenFBの提供するlogin、logoutメソッドを使っているだけです。その結果、コールバックが返ってきますので再描画しています。



これで処理は完成です。全体のjs/app.jsのコードは次のようになります。





var onDeviceReady = function () {
    openFB.init({appId: '999999999999', tokenStore: window.localStorage, accessToken: window.localStorage.accessToken});
    $(".fb-login").on("click", function () {
        openFB.login(function (data) {
            fb_init();
        }, {scope: 'email,read_stream,publish_actions'});    
    });
    
    $(".fb-logout").on("click", function () {
        openFB.logout(function () {
            fb_init();            
        });
    });
    
    var fb_init = function () {
        openFB.api({path: '/me', 
            success: function (me) {
                $(".fb-login").hide();
                $(".fb-logout").show();
                $(".profile .name").text(me.last_name + " " + me.first_name);
                $(".profile .image").html($("<img />").attr("src", "http://graph.facebook.com/"+me.id+"/picture?type=small"));
            },
            error: function (err) {
                $(".fb-logout").hide();
                $(".fb-login").show();
                $(".profile .name").empty();
                $(".profile .image").empty();
            }
        }); 
    };
    fb_init();
};

document.addEventListener("deviceready", onDeviceReady, false);


OpenFBを一点修正



OpenFBのログアウト処理が間違っているように見えるので次のように変更します。





tokenStore.removeItem('fbtoken');
//  ↓
tokenStore.removeItem('fbAccessToken');


動かしてみる



では実際に動かしてみましょう。なお、OpenFBはCordovaやMonacaアプリで動かす場合、InAppBrowserプラグインを使っています。Monacaデバッガーには予め組み込まれていますのでMonacaプロジェクトをそのままMonacaデバッガー上で動かしてみてください。



まず最初はFacebookログインだけ出ていますので、タップします。





ログイン画面



認証画面が出ますのでID、パスワードを入力してください。





ID、パスワード入力



2段階認証も使えます。





2段階認証



認証しました。名前とプロフィール画像が表示されるはずです。





ログイン完了



ログアウトをタップすると一番最初の表示に戻ります。





ログアウト後



動画にすると次のようになります。





Facebookログイン動画






このようにOpenFBを使えば特別なネイティブプラグインを使うことなくシンプルにFacebook認証機能を組み込むことができます。ぜひ皆さんのアプリにも組み込んでみてください。

MonacaアプリにネイティブFacebookプラグインを導入してみよう!

こんにちは、渡辺です。

今回は、「Wizcorp/phonegap-facebook-plugin」プラグインを利用してFacebookと連携するサンプルプロジェクトを作ります。

■利用するプラグイン


Wizcorp/phonegap-facebook-plugin
( https://github.com/Wizcorp/phonegap-facebook-plugin )


■サンプルプロジェクトについて


 サンプルプロジェクトでは、Facebookへログイン後にログインしたユーザーのメールアドレスと友達リストを取得します。取得した情報は、アラートで表示します。また、このプロジェクトはMonacaテンプレートの「最小限のテンプレート」をもとに作成しています。

 

・サンプルプロジェクトの動作確認環境


  ・iPhone6 (iOS 8.1.2)
  ・GALAXY Note 2 SC-02E (Android4.3 )
  ・デバッグビルドしたアプリで確認済
  (注意:ストア版デバッガーおよびカスタムデバッガーでは動作しないので注意してください。)


■準備


 準備としては、サンプルプロジェクトを作成する前に、まず下記の「サンプルプロジェクト Facebook クライアント」ページにある事前準備作業を行い、「App ID 」と「 APP NAME」を取得してください。

・サンプルプロジェクト Facebook クライアント
http://docs.monaca.mobi/cur/ja/sampleapp/samples/facebook


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


  こちらの過去記事に記述したましたので、参照ください。



また、プラグインをインストールする際には、ZIP形式でのインポートをお薦めします。
注意する点として、今回のプラグインの場合、GitHubからダウンロードしたZIP内容に一部誤りのようなところがあります。対処法としては、一度解凍して再度WinArchiverなどのソフトを利用して圧縮すると正しい形式のZIPが作成されます。

プラグインの設定


プラグインのインストール作業が完了したら、次はプラグインで利用する「APP_ID」と「APP_NAME」をプラグインの設定画面にて指定します。
ここで使用する値は、「準備」の項目で用意したものとなります。





Facebookへログインする


「deviceready」イベントが発生した際に、Facebookへのログインが開始するようにしています。
ログインが成功した場合は、「fbLoginSuccess」を実施します。「fbLoginSuccess」は次の項目に記述しています。



document.addEventListener('deviceready', initApp, false);

function initApp() {
    // Login
    facebookConnectPlugin.login(["public_profile"], fbLoginSuccess, function (error) {
      alert("" + error)
    });
  }



■ユーザー情報を取得する


ログインが成功した際に呼ばれる処理です。ここでは Facebook Graph APIを利用して、ユーザー情報としてemailと友達リストを取得しています。



var fbLoginSuccess = function (userData) {
    alert("UserInfo: " + JSON.stringify(userData));

    // Get email and friends 
    facebookConnectPlugin.api(userData.authResponse.userID + "/?fields=id,email,friends", ["email", "user_friends"], function (result) {
      alert("Result: " + JSON.stringify(result));
    }, function (error) {
      alert("Failed: " + JSON.stringify(error));
    });
  };    



■サンプルプロジェクトのコード


index.html




<!DOCTYPE HTML>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <script src="components/loader.js"></script>
  <link rel="stylesheet" href="components/loader.css">
  <link rel="stylesheet" href="css/style.css">
</head>

<body>
<br/>This is a template for Monaca app.
<div id="fb-root"></div>
</body>
<script>
  document.addEventListener('deviceready', initApp, false);

  function initApp() {
    // Login
    facebookConnectPlugin.login(["public_profile"], fbLoginSuccess, function (error) {
      alert("" + error)
    });
  }

  var fbLoginSuccess = function (userData) {
    alert("UserInfo: " + JSON.stringify(userData));

    // Get email and friends 
    facebookConnectPlugin.api(userData.authResponse.userID + "/?fields=id,email,friends", ["email", "user_friends"], function (result) {
      alert("Result: " + JSON.stringify(result));
    }, function (error) {
      alert("Failed: " + JSON.stringify(error));
    });
  };

</script>

</html>



■参考情報


・Wizcorp/phonegap-facebook-plugin
https://github.com/Wizcorp/phonegap-facebook-plugin


■お知らせ


Monacaチームでは現在、新規開発メンバーを大募集中です。詳しくはこちらを参照ください!
https://ja.monaca.io/careers.html