Facebook Webアプリを作る際に便利なFacebook JavaScript SDKというものはご存知でしょうか。

これを使うと、クライアント側の認証やFBのAPIの呼び出しを簡単にJSで実現できます。
ただしSDKのロードは非同期に行われるため、コールバック等の扱いがやや複雑になります。特にrequireJSと組み合わせると、自作のモジュールの読み込みもasyncになるため、FB SDKのasyncのロードと整合性を合わせる必要があります。

今回はFB SDK+requireJSを使って、主にSDKロードからユーザーのログイン周りの処理の方法を紹介します。

典型的なFB Webアプリの起動時の処理の例。

1. ユーザーがWebアプリにアクセスする
2. FB SDKが非同期にロードされる
3. アクセスしているユーザーがログインしているかどうかチェックするFB.getLoginStatus()を呼び出す
4. loginStatusの結果に応じてログインしているユーザーにはloginSuccessCallbackを呼び出し、ログインしていないユーザーにはloginFailCallbackを呼び出す

一応、requireJSを使用してSDKをロードする方法は公式のガイドに載っています。
https://developers.facebook.com/docs/javascript/howto/requirejs

ただ、上記の例はセッティングレベルの話で、実際にloginStatusCheckにcallbackを渡すにはもう少し記述が必要です。一つの実装例として以下紹介です。

FB SDKのrequireJSによる非同期ロード
requireJSのconfigの記述に以下を追加します。

requirejs.config({
    paths: {
        "facebook": "//connect.facebook.net/en_US/all"
    },
    shim: {
        "facebook": {
            exports: "FB"
        }
    }
});

これによって、require([“facebook”])と記述した時にsdkをロードしてくれます。requireJSを使わない場合はscriptタグを動的にDOMに追加するような記述を自分でしなくてはいけないので、それと比べるととてもきれいに書けますね。(requireでももちろん内部的にはscriptタグを動的にDOMに追加してますが。)

FB.getLoginStatus()を呼び出して、ステータスに応じてcallbackを記述する
requirejsのmainで指定しているscriptの中でrequire([“facebook”])をすればSDKはロードされるのですが、今回はcallbackを渡せるようにもう一つ別のJSファイル(fbInit.js)を作ります。

fbInit.js

define("{your_namespace}/fbInit", ["facebook", "jquery"], function(facebook, $){
    FB.init({
        appId      : '1437481033176694',
        cookie     : true, 
        xfbml      : true,
        version    : 'v2.0'
    });

    var fbInit = window.fbInit = {
        loginSuccessCallback: null,
        loginFailCallback: null,
        logoutSuccesCallback: null,

        statusChangeCallback: function(response) {
            if(response.status === 'connected'){
                // login成功時の処理
                if(this.loginSuccessCallback){
                    this.loginSuccessCallback(response);
                }
            }else{
                // login失敗時の処理
                if(this.loginFailCallback){
                    this.loginFailCallback(response);
                }
            }
        },

        checkLoginState: function(onLoadCallback) {
            FB.getLoginStatus($.proxy(function(response) {
                this.statusChangeCallback(response);
                // ログインチェックが行われた時の処理
                if(onLoadCallback){
                    onLoadCallback();
                }
            }, this));
        },

        logout: function(){
            FB.logout($.proxy(function(response) {
                this.statusChangeCallback(response);
                // ログアウト時の処理
                if(this.logoutCallback){
                    this.logoutCallback(response);
                }
            }, this));
        }
    };
    return fbInit;
});

上記のfbInit.jsがrequireされた時に、facebook SDKがロードされFBというグローバル変数を使えるようになります。fbInitはcallbackをそれぞれ登録できるようにしており、それぞれ登録されていれば呼んであげます。
window.fbInitに代入しているのは、HTMLで定義したボタンから直接アクセスできるようにするためです。これにより以下のようにHTMLのログイン・ログアウトボタンは記述できます。

Login用のボタン

<fb:login-button size="large" scope="public_profile,user_friends" onlogin="fbInit.checkLoginState();"></fb:login-button>

Logout用のリンク

<a href="javascript:;" tabindex="-1" onclick="fbInit.logout();">Logout</a>

最後にcallbackを登録するmainのJSでの処理です。

require([
    "jquery",
    "{your_namepace}/fbInit"], 
    function($, fbInit) {
        fbInit.loginSuccessCallback = function(response){
            // ログイン完了しているユーザーがアクセスした時の処理
        };
        fbInit.loginFailCallback = function(response){
            // ログインが完了していないユーザーがアクセスした時の処理
        };
        fbInit.logoutCallback = function(){
            // ログアウトされた時の処理
        };
        fbInit.checkLoginState(function(){
            // 初期ロード時のユーザーのログイン状況のcheckが終わった時の処理
        });
});

fbInitをrequireしてcallbackに代入していくだけです。
あとはアプリを書き始めればOK!


Categories: JS

Related Posts

JS

Mithril.js ソースコードリーディング前編〜Virtual DOMの実装を理解する 〜

前回はBackbone.jsの社内コードリーディング会でした。今回はVirtualDOMの軽量ライブラリとして少しずつ人気が出てきている気がするMithril.jsに関して行いますので、リーディング時のメモです。 Mithril https://lhorie.github.io/mithril/ ソースコード(執筆時点v0.2.0 2015/07/18) https://github.com/lhorie/mithril.js/blob/master/mithril.js Virtual DOMの実装は約300行でそこが今回のソースコードリーディングのメインとなります。 今回はそのbuild()周りを見てきます。バージョンは現時点で最新のv0.2.0です。 ビール片手にリーディングしつつ、確認程度にメモを見ていただければ。

JS

vulcanizeでPolymer Web Componentsの初期ロードを速くする

この記事はPolymer Advent Calendar 22日目の記事です。 まず、、Polymerのアドベントカレンダー全然人気ないw まさかの22日目にして初めの一稿です。 なぜでしょう?半年前に登場した時は結構注目を浴びていた気がしたのですが。。Web Componentsの思想は世界的にも支持されているとは思いますが、polyfillであるpolymerは時期尚早だったのでしょうか。 個人的な意見ですが、多分対応ブラウザの問題とか学習コストが地味に多いとかもありますが、やっぱりpolyfillの実装のせいで若干遅かったりコンポーネントのロードが遅かったり等パフォーマンスに関する不安がPolymerがいまいち世間で採用されていない理由の大きい要素なのかなと思います。実践投入を考えるとパフォーマンスは非常に重要ですからねぇ。 だた、もしパフォーマンスが改善されれば、そこそこ実践で使う方も増えてくるのではないでしょうか? ちなみに余談ですが、現在preview段階のv0.8.0ではpolymer自体のファイルサイズが87%減するらしいです。(不思議なくらいの激減w) 参考: Polymer v0.8.0 Preview 所感 http://havelog.ayumusato.com/develop/webcomponents/e635-polymer_080_preview.html さて、そんなこんなで今回はPolymerで作ったページの初期ロードパフォーマンスを劇的にアップすることができるvulcanizeというツールを紹介します。

JS

Vue.jsのOpen Slack invitationテスト

slackinを使ったVuejs日本ユーザーの情報共有やdiscussionなどを行うためのオープンSlack invitation用テストページ! https://vuejs-jp-slackin.herokuapp.com/ 以下のボタンをポチりしてJOINしてみてください。