Facebook ActionScript Graph API ( 1 ) 取得認證與授權，以及登入

首先準備幾件事：第一，下載Adobe ActionScript 3 SDK for Facebook Platform API，裡面有原始檔，SWC，Docs，Examples，是個規模還算小的API，所以其實花點時間就看完了。第二，雖然Adobe上面有一系列介紹文章，建議可以先開發AIR應用，再將程式碼改為WEB App.，但我試過好像也沒多方便，所以還是習慣丟到網站上測試。要在網路上測試，當然要安裝Flash Player Debug版，還要有個可以讀取Flash Log的工具，例如Vizzy Flash Tracer。第三，開一個測試App.，在"網站"裡面設定好Site URL，以及"Facebook整合"裡面的Canvas Page與Canvas URL，我們等等會練習一般Web連結Facebook，以及Facebook上IFrame App.的認證授權與登入。最後將"應用程式 ID"複製下來，接下來會用到。

外部Web連結Facebook

html
由於這個AS3 API會透過之前介紹的JavaScript SDK去做一些事情，因此之前說過需要在html上加的兩樣東西也要加上。第一個，include這個js檔：

src="http://connect.facebook.net/en_US/all.js"

中文版可以改成：

src="http://connect.facebook.net/zh_TW/all.js"

第二個是加上這個div：

而Flash要正常呼叫ExternalInterface需要設定好Embed id，如果透過swfObject來embed，要設定attributes(最後一個參數)的name。如果是Progression，則progression.js會自動幫你設定一個，因此不用特地去設定。
設定好之後就可以進入ActionScript的部分了。

ActionScript
在這個API中，我們幾乎都是透過com.facebook.graph.Facebook這個Class來操作，先將它import進來。接著進入頁面的時候我們就要先對這個API初始化，同時做認證與授權的動作。只要執行一行程式：

Facebook.init(_appID, initHandler);

Facebook不需要產生實體，直接呼叫它的init方法，第一個_appID就是之前我們複製過來的"應用程式 ID"，initHandler是個callback function，接著就來設定它：

private function initHandler(result:Object, fail:Object):void 
{
  if (result)
  {
    trace("result.uid = " + result.uid);
    //若曾經登入過，這邊就可以取得session，可以執行自動登入的動作
  }else {
    
  }
}

這個function必須設定兩個輸入參數，兩個都設為Object。Facebook.init()無論如何會先初始化API，然後如果user最近有登入過這個App.，這邊就可能可以取得session，result就會是個com.facebook.graph.data.FacebookSession類別。result.uid就可以取得user的user id。若有取得session，其實就完成登入的動作了，我們接著可以執行登入後的所有步驟。但若是第一次進來，或上次登入的時間已經很久了，result就會等於null。如果我們希望user一定要按"登入"或"連結Facebook"之類的按鈕才能進行之後的步驟，這邊也可以不做任何處理。
接下來我們放一個"登入"的Button，Click後執行：

Facebook.login(loginHandler, {perms:"user_about_me, user_photos"});

loginHandler一樣是callback function，第二個參數可以輸入data，perms是當要求授權時希望user同時同意的extended permissions，用逗號隔開。這邊應該盡量要求越少越好。loginHandler與initHandler差不多：

private function loginHandler(result:Object, fail:Object):void 
{
  if (result)
  {
    trace("result.uid = " + result.uid);
    //處理登入後的動作
  }else {
    
  }
}

到這裡，如果有跳出授權的popup window，允許後成功trace出user id的話，就大功告成了！很簡單吧！兩個指令，兩個處理函式，就完成登入的動作。之前使用過Facebook Connect的人，應該感動到想哭了吧！除了uid，另一個更重要的東西是access_token了，因為uid用me或me()就可以取代了。access_token可以在登入時由result.accessToken取得，之後也可以經由 Facebook.getSession() 先取回FacebookSession，後面再接.accessToken就可以了。
登入後也可以加個"登出"的Button，Click後執行：

Facebook.logout(logoutHandler);

logoutHandler再去處理登出後要做的事就可以了。

IFrame App.

就是套上Facebook外框，網址為 http://apps.facebook.com/xxxxxx/ 的App.。前面已經先請大家設定好了。這種App.通常授權時我們不使用popup window的方式，而是在一開始直接轉到授權頁去要access_token，之後就不會再放"登入"或"登出"的Button，這是因為外面已經套了Facebook的外框了，使用者經驗的問題。當然我們可以先放些App.的簡介，等到user大概知道這是怎樣的App.，再用一個"進入"或"開始使用"的Button去要授權。
html
html除了之前應該加的三個地方，我們要多寫一個JavaSctipt function，這樣使用上比較靈活：

function redirect() {
  var addID = "xxxxxxxxxxxxxxxx";
  var permission = "user_about_me, user_photos";
  var canvas = "xxxxxx";
  var params = window.location.toString().slice(window.location.toString().indexOf('?'));
   top.location = 'https://graph.facebook.com/oauth/authorize?client_id='+addID+'&scope='+permission+'&redirect_uri=http://apps.facebook.com/'+canvas+'/'+params;
}

這是個會轉到授權頁要求授權，成功後轉回App.網址的function，請輸入addID，需取得的permission，canvas則是App.網址 http://apps.facebook.com/ 後面接的路徑名稱，每個App.就改這三個參數就好了。params則是網址上面如果有帶其他參數，授權完轉回App.時也會再帶回來。這邊也可以不管三七二十一就直接去呼叫redirect()，但我們把呼叫它的工作放到Flash裡面。

ActionScript
如果我們希望一進Flash就檢查是否能取得session，取不到就執行轉到授權頁的動作。這時候就盡量放在讀取大檔案之前。假設我們有個preloader.swf會去讀取index.swf那麼就在preloader.swf要去讀取index.swf之前加上：

Facebook.init(_appID, initHandler);

而initHandler則是：

private function initHandler(result:Object, fail:Object):void 
{
　　if (result)
　　{
　　　　//讀取index.swf
    }else {
      ExternalInterface.call("redirect");
    }
}

如果能取得session，就直接進入index，否則呼叫JavaScript轉到授權頁。
假設流程改成前面所講的，先讓user看一些App.的簡介再讓他進入，就可以先讀取index.swf，在index.swf一進入時執行：

Facebook.init(_appID, initHandler);

initHandler改成：

private function initHandler(result:Object, fail:Object):void 
{
　　if (result)
　　{
　　　　//直接進入App.內容
    }else {
      
    }
}

若能取得session就讓user直接進入App.內容，否則放個"開始"之類的Button，Click後執行：

ExternalInterface.call("redirect");

這樣就可以了。

最後補充一點，Facebook的init、login、logout等都需要透過ExternalInterface呼叫JavaScript SDK，因此在使用時最好加上個判斷：

if (ExternalInterface.available)
{
　　Facebook.init(_appID, initHandler);
}

這樣就比較不會在local端發布時出問題啦。

上一篇文章：Facebook ActionScript Graph API ( 0 ) Graph API與Facebook官方文件介紹
下一篇文章：Facebook ActionScript Graph API ( 2 ) Graph API的GET、POST與DELETE