StoryEdit 開発日誌

ウェブアプリ StoryEditを作ってましたが延期。普通のブログ。

Facebook Javascript SDKでOAuth認証

StoryEditにFacebookによるOAuth認証を導入しました.
ユーザの管理はFacebookからもってきます.そっちのが楽w
時間があまればtwitterも.

それにしてもめちゃくちゃ簡単にOAuth認証が実装できてびっくり。
PythonでOAuthとかめんどいな,,,そもそもこのサーバにOAuthパッケージあるかな,,,なんて心配は無用でしたね。

Facebook Javascript SDKは,以前はgithubにおいてあって,
それをカスタマイズして自分のサーバにあげたりできたらしいのですが,
現在は,以下のコードを貼るだけで実現できます.

// こっちが,initのハンドラ
window.fbAsyncInit = function() {
	FB.init({
		appId      : '?????????????', // AppID
		channelUrl : '//www.yourdomain/channel.html', // channel.htmlのURL
		status     : true, // check login status
		cookie     : true, // enable cookies to allow the server to access the session
		xfbml      : true  // parse XFBML
	});
};

// こちらでSDKをロード
(function(d){
	var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
	if (d.getElementById(id)) {return;}
	js = d.createElement('script'); js.id = id; js.async = true;
	js.src = "//connect.facebook.net/en_US/all.js";
	ref.parentNode.insertBefore(js, ref);
}(document));

前準備としては,Facebook Developerの登録をして,自分のAppを作っておいて,AppIDを発行してもらうことです.
ここは,以下のURLにある画像を参考にしました.
http://www.goodpic.com/mt/archives2/2012/01/localhost-facebook-javascript-api.html

あと,channel.htmlというhtmlを適当な場所におきます.
channel.htmlの中身は,以下の一行だけ.

<script src="//connect.facebook.net/en_US/all.js"></script>


このall.jsってのが実質のSDKのソースになります.

マニュアルも充実していて,ほんとに楽チンでした.
(他の機能をいろいろ使いだすとダメなのかもしれませんが)

唯一手間取ったのは,一番欲しいaccess tokenが入ってるauthResponseオブジェクトを取得する部分ですかね.
FB.apiに渡すfunctionの引数responseがauthResponseだと思っていましたが,
authResponseがとれるのは,getLogingStatusに渡すfunctionの引数responseからです.

マニュアルでは,全部responseって変数になってますけど,
それぞれ実際のデータはAPIによって異なるみたいです.
ここらへんの仕様はサンプルコードにはのってなかったので,実際にとって,ダンプして確認するのが良いです.

んでこんな感じ.ログインすると,StoryEditへのリンクがONになります.

f:id:welovy:20121114054027p:plain
これだから型なしJavascriptはだからキライなんだよなw