前回から間があいてしまってごめんなさい。今回はいよいよ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は合っているか?などを確認してください。

Picture2010-12-20.PNG

キタ━(゚∀゚)━!

アクセストークンを使って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
	{
	}
}
Picture2010-12-20 1.png

キタ━(゚∀゚)━!

他のAPIも試してみてください

http://developers.facebook.com/docs/api/

こちらのページにFacebook Graph APIの概要があります。友達一覧取得の他にもいろんなAPIを試してみてください。APIによって必要な権限が変わるので、Facebook.login(); に渡す権限の配列も適宜追加・変更してください。

ここまでのソースはこちらからDLできます。(FlashCS4 + html)

HTML5飯