2011年4月29日 星期五

AS3 Class 懶人系列 之 阿Cain的 FaceBook API 2.0 讓你快速上手FB活動(一) - 登入與認證

這次是第二個版本,之前第一個版本,功能不大完整(基本上是我專案又用到我才會加功能XD )原本是直接用JS呼叫FB的API,目前這個新的版本是直接使用官方的AS3 Graph api。
雖然說原本的已經很方便很多了,不過對於API的輸出數據還是得自己整理,為了讓以後自己更方便使用,乾脆又在官方提供的API上面再包裝上自己的整理,這樣子數據的輸出就可以一目了然,而且初學者也會很容易上手。

接下來我們進入正題
首先請先下載我打包的API,裡面有主要的swc。
然後去在FB上申請一個APP,好了之後把申請的 APP ID 記下來,之後需要把他傳到程式裡面。
再來是html的部分,原本該作的還是得作,不知道的人可以參考這裡...,或是下載我的html範本參考

1.html加上這支http://connect.facebook.net/zh_TW/all.js
2.allowScriptAccess 屬性設為 always 這樣子才能執行js
3.swf的div請加上name屬性
4.body上加一個DIV 把 id="fb-root" ,這是給FB用的..

以上少一個都不行..

準備好了之後就可以開始快樂的寫as了
首先最重要的是這個 WebFaceBook Class ,總之所有的事情都靠他完成,作之前可以先稍微看一下提供的說明文件...
一開始我們必須先初始化FB的api,然後吧剛剛申請的APP ID傳進去...(是APP ID喔,不是API KEY..不要搞錯了)
private var fb:WebFaceBook = new WebFaceBook("APP ID");
fb.addEventListener(FaceBook_INIT.INIT_SUCCESS, onINIT_SUCCESS);

先new一個WebFaceBook Class,初始成功後會發出FaceBook_INIT.INIT_SUCCESS事件。
初始話好了之後,你可以你可以去看看WebFaceBook的hasLogin屬性,如果使用者已經登入的情況下,他會是true,如果為false代表使用者還未登入,如果是這樣的話,就必須要進行登入動作。

private function onINIT_SUCCESS(e:FaceBook_INIT):void 
{
     if (fb.hasLogin) 
     {
          //已經登入了
     }else 
     {
          //還沒有登入
          fb.login();
          fb.addEventListener(FaceBook_Login.LOGIN, onLOGIN);
     }
}

如果使用者已經登入了,就可以直接開始使用FB API了,但是如果沒有登入,我們必須先作一個fb.login();的動作,他會跳出一個登入的視窗與認證的視窗,登入成功後會發出FaceBook_Login.LOGIN事件。
fb.login()的時候,你可以順便加上一些認證,好讓API可以取得使用者的資料,關於認證你可以參閱Permissions物件。
例如我們需要取得使用者的基本資料,然後希望可以發文到塗鴉牆上,你可以使用以下方法登入

fb.login(Permissions.ABOUT_ME + "," + Permissions.PUBLISH_STREAM);
Permissions.ABOUT_ME可以取得使用者資料,Permissions.PUBLISH_STREAM可以讓你發佈塗鴉墙,中間用逗號隔開就好了..
認證成功後,你就可以用fb.uid取得使用者的uid,並且可以開始使用api的功能。

AS3 Class 懶人系列 之 阿Cain的 FaceBook API 2.0 讓你快速上手FB活動(二) -取得使用者資料

8 則留言:

匿名 提到...

Cain謝謝你的分享,我照你的步驟去做,
但flash出現錯誤說找不到FaceBook_INIT此type,請問我是不是有些class沒有匯入?(我只匯入WebFaceBook)
再次謝謝你的分享

Unknown 提到...

估計應該是FaceBook_INIT沒有import進來吧!

匿名 提到...

謝謝你的回答,請問一下,不是只需要匯入import Cain.facebook2.WebFaceBook;嗎?
FaceBook_INIT的類別檔路徑是?

Unknown 提到...

import Cain.facebook2.event.FaceBook_INIT

匿名 提到...

請問WebFaceBook Class有提供在下載文件中嗎?

Unknown 提到...

http://code.google.com/p/cainclass/downloads/detail?name=CainFaceBook_2.rar&can=2&q=#makechanges 請直接下載我包好的swc,關於swc的使用方法如果不瞭解可以在google查詢一下,有很多說明..

通樂超人 提到...

Cain 你的教學很詳盡,謝謝你。

不過小弟出現了錯誤訊息如下:

1.目前狀況無法使用js,請放在主機上執行..

2.Error #2067: ExternalInterface 無法在此區塊中使用。ExternalInterface 需要 Internet Explorer ActiveX、Firefox、Mozilla 1.7.5 及更新版本,或其它支援 NPRuntime 的瀏覽器。

想請教Cain了不了解這樣的錯誤?

Unknown 提到...

首先說明一下
ExternalInterface這個功能是指對swf外的js通訊的介面
會使用這個的原因是因為使用了FB的Js API,為了讓他可以跟as3通訊所以用了ExternalInterface這個物件(使用詳情可以自己去google一下...)
至於跳出這個錯誤的原因有可能,您直接在輸出時測試,因為只是輸出swf(跟你html上的js無關)所以無法使用,必須要輸出後在開啟您所嵌入的html才可以正常使用..(直接開swf是不行的喔!要開html再去看上面的swf的意思)
PS.測試FB的功能還是得放在Web服務上再用http開頭的網址去看這樣比較OK