1. Create App
要创建一个App,首先要进入App开发页面,然后Create New App。在创建新的App之前,必须保证自己是通过了FB开发者验证的(验证的方法有2种,一种是手机号,一种是信用卡)。
2. Configure your App
通过提供一个包含了由HTML,JS和CSS组成的App的Canvas URL来填充Canvas Page。当用户请求获取该Canvas Page的时候,FB就会将该Canvas URL伴随着一个iframe一起返回到该页面。这样的话,开发人员开发的App就会按照FB的统一框架格式显示出来。
举个例子,假如你有一个应用放在http://www.example.com/canvas,那么这个就是你的Canvas URL。当你在FB上构建你的App的时候,你必须在App Namespace这个部分指定一个Canvas Page name,这个名字会被添加到https://apps.facebook.com/后面,加入你指定的名字为test,那么当你输入https://apps.facebook.com/test的时候,FB就会加载放在http://www.example.com/canvas的内容。值得注意的是,不能通过http://www.example.com/canvas转到另外一个URL,只能直接给出响应。
一旦你创建好了自己的App,你就可以通过选择App on Facebook部分来制定一个Canvas和Secure Canvas URL。
因为App是在FB的上下文中加载的,所以在设计ui的时候,比如注意到尺寸的限制。开发人员可以在Dev App下面的Advanced Tab来修改iframe的尺寸。你可以将宽度设置为Fixed 760px,这也是默认的设置,还可以设置为Fluid,意思就是如果iframe的宽度为100%,这样的话,页面就会挨着最左边排列,如果用户改变浏览器的宽度,页面就跟着改变。高度同理。
3. Configure for App Center
一旦你配置好了Canvas,就可以开始App Center配置了。主要目的是定制App的具体的细节,比如描述,图标,截屏,还有其它一些相关的资料。
4. Authorization
为了创建一个personalized的用户体验,FB会将关于用户的一些信息发送到App去。这些信息通过一个包含了base64url编码的JSON对象的single signed_request参数被传递给Canvas URL。当一个用户首次使用app的时候,这个signed_request参数仅仅包含有限数量的用户数据: user, algorithm, issued_at。
user:一个JSON数组,包含了locale, country, age for the current user
algorithm:一个JSON字符串,包含了用于认证这个请求的机制
issued_at:一个JSON数字,包含了请求被认证的Unix时间戳
为了获取所有的用户信息,比如说FB ID,用户必须authorize该App才行。FB推荐使用OAuth Dialog来授权FB上面的应用。FB会将用户的浏览器跳转到那个Dialog页面,也就是如下的url
https://www.facebook.com/dialog/oauth? client_id=YOUR_APP_ID&redirect_uri=YOUR_CANVAS_PAGE当然,YOUR_APP_ID和YOU_CANVAS_PAGE会被更改
默认情况下,用户会被要求授权该App获取公开的基本信息,或者FB默认的。如果你的App需要更多的信息,那么你就必须发起特别的请求。要实现这个,只需要在OAuth Dialog的请求里面加入一些由逗号隔开的参数。比如如下
https://www.facebook.com/dialog/oauth?client_id=YOUR_APP_ID &redirect_uri=YOUR_CANVAS_PAGE&scope=email,read_stream具体哪些参数是干什么的,在FB的Reference里面都能找到。一般来说,你要求获取的信息越多,用户就越加不会继续使用你的App。所以最好是仅仅请求获取那些必须需要的参数,否则会适得其反。如果用户点击的 是 "Don't Allow",那么你的App就没有被授权。OAuth Dialog就会跳转到redirect_url参数中指定的路径,并且伴随着如下的错误信息
http://YOUR_CANVAS_PAGE?error_reason=user_denied& error=access_denied&error_description=The+user+denied+your+request.如果用户点击了Allow那么App就被授权成功了。接着OAuth Dialog就会将页面跳转到redirect_url参数中指定的页面。一旦授权 成功,那么signed_request参数就会包含如下的子请求:
user, algorithm, issued_at, user_id, oauth_token, expires,总之,一旦用户对该App授权了,那么就可以使用用户的页面信息和好友信息了。
5. Social Channels
FB平台提供多种方式使得用户可以从App分享自己的使用情况。FB把这些方式叫做Social Channels,App可以直接发布到用户的News Feed,向其他用户发起请求,并且可以利用FB的automatic channels。
a. Feed
一旦用户登录FB帐号,News Feed就会迅速地显示出来,App可以使用Feed Dialog来进行post。
b. Requests
可以邀请好友使用App或者请求好友干一件什么事情,例如接收一个礼物,帮助完成某项任务。用户可以通过使用Request Dialog来发送请求。可以只发送给某一个好友,也可以发送给多个好友。