Facebook, Flex, 網頁設計

Flex開發Facebook應用程式-Iframe Session取得使用者與朋友清單

梅干 2009/10/23
梅問題-flex教學-Flex開發Facebook應用程式-Iframe Session取得使用者與朋友清單
  前幾篇當中已分享,如何利用Flex Api來進行登入,並取得使用者基本資料,但各位會發現到,即時你已登入, 再連到自已所開發的apps時,還得再重新登入一次,才可取得資料,這感覺有點不太人性,因此梅干到處爬文,看到由米蘭的JASON,針對登入寫了一系列的教學文章,且相當詳細,終於也解決了此問題,現在只要使用已登入後,再連到自已的apps時,不用再重新登入,就可以直接抓取資料,梅干也把手邊的範例稍作了整理,讓使用者一登入後,就可自動的取得使用者資料與好友清單。

Step1
建立一個myApp_GetFriendList.mxml新檔案,將下方的語法貼入,並且分別將API_KEYSECRET_KEY填入,完成後再連行發佈。
myApp_GetFriendList.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute"
applicationComplete="init();"
fontSize="12" backgroundColor="0xFFFFFF">
<mx:Script>

import com.facebook.Facebook;
import com.facebook.data.users.GetInfoFieldValues;
import com.facebook.events.FacebookEvent;
import com.facebook.net.FacebookCall;
import com.facebook.data.users.FacebookUser;
import com.facebook.data.users.GetInfoData;
import com.facebook.commands.users.GetInfo;
import com.facebook.utils.FacebookSessionUtil;
import mx.controls.Alert;
import com.facebook.commands.users.GetInfo;


import mx.controls.dataGridClasses.DataGridItemRenderer;
import com.facebook.data.users.FacebookUserCollection;
import mx.collections.ArrayCollection;
import com.facebook.data.friends.GetListsData;
import com.facebook.data.friends.GetAppUserData;
import com.facebook.data.friends.GetFriendsData;
import com.facebook.commands.friends.GetFriends;
import com.facebook.net.FacebookCall;
import com.facebook.data.users.GetInfoFieldValues;


private var fbSession:FacebookSessionUtil;
private var fbook:Facebook;

private var user:FacebookUser;
private var session: FacebookSessionUtil;
private var loader:Loader;

[Bindable]
private var friends:ArrayCollection;

private var API_KEY:String = "xxx";
private var SECRET_KEY:String = "xxx";


private function init():void {
fbSession=new FacebookSessionUtil(API_KEY, SECRET_KEY, loaderInfo);
fbook=fbSession.facebook;
fbSession.login();
GetUserInfo();
GetFriendInfo();
}

private function GetUserInfo():void {
//取得使用者的名字
var getInfo:GetInfo = new GetInfo(new Array(fbSession.facebook.uid), new Array( GetInfoFieldValues.ALL_VALUES ));

var fbCall:FacebookCall = fbSession.facebook.post( getInfo );
fbCall.addEventListener( FacebookEvent.COMPLETE, fbGetInfoCompleteHandler, false, 0, true );
}

//取得使用者照片與名稱
private function fbGetInfoCompleteHandler(e:FacebookEvent):void
{
var getInfoData:GetInfoData = e.data as GetInfoData;
var fbUser:FacebookUser = getInfoData.userCollection.getItemAt(0) as FacebookUser;

//取得圖片與使用名稱
userAlumb.source = fbUser.pic_square;
userName.text += fbUser.name;
}

private function GetFriendInfo():void
{
var fbcall:FacebookCall = fbook.post(new GetFriends(null, fbook.uid));
fbcall.addEventListener(FacebookEvent.COMPLETE, onGetFriendsComplete);
}

//取得朋友清單
private function onGetFriendsComplete(e:FacebookEvent):void
{
var friendsUid:Array = new Array();
var users:FacebookUserCollection = (e.data as GetFriendsData).friends;
for(var i:int; i < users.length; i++)
{
friendsUid.push((users.getItemAt(i) as FacebookUser).uid);
}
var fbcall:FacebookCall = fbook.post(new GetInfo(friendsUid, [GetInfoFieldValues.ALL_VALUES]));
fbcall.addEventListener(FacebookEvent.COMPLETE, onGetInfo);
}

