Facebook ActionScript API(Mobile)を使ってログイン~投稿までやってみた

OAuth認証とかよくわからない!と思って、StageWebViewでFacebookのページを表示させることで代用しようと思いましたが、そうするとBACKボタンなどで挙動がおかしくなり、余計にややこしくなったので、やっぱりちゃんと調べてみることにしました。

事前に、Facebookの開発者登録を済ませ・ライブラリ(GraphAPI_Mobile_1_5.swc)をダウンロードしておいてください。また、Facebookへログインする際にエミュレータではうまく動作しなかったので、デバイスでデバッグすることを前提とします。
開発者登録についてはこちらの記事をご参考に。(そろそろFlashからFacebookできるようになっておこうぜ vol.1 設定編 [ #facebookjp ] | エントリー | _level0.KAYAC | flash ActionScript blog

「一から見ていくのはめんどくさい!サンプルをよこせ!」って方はこちらからどーぞ(Flash Builder Burritoのみ)。

コンポーネントの配置

とりあえず、ログイン・ログアウトボタン(loginToggleBtn)、投稿用入力フォーム(messageInput)、投稿ボタン(postButton)、デバッグ用のステートを表示するテキストエリア(outputText)のコンポーネントを配置します。

initializeイベントを登録

まずはinitializeイベントを登録します。

public static const APP_ID:String = "アプリケーションIDを入力";
protected function view1_initializeHandler(event:FlexEvent):void
{
  FacebookMobile.init(APP_ID,initCallBack);
}

protected function initCallBack(response:Object, fail:Object = null):void
{
  if (response){
    outputText.text = "ログイン中\nあなたのユーザID:" + response.uid + "\n";
    loginToggleBtn.label = "logout";
  }else{
    outputText.text = "ログインされてません\n";
  }
}

初回起動した時はもちろんログインされてないので「ログインされてません」と表示されます。
一度ログインすれば、次からは「ログイン中 あなたのユーザID:xxxxxxxxxxxxx」と表示されると思います。

ログイン・ログアウトボタン

次にログイン・ログアウトボタンをクリックしたときのイベント。

public static const APP_ORIGIN:String = "http://today-only.net/"; //テキトウなURLでOK
protected function loginToggleBtn_clickHandler(event:MouseEvent):void
{
  if(loginToggleBtn.label == "login"){
    var permissions:Array = ["publish_stream"];
    FacebookMobile.login(onLogIn,this.stage,permissions,new StageWebView);
  }else {
    FacebookMobile.logout(onLogOut,APP_ORIGIN);
  }
}		

protected function onLogIn(result:Object, fail:Object):void
{
  if(result){
    outputText.appendText("ログインに成功しました。\n");
    loginToggleBtn.label = "logout";
  }else{
    outputText.appendText("ログインに失敗しました。\n");
  }
}

protected function onLogOut(success:Boolean):void
{
  outputText.appendText("ログアウトしました。\n");
  loginToggleBtn.label = "login";
}

5行目のpermissionsについてはこちらを参照。(Permissions – Facebook開発者)
今回は投稿するだけなので”publish_stream”のみを指定しました。

loginに渡す引数は、コールバック関数、参照するステージ、先程のパーミッション、StageWebViewです。
これらを指定すると自動的にStageWebViewが作成され、ログイン・アプリの許可を承認する画面が出てきて、ログイン・承認が完了されれば自動的にStageWebViewも削除されます。

入力した内容を投稿する

最後に投稿ボタンを押して入力した内容を投稿させます。

protected function postButton_clickHandler(event:MouseEvent):void
{
  FacebookMobile.api("/me/feed",callApi,{"message":messageInput.text},"POST");
}

protected function callApi(result:Object, fail:Object):void
{
  if(result){
    outputText.appendText("投稿に成功しました。\n");
  }else{
    outputText.appendText("投稿に失敗しました。\n");
  }
}


「Hello,World!!」が投稿されました。

apiに渡す引数は、メソッド、コールバック関数、パラメータ、リクエストメソッドです。
正直、この辺はあまり詳しくないのでこちらをご参照ください。(Graph API – Facebook開発者)
APIはpermissionsで認証したものしか使用できないので気をつけましょう。

これでFacebookはバッチリですね!
今回使用したソースはこちらからダウンロードできます。(Flash Builder Burritoのみ)

この記事をブックマーク・シェアする

この記事に関連する記事

カテゴリ

コメント

コメントを残す

コメント*

コメントリンクを nofollow free に設定することも出来ます。

誤字・脱字やリンク切れなどお気づきの点がございましたら@loop0429までよろしくお願いします。

この記事の先頭へ