Facebook APIのOAuthで認証する

Facebook Developers Authenticationの項に書いてあるので、それを読めば間違いない。

  1. Facebookにlogin
  2. ここからWebsiteを登録する。
  3. 登録後、My Apps(Developer Dashboard)に登録されたSiteが表示されているはず。

fbAsyncInitを使った方が非同期で読み込むので、他の処理が邪魔されずに済むらしい。こちら

LoginしたUser Nameをalertする場合は下記のようになる。

window.fbAsyncInit = function() {
    FB.Event.subscribe('auth.login', function(response) {
        var query = FB.Data.query('select name, uid from user where uid={0}', response.session.uid);
        query.wait(function(rows) {
            alert('Your name is ' + rows[0].name);
        });
    });
    FB.init({appId: '<%= app.set('fb_appid')%>', status: true, cookie: true,
      xfbml: true});
};
(function() {
    var e = document.createElement('script');
    e.type = 'text/javascript';
    e.src = document.location.protocol +
      '//connect.facebook.net/en_US/all.js';
    e.async = true;
    document.getElementById('fb-root').appendChild(e);
}());

大雑把な説明

  1. loginしたときのeventにbind(詳しくはこちら)。引数で渡されるresponseの構造はChromeのDeveloper Toolsを起動すれば分かるけど、こちらにも簡単な説明がある。
  2. Queryを発行して名前を取得(詳しくはこちら)。Facebook Query Language(FQL)に関してはこちら

 

本当はsessionでlogin状態を管理したい。

Server側はnode.jsを使っているので、この辺はまた調査。