そろそろFlashからFacebookできるようになっておこうぜ vol.3 認証編 [ #facebookjp ]
前回から間があいてしまってごめんなさい。今回はいよいよFacebookのOAuth認証をしてみます。
前々回の記事:そろそろFlashからFacebookできるようになっておこうぜ vol.1 設定編
前回の記事:そろそろFlashからFacebookできるようになっておこうぜ vol.2 AS&JS編
前回までのサンプル:こちらからダウンロードできます。
OAuth認証を実行!
初期化処理のコールバック関数 initCallBack に続きを書いていきましょう。
前回、成功 / 失敗と分岐していましたが、どちらの場合でも認証を実行します。
private function initCallBack(response:Object, fail:Object = null):void { tf.appendText('initCallBack\n'); if (response) { //初期化成功。 tf.appendText('Facebook 初期化に成功.\n'); tf.appendText('あなたのユーザID:' + response.uid + '\n'); } else { //初期化失敗 tf.appendText('Facebook 初期化に失敗.\n'); } tf.appendText('Facebook.login(); 認証を開始します...\n'); //セッション状態が変わった時に呼ばれる関数を設定しておきます。 ExternalInterface.addCallback('sessionChange', onSessionChangeHandler); //アプリが実行する操作範囲 (参照:Extended Permissions - http://developers.facebook.com/docs/authentication/permissions var permissions:Array = ['publish_stream']; //認証を実行します。第1引数にはコールバック関数、第2引数にパーミッションを渡します; Facebook.login(loginCallBack, {perms:permissions.join(',')}); }
OAuth認証が成功するとセッションの状態が変わります。まずそれを受け取るためのコールバック関数を設定しておきます。
次に、 Facebook.login(); を実行してOAuth認証を開始します。この関数の第1引数にはコールバック関数(セッション状態変更を受け取る関数とは別なもの)を、第2引数には「このFlashが実行する権限」を渡します。
権限について詳しくはこちらを参照してください。:http://developers.facebook.com/docs/authentication/permissions
2つのコールバック関数はそれぞれ以下のように書いておきます。
private function loginCallBack(response:Object, fail:Object):void { if (response) { tf.appendText('ログイン・認証に成功.\n'); tf.appendText('あなたのユーザID:' + response.uid + '\n'); } else { tf.appendText('ログイン・認証に失敗.\n'); } } private function onSessionChangeHandler(session:String, extendedPermissions:Object = null):void { //セッション状態に変更あり。 tf.appendText('セッション状態に変更あり.\n'); if (session) { //JSONなのでデコードします。 var response:Object = JSON.decode(session); tf.appendText('あなたのユーザID:' + response.uid + '\n'); //ここでアクセストークンを取得することができます tf.appendText('アクセストークン:' + response.access_token + '\n'); this._myID = response.uid; this._accessToken = response.access_token; //自分のIDとアクセストークンを取得しました。これでAPI使用の準備が出来ました。 } else { } }
OAuth認証によりセッション状態が変更されると、自分のユーザIDとアクセストークンを受け取ることができます。このアクセストークンはAPIを叩くための鍵のような役割をはたします。
それでは、ここまでの状態で一旦パブリッシュしサーバへアップして確認してみましょう。認証を開始すると例の画面がポップアップで開きます。うまくいかない場合はFacebookアプリケーション設定のURLやドメインの設定が合っているか?Flashが置いてあるURLは合っているか?などを確認してください。
キタ━(゚∀゚)━!
アクセストークンを使ってAPIを叩く!
OAuth認証が通ったら、早速APIを利用してみます。
各種APIを叩くには Facebook.api(); というメソッドを使います。
//Facebook.api('リクエストするAPI', コールバック関数, {access_token:アクセストークン文字列}); Facebook.api('/me/friends', loadFriendsHandler, {access_token:this._accessToken});
成功すればコールバック関数で友達一覧を受け取れます。
private function loadFriendsHandler(response:Object, fail:Object):void { if (response) { tf.appendText('友達一覧取得成功\n'); var friends:Array = response as Array; for (var i:int = 0; i < friends.length; i ++) { tf.appendText(friends[i].name + 'さん ユーザid:' + friends[i].id + '\n'); } } else { } }
キタ━(゚∀゚)━!
他のAPIも試してみてください
http://developers.facebook.com/docs/api/
こちらのページにFacebook Graph APIの概要があります。友達一覧取得の他にもいろんなAPIを試してみてください。APIによって必要な権限が変わるので、Facebook.login(); に渡す権限の配列も適宜追加・変更してください。
ここまでのソースはこちらからDLできます。(FlashCS4 + html)