使用fb:swf所要注意的几点

参考地址: http://wiki.developers.facebook.com/index.php/Fb:swf

1. 当前fb:swf标签使用Flash版本为9.0.115

2. 参数”flashvars”必须小写。Facebook只认小写的”flashvars”,不认”flashVars”.

3. 目前Facebook使用fb:swf标签,它会把flash包装在一个div中,所以尽管embed/object标签不是block-level(关于block_level,请点击这里), 但如果连续的使用<fb:swf>标签,后来的flash内容会盖在前一个的上面。(官方的wiki是这样描述,事实上本人做实验时,却发现它们是纵向排列的,不知道算bug,还是FB已经改了)

4. Facebook把allowScriptAccess设置为none阻止Flash访问外部的JavaScript。如果要引用外部的js,需使用flash的localconnection和fb:fbjs-bridge标签。

5.通过以下步骤验证flash是不是由Facebook页面加载,

a. 通过Application.application.parameters获取所有以fb-sig为前缀的参数(不包括fb-sig本身)

b. 去掉fb-sig前缀

c. 将先前去掉前缀的参数组成param1=value1param2=value2param3=value形式的字符串,以参数名称排序(而不是参数的值),注意不要添加“&”符号。

d. 分别将c中得到字符串和fb-sig参数传给存储了app secret key的app server

e. 在app server端,将app secret key加在c中得到字符串后面,于是得到param1=value1param2=value2param3=valueappsecretkey

f. 使用MD5算法对e返回的字符串进行加密,返回MD5后的哈希值

g. 把f中得到的哈希值与fb_sig进行比较,相等说明flash是由Facebook页面加载的,不等说明是由非Facebook页面加载的。

例:

<fb:swf swfbgcolor=”000000″ imgstyle=”border-width:3px; border-color:white;” swfsrc=’http://www.youtube.com/v/xxxxxxxxxx&#8217; imgsrc=’http://img.youtube.com/vi/xxxxxxxxxx/2.jpg&#8217; width=’340′ height=’270′ />

注意: width和height最好别用百分数,否则会出现很奇怪的现象。如果fb:swf标签用在profile页面imgsrc属性是必须(虽然它有默认值,但估计你不会想用它),因为profile页面中的flash是不会自动播放,需要点击img后才播放。但在canvas页面中flash是自动播放,所以不需要imgsrc。

flash fbml facebook application(翻译)

参考地址:

http://www.adobe.com/devnet/facebook/articles/facebook_architecture_overview_05.html#swf_fbml

除了在iframe中嵌入Flash app外,我们还可以使用FBML的<fb:swf>标签将Flash包含在FBML app中。使用FBML app的好处就是我们更简单的构建app,只需要向Facebook server返回FBML(Facebook server会解析FBML标签). 坏处是用于显示和用于逻辑的代码会出现在很多地方,如swf文件,app server page中以及返回给Facebook server的FBML中,这样会使代码很凌乱不好维护。参考Comparing iFrame and FBML Flash Facebook applications 获取更多信息。


图 4. A Flash FBML Facebook application

1. 用户在Facebook上请求app; 浏览器向Facebook server发出请求。

2. Facebook server向app server发出请求, 请求一般由app server page处理(PHP,ColdFusion或JSP).Session信息会随着POST URL(与iframe的GET URL相反)发送给app server。

3. app server page引用数据库或其他需要的服务, 包括Facebook的REST API. 
和iframe一样server-side页面使用library引用Facebook API以及生成引用标识。因为是通过Facebook server代理,所以在返回用户浏览器之前,和iframe app的过程不同(先由iframe app向Facebook server发送请求,Facebook server返回给iframe app,再由iframe app返回给浏览器)FBML直接请求Facebook server,然后Facebook server直接返回到浏览器。
FBML中有很多组件,如fb:name可以取得用户姓名,fb:profilepic可以取得头像等等。我们可以在app server中直接返回这些FBML标签,Facebook server会将它们解析成HTML/JS返回给浏览器.但有时我们却不得不自己引用某个api,比如取得好友生日,因为没有有类似功能的FBML标签。

4. Facebook server向app server返回XML或JSON格式的数据。

5. app server向Facebook server返回包含了HTML/JS和FBML标签的页面。

6. Facebook server返回解析之后的HTML/JS页面,其中包括了由<fb:swf>标签指定的swf的引用。

