Asial Blog

Recruit! Asialで一緒に働きませんか?

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

カテゴリ :
Monaca
タグ :
JavaScript
Facebook

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



必要なもの



  • Monacaのアカウント
  • Facebookアプリ
  • OpenFB


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



Facebookアプリ



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




Facebookアプリ

Facebookアプリ



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





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




Facebookアプリの設定

Facebookアプリの設定



OpenFB




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

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



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



Monacaアプリを作成



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



  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  6.     <script src="components/loader.js"></script>
  7.     <link rel="stylesheet" href="components/loader.css">
  8.     <link rel="stylesheet" href="css/style.css">
  9.     <script src="js/openfb.js"></script>
  10.     <script src="js/jquery.min.js"></script>
  11.     <script src="js/app.js"></script>
  12. </head>
  13. <body>
  14.   <br />
  15.   <br />
  16.   <br />
  17.   <a class="fb-login" href="#">Facebookログイン</a>
  18.   <a class="fb-logout" href="#">ログアウト</a>
  19.   <div class="profile">
  20.     <div class="name"></div>
  21.     <div class="image"></div>
  22.   </div>
  23. </body>
  24. </html>

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



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

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



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

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



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



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



  1. var fb_init = function () {
  2.     openFB.api({path: '/me', 
  3.         success: function (me) {
  4.             $(".fb-login").hide();
  5.             $(".fb-logout").show();
  6.             $(".profile .name").text(me.last_name + " " + me.first_name);
  7.             $(".profile .image").html($("<img />").attr("src", "http://graph.facebook.com/"+me.id+"/picture?type=small"));
  8.         },
  9.         error: function (err) {
  10.             $(".fb-logout").hide();
  11.             $(".fb-login").show();
  12.             $(".profile .name").empty();
  13.             $(".profile .image").empty();
  14.         }
  15.     }); 
  16. };
  17. fb_init();

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



  1. // Facebookログイン
  2. $(".fb-login").on("click", function () {
  3.     openFB.login(function (data) {
  4.         fb_init();
  5.     }, {scope: 'email,read_stream,publish_actions'});
  6. });
  7.  
  8. // Facebookログアウト
  9. $(".fb-logout").on("click", function () {
  10.     openFB.logout(function () {
  11.         fb_init();
  12.     });
  13. });

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



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



  1. var onDeviceReady = function () {
  2.     openFB.init({appId: '999999999999', tokenStore: window.localStorage, accessToken: window.localStorage.accessToken});
  3.     $(".fb-login").on("click", function () {
  4.         openFB.login(function (data) {
  5.             fb_init();
  6.         }, {scope: 'email,read_stream,publish_actions'});    
  7.     });
  8.     
  9.     $(".fb-logout").on("click", function () {
  10.         openFB.logout(function () {
  11.             fb_init();            
  12.         });
  13.     });
  14.     
  15.     var fb_init = function () {
  16.         openFB.api({path: '/me', 
  17.             success: function (me) {
  18.                 $(".fb-login").hide();
  19.                 $(".fb-logout").show();
  20.                 $(".profile .name").text(me.last_name + " " + me.first_name);
  21.                 $(".profile .image").html($("<img />").attr("src", "http://graph.facebook.com/"+me.id+"/picture?type=small"));
  22.             },
  23.             error: function (err) {
  24.                 $(".fb-logout").hide();
  25.                 $(".fb-login").show();
  26.                 $(".profile .name").empty();
  27.                 $(".profile .image").empty();
  28.             }
  29.         }); 
  30.     };
  31.     fb_init();
  32. };
  33.  
  34. document.addEventListener("deviceready", onDeviceReady, false);

OpenFBを一点修正



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



  1. tokenStore.removeItem('fbtoken');
  2. //  ↓
  3. tokenStore.removeItem('fbAccessToken');

動かしてみる



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



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




ログイン画面

ログイン画面



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




ID、パスワード入力

ID、パスワード入力



2段階認証も使えます。




2段階認証

2段階認証



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




ログイン完了

ログイン完了



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




ログアウト後

ログアウト後



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




Facebookログイン動画

Facebookログイン動画






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

コメント

  • yt

    記事のソースを実装し、実行したところFacebookアプリ側の設定でエラーがでてしまいます。

    エラー内容-------
    指定されたURLは、アプリケーションの設定で許可されていません。: 指定されたURLの中にアプリの設定で認められないものが含まれています。ウェブサイトまたはキャンバスのURLと一致しているか、ドメインがアプリのドメインのサブドメインである必要があります。
    -------------------------------------

    > 後はデフォルトのままで良いかと思います。
    こちら、せめてsettings/advanced/の項目だけでも全て記載していただくことは可能でしょうか。
    また、FacebookではAPI仕様がよく変更になる為、APIのバージョンを明記していただけると助かります。

  • pt

    あなたの方法でfacebook loginをiosで実現しました。
    ところが、androidでは動作しません。
    アンドロイドでは、https://www.facebook.com/connect/login_success.htmlページの内容が顕示されています。
    原因を教えていただければありがたい。

コメントフォーム



captcha_key

アシアルの会社情報

アシアル株式会社はPHP、HTML5、JavaScriptに特化したWebエンジニアリング企業です。ユーザーエクスペリエンス設計から大規模システム構築まで、アシアルメンバーが各々の専門性を通じてインターネットの進化に貢献します。

会社情報詳細

最近の記事