Facebook Javascript SDK 認証画面を作る（getLoginStatusとLogin, Logoutボタン）

メモ下記として．
Facebook Javascript SDK (jssdk）のロードについては前回書いた．

では，実際にログインさせてみる．

まず，そのページにきた人が，Facebookへの接続状態を知るための，
FB.getLoginStatus関数。

    FB.getLoginStatus(function(response) {
        console.log(response);
        if (response.status === 'connected') {
            // FBにログインしてて，このユーザはアプリ認証もとってる．
        } else if (response.status === 'not_authorized') {
            // FBにログインはしてるけど，このアプリの認証はない．
        } else {
            // FBにログインしてない
        }
    });

サンプルコードまんまだが，この関数に渡すハンドラに
処理を書く．responseの仕様は以下の通り．

{
    status: 'connected',
    authResponse: {
        accessToken: '...',
        expiresIn:'...',
        signedRequest:'...',
        userID:'...'
    }
}

アクセストークンは，上のgetLoginStatusハンドラ内部でresponse.authResponse.accessTokenで取得できますな．
StoryEditでは，この情報を元に，ユーザ管理をしてます．
一点，このコードを書くのは，fbAsyncInitに代入する関数の内部です．
FB.initに続く形で上の関数を書いておきましょう．

ひとつの不安は，twitterとか加えたら，このUUIDのようなユーザIDがFBのものと，重複しないことを保証できるのかどうか．
確率的に万が一にもないだろうから，まぁもし起ったら個別に対応ですかね．

で，次はログイン．関数自体は

function login() {
    FB.login(function(response) {
        if (response.authResponse) {
            // connected
        } else {
            // cancelled
        }
    });
}

これをつくって，getLogingStatus内で'connected'以外なら呼び出せば良い．

しかし，これを直接使うと，問答無用でログインさせる凶悪なウェブアプリに
なってしまう．
そこで，ログインボタン！これは，プラグインを使う方法もあったんだけど，
プラグインのほうはLogoutボタンがなかったため，XFML版を利用．

<fb:login-button autologoutlink="true" perms="user_likes" size="large"></fb:login-button>

具体的にはこのコードをはるだけ．w
ログインするまえなら"Login"とでるし，
ログイン後なら，"Logout"と変更される．

至れり尽くせりのFacebook jssdk♪