7. 浏览器再次发出请求,请求嵌入的swf文件。

8. app server返回swf文件。

当用户与app交互时,会发生以下事情:

1. 使用ActionScript 3.0 Library直接引用Facebook server API(9-10步)。

2. 如果想存储数据或其他与后台交互的工作,我们可以在AS代码使用RPC调用app server(9,10步)。基于Flex构建的flash平台包含有 HTTP, web service以及Flash Remoting requests。速度最快代价也最小的方式是Flash Remoting,它使用 Action Message Format (AMF)二进制格式在server和Flash之间传输数据。图中没显示的还包括app server直接引用Facebook server API。

flash iframe facebook application(翻译)

参考地址:

http://www.adobe.com/devnet/facebook/articles/facebook_architecture_overview_04.html#swf_iframe

之前我们已经介绍了一般的iFrame和FBML app的流程,现在我们来看下怎样将Flash整合到app中。虽然我们可以构建一个混合多语言(包括HTML/JavaScript/ActionScript)的app,但在本例中为了简单起见,我们会把精力集中在构建整站都是Flash内容的app上。混合的app可以同时引用server端API以及client端API(如JavaScript API,以及本篇稍后将讨论的ActionScript API)。

我们可以将app的swf并入到iFrame或FBML中。图3展示了iframe app更为简单直接的嵌入方式。

图3. 基于Flash的iframe app结构

1. 用户在facebook站点上访问app;浏览器向facebook server发送HTTP request。

2. Facebook server返回包含了Facebook chrome和iframe标签的HTML/JS页面。

3. 用户浏览器向app server请求iframe中的页面以显示,与之前请求的是server page不同,这次是包装了swf文件的HTML wrapper。注意session信息会和普通的iframe app一样都以GET URL的形式传送给app server,server 的html wrapper将这些信息解析后以flashVars形式传给swf。Swf中的AS代码就可以使用它们直接引用Facebook server的API。

4. app server向用户浏览器返回HTML/JS页面,并在iframe中显示。

5. 用户浏览器再次向app server发出请求,请求HTML页面中的swf文件。

6. app server返回swf文件。

当用户与app交互时,swf向Facebook server或app server发送异步请求。

1. swf中的AS代码直接引用Facebook server API(7,8步)。参考官方ActionScript API

2. 由于Flash player的安全限制,swf只能请求相同域或在crossdomain文件中规定了允许本域访问的域中的数据。当swf访问Facebook server时,Facebook server必须持有让swf所在域访问的crossdomain策略文件。参考Facebook cross-domain policy file,Facebook server允许所有的域访问

     <cross-domain-policy>
      <site-control permitted-cross-domain-policies="master-only"/>
      <allow-access-from domain="*"/>
     </cross-domain-policy>

3. 当swf访问Facebook server时,我们需要传递api key以及引用标识(与之前的iframe和FBML app一样)。但这次我们只要关心API key和secret key,ActionScript library会处理生成引用标识。

不要将API key和secret key硬编码在程序中,因为swf可以通过反编译软件被编译,这样API key和secret key就比较危险。我们可以在swf中做一个安全的请求去请求包含相关key值的文件,之后使用这些值生成引用标识然后去引用Facebook server。

引用标识包括引用Facebook 方法所需的参数,session的MD5哈希值,app的api key以及其他信息、

4.如果想存储数据或做其他后台交互的工作,我们可以在AS代码使用RPC调用app server(9,10步)。基于Flex构建的flash平台包含有 HTTP, web service以及Flash Remoting requests。最快并且代价最小的引用是Flash Remoting,它使用 Action Message Format (AMF)二进制格式在server和Flash之间传输数据。图中没显示的还包括app server可以直接引用Facebook server API。

fbml facebook application(翻译)

参考地址:

http://www.adobe.com/devnet/facebook/articles/facebook_architecture_overview_03.html

现在我们知道怎么处理iFrame app了,那接着我们看看FBML app是怎么工作的。与iframe中将app作为独立的实体相反,FBML app只是Facebook server返回HTML页面的一部分。Facebookserver代理了app中向app server发出的所有请求。app server除了返回部分HTML/JS页面外还返回FBML标签,Facebook server会将这些FBML标签解析成HTML/JS页面,然后返回给用户浏览器。


