使用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。

Advertisements

An external flash facebook website application(翻译)

参考地址:

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

图5展示了基于Facebook用户的外部flash站点的结构。与之前最大的不同是Facebook server不在代理任何浏览器的请求。开发者需在client端使用Facebook API或Facebook Connect处理用户登录。如果使用Facebook API登录,用户将被定向到Facebook站点,在Facebook登录后返回到app站点上。如果使用Facebook Connect,用户将不需要到Facebook站点上去登录。


图5,外部flash站点结构

1. 用户在app站点请求app;浏览器向app server发送HTTP request请求HTML页面或server page。

2. app server返回包含了swf文件引用的HTML/JS页面。如果使用Facebook Connect,HTML页面中会包含一些Facebook Connect初始化所需的JavaScript代码。

3. 用户请求swf文件

4. app server返回swf文件

5. AS代码向Facebook发出异步的请求,一次一个或一组请求。第一次请求需要从Facebook server的得到authorization token,在用户通过Facebook Connect登录之后, ActionScript 3.0 Lib会生成一个引用标识,以便在后来的对Facebook api引用中使用。更多信息参考前面讨论过的Flash iFrame application

6. Facebook server在app server请求时返回XML或JSON格式的数据, app处理数据。

7. 如果需要存储数据或与后台做其他交互,在AS代码中使用RPC(HTTP, web service或Flash Remoting requests)。速度最快并且代价也最小的方式是Flash Remoting requests, 它使用 Action Message Format (AMF)二进制格式在server和Flash之间传输数据。

8. 如果app server需要和Facebook继续交互,继续交互。

9. app server继续处理Facebook返回的数据。

10. app server向Flash内容返回数据。图5使用了Flash Remoting及AMF交换数据,还可使用web services及SOAP, HTTP services和text或XML。

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将许多页面结合在一起,这样导致页面十分复杂。