private function onGetInfo(e:FacebookEvent):void
{
var users:FacebookUserCollection = (e.data as GetInfoData).userCollection;
friends = new ArrayCollection();
for(var i:int; i < users.length; i++)
{
friends.addItem(users.getItemAt(i));
}
} </mx:Script>
<mx:Image id="userAlumb" x="10" y="10" width="60" height="60" />
<mx:Label id="userName" fontSize="16" x="78" y="46" fontWeight="bold"/>
<mx:Label text="好友清單:" x="12" y="84" fontWeight="bold"/>
<mx:DataGrid id="dgFriendList" dataProvider="{friends}" x="10" y="106" width="644" height="189">
<mx:columns>
<mx:DataGridColumn dataField="pic" width="70" headerText="圖片">
<mx:itemRenderer>
<mx:Component>
<mx:Image source="{data.pic_square}" width="40" height="40" verticalAlign="middle" horizontalAlign="center"/>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
<mx:DataGridColumn headerText="姓" dataField="last_name" />
<mx:DataGridColumn headerText="名" dataField="first_name" />
</mx:columns>
</mx:DataGrid>
</mx:Application>


Step2
在apps起始頁的<head>....</head>中貼入下方的語法:
index.html

<!-- include the API from facebook's server -->
<script src="http://static.ak.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script>

<!-- include swfobject library -->
<script type="text/javascript" src="Scripts/swfobject.js"></script>
<script type="text/javascript">
var api_key = "xxx"; //api key

//取得網址列?後面的所有參數字串
var queryString = window.location.search;
queryString = queryString.substring(1);
var fields = queryString.split('&');

//fb_sig_added這個值很重要,它指出了user有沒有認證使用你的application
var fb_sig_added = 0;

var _ra = Math.round(Math.random()*100000).toString();
var pAttrs = {id:"mainSwf"+_ra, name:"mainSwf"+_ra};

//將所有網址後的參數都原封不動帶入flashVars
var flashVars ={};
for (var i = 0; i < fields.length; i++) {
var index = fields[i].indexOf('=');
var key = fields[i].substring(0, index);
var value = fields[i].substring(index + 1);

if (key.toLowerCase() == "fb_sig_added"){
fb_sig_added = value;
}
flashVars[key] = value;
}
flashVars.api_key = api_key;
flashVars.as_swf_name="flashContent";

//如果還沒登入或還沒授權就導向
if (fb_sig_added == 0) {
window.parent.location = "http://www.facebook.com/login.php?api_key=" + api_key + "&next=&v=1.0&canvas=1";
} else {
//如果已經ok就進行facebook javascript api初始化
initFB();
}

function initFB() {
FB_RequireFeatures(["Api"], function() {
FB.Facebook.init(api_key, "xd_receiver.htm");
FB.Facebook.apiClient.requireLogin(function(exception){
//facebook api初始化之後
//產生一個FB.ApiClient實體(以後有些功能會需要它)
apiClient = new FB.ApiClient(api_key);
//呼叫一個function來載入swf
initFlash();
})
})
}

function initFlash(){
var params = {
wmode: "transparent",
menu: "false",
allowScriptAccess: "always",
scale: "noscale"
};
swfobject.embedSWF("xxx.swf", "flashContent", "740", "650", "9.0.0", "Scripts/expressInstall.swf", flashVars, params, pAttrs);

}
</script>



<body>....</body>中貼入下方的語法:
<div id="flashContent"></div>

Step3
都完成後,上傳到設定的主機中,這時候開啟自已的apps畫面,登入完畢後就會自動取得到,使用者與朋友清單了。
  其實到這邊,可以發展的東西就很多了,只剩下好友邀請資料庫的連接,這部分梅干得再花點時間研究研究,若各位知道如何製作,也歡迎你的分享,FacebookApi真是一個蠻有趣的東東,有興趣的朋友們,希望這篇對你有所幫助。
[範例下載] ※解壓縮密碼:minwt.com