图2. FBML app结构

1. 用户在facebook站点上访问app;浏览器向facebook server发送HTTP request。

2. Facebook server向app server发送请求,请求通过会由app server页面处理(PHP,ColdFusion或JSP). Session信息会随着POST URL(与iframe的GET URL相反)发送给app server。

3. app相关的页面会引用数据库或其他需要的服务,包括引用Facebook的REST API。API调用必须包含包括app的api key和引用标识(signature)在内的验证信息,应用标识由发送的参数,当前用户的session key生成的MD5哈希值,app的secret key以及其他信息组成。

和iframe一样server-side页面使用library引用Facebook API以及生成引用标识。因为是通过Facebook server代理,所以在返回用户浏览器之前,和iframe app的过程不同(先由iframe app向Facebook server发送请求,Facebook server返回给iframe app,再由iframe app返回给浏览器)FBML直接请求Facebook server,然后Facebook server直接返回到浏览器。

FBML中有很多组件,如fb:name可以取得用户姓名,fb:profilepic可以取得头像等等。我们可以在app server中直接返回这些FBML标签,Facebook server会将它们解析成HTML/JS返回给浏览器.但有时我们却不得不自己引用某个api,比如取得好友生日,因为没有有类似功能的FBML标签。

4. Facebook server向app server返回XML或JSON格式的数据。

5. app server向Facebook server返回包含了HTML/JS和FBML标签的页面。

6. Facebook server向用户浏览器返回HTML/JS页面显示。

当用户与app交互时,会发生以下事情:

1. 如果app有链接到新的页面,重复第1到6步。

2. 和iframe app一样,在app中使用JavaScript发送异步请求。

注意

在FBML app中,异步的JavaScript请求必须在fb:iframe中发送。 阅读更多 »

IFrame Facebook Application(翻译)

参考地址:

http://www.adobe.com/devnet/facebook/articles/facebook_architecture_overview_02.html

(FACEBOOK APPLICATION是在基于Facebook Api运行的应用程序, 本文中简称为app)

当用户访问Facebook app时(比如http://apps.facebook.com/someapp),Facebook的server会针对app的类型(iFrame或FBML)对用户的请求做不同的处理。如果是iframe类型的app,Facebook server会返回一个Facebook的页面,页面的chrome(这里不是指谷歌的浏览器,chrome包括顶部的菜单,右边的广告栏,底部的状态栏和相关的快捷方式和中间的content部分)中的content就是加载了用户app的iframe。


图1.Iframe app的结构

1. 用户在facebook站点上访问app;浏览器向facebook server发送HTTP request。

2. Facebook server返回包含了Facebook chrome和其中的iFrame HTML标签的HTML/JavaScript (JS)页面。

3. 用户浏览器向app server发送请求以以显示iFrame中的内容,一般都是app的页面(如php,ColdFusion或JSP)。Session信息会被包含在GET URL中,app server就会知道是什么用户在从Facebook上发出了请求。

4. app相关的页面会引用数据库或其他需要的服务,包括引用Facebook的REST API。API调用必须包含包括app的api key和引用标识(signature)在内的验证信息,应用标识由发送的参数,当前用户的session key生成的MD5哈希值,app的secret key以及其他信息组成。一般来说,引用标识会在server端页面生成,之后该页面使用相关的library代码引用Facebook。目前Facebook官方支持的library有PHP5,JavaScript和ActionScript3.0, 其他的一些library都是由community开发完成。

5. Facebook server向app server返回XML或JSON格式的数据。

6. app server向用户浏览器返回HTML/JS页面,之后在IFrame中显示。

当用户与app交互时,会发生以下事情

1. 如果app有链接到新的页面,重复第3和第6步。

2. 或者app中包含有异步的JavaScript引用(ajax),那么第7和10步会执行,与 之前返回新的页面不同的是这次返回XML或JSON格式的数据,这些数据会由页面的JavaScript处理。

3. 还一种选择是在app页面中使用JavaScript直接引用Facebook server(第11和12步)。Facebook官方支持JavaScript Client API。你可以把一系列单个的API引用分组到一个向Facebook发出的HTTP request里。这种方法有好处也有坏处,它减少了向Facebook server发出的HTTP request总数,但它需要app将许多页面结合在一起,这样导致页面十分复杂。