片段&粗略的介紹Facebook相關開發要知道的東西（部分）

1. Open Graph API介紹
Bruce
2012/7/30
雲端線上科技股份有限公司
12年8月2日星期四

2. Open Graph API介紹
很粗略&片段的介紹 請鞭小力⼀一點... (抖
Bruce
2012/7/30
雲端線上科技股份有限公司
12年8月2日星期四

3. Social Graph
12年8月2日星期四

4. Open Graph是什麼
Open graph allows apps to model user activities
based on actions and objects.
12年8月2日星期四

5. Open Graph的組成
,
eed
ws Fr, ...
e , Ne nte
m elin p Ce
：Ti ts, Ap
地方 ues
曝 光的, Req
可能 ations
各種 reg
Agg
Social Channels Actions and
Objects
Open Graph Mechanics
issuing a HTTP POST to the user's /me/myapp:cook connection
with the URL of the recipe object.
12年8月2日星期四

6. Graph API是什麼
• access objects
• 對objects進行CRUD
12年8月2日星期四

7. Requests
• 分為兩種
• User-generated requests
• App-generated requests
12年8月2日星期四

8. User-generated
requests 的特性
• 必須透過dialog，由user按下確認才能發
• Only available for Canvas apps
• 提示方式：紅色泡泡的notification
• 發送對象：
• 任何好友，無論有沒有裝app
• 任何有裝該app的人，無論是否為朋友
12年8月2日星期四

9. App-generated
requests 的特性
• 呼叫Graph API 產生
• 提示方式：
• bookmark的counter
• App Center的request欄位(原本是Dashbaord)
• 發送對象：有裝app的人
12年8月2日星期四

10. signed_request 用途 格式 解讀
A signed_request parameter is used by Facebook
to pass data to an application
Facebook傳資訊給第三方App的方法
（實際上是⼀一個HTTP parameter）
12年8月2日星期四

11. signed_request 用途 格式 解讀
FB
Canvas app
user (第⼀一次load) (iframe)
GET /ooxx_app POST / 第三方APP
params[:signed_request]=“vlXgu64BQGFSQrY0ZcJBZASMvYvTHu9GQ0YM9r
jPSso.eyJhbGdvcml0aG0iOiJITUFDLVNIQTI1NiIsIjAiOiJwYXlsb2FkIn0”
內含：user token, user info, ...
12年8月2日星期四

12. signed_request 用途 格式 解讀
user
砍掉ooxx_app
FB (不知道) 第三方APP
12年8月2日星期四

13. signed_request 用途 格式 解讀
user
砍掉ooxx_app
FB (不知道)
POST / 第三方APP
嘿！某某user把你移除了喔
12年8月2日星期四

14. signed_request 用途 格式 解讀
user
砍掉ooxx_app
FB (不知道)
POST / 第三方APP
嘿！某某user把你移除了喔
12年8月2日星期四

15. signed_request 用途 格式 解讀
vlXgu64BQGFSQrY0ZcJBZASMvYvTHu9GQ0YM9rjPSso.eyJhbG
dvcml0aG0iOiJITUFDLVNIQTI1NiIsIjAiOiJwYXlsb2FkIn0
12年8月2日星期四

16. signed_request 用途 格式 解讀
分隔用的
vlXgu64BQGFSQrY0ZcJBZASMvYvTHu9GQ0YM9rjPSso.eyJhbG
dvcml0aG0iOiJITUFDLVNIQTI1NiIsIjAiOiJwYXlsb2FkIn0
12年8月2日星期四

17. signed_request 用途 格式 解讀
Base64url, hex encoded 分隔用的
HMAC SHA-256 signature
驗證身分用
vlXgu64BQGFSQrY0ZcJBZASMvYvTHu9GQ0YM9rjPSso.eyJhbG
dvcml0aG0iOiJITUFDLVNIQTI1NiIsIjAiOiJwYXlsb2FkIn0
12年8月2日星期四

18. signed_request 用途 格式 解讀
Base64url, hex encoded 分隔用的
HMAC SHA-256 signature
驗證身分用
vlXgu64BQGFSQrY0ZcJBZASMvYvTHu9GQ0YM9rjPSso.eyJhbG
dvcml0aG0iOiJITUFDLVNIQTI1NiIsIjAiOiJwYXlsb2FkIn0
Base64url, hex encoded JSON
真正的內容 (payload)
12年8月2日星期四

19. signed_request 用途 格式 解讀
Base64url, hex encoded 分隔用的
HMAC SHA-256 signature
驗證身分用
vlXgu64BQGFSQrY0ZcJBZASMvYvTHu9GQ0YM9rjPSso.eyJhbG
dvcml0aG0iOiJITUFDLVNIQTI1NiIsIjAiOiJwYXlsb2FkIn0
Base64url, hex encoded JSON
真正的內容 (payload)
12年8月2日星期四

20. signed_request 用途 格式 解讀
就是點.後面的那⼀一段 (尚未Base64 decode)
<?php ...
hash_hmac('sha256', $payload, $secret, $raw = true)
?>
app secret key
算出來應該要跟點.的前面那段⼀一模⼀一樣
12年8月2日星期四

21. signed_request 用途 格式 解讀
signature
就是點.後面的那⼀一段 (尚未Base64 decode)
<?php ...
hash_hmac('sha256', $payload, $secret, $raw = true)
?>
app secret key
算出來應該要跟點.的前面那段⼀一模⼀一樣
12年8月2日星期四

22. signed_request 用途 格式 解讀
• Base64url decode後就是JSON了
• 需注意Facebook省略了結尾的=，需要自
己補上
• 依照Base64的規格，要將字串長度補滿
成4的倍數
12年8月2日星期四

23. signed_request 用途 格式 解讀
payload
• Base64url decode後就是JSON了
• 需注意Facebook省略了結尾的=，需要自
己補上
• 依照Base64的規格，要將字串長度補滿
成4的倍數
12年8月2日星期四

24. ruby的實作可參考：
• http://stackoverflow.com/questions/
4824035/is-there-a-facebook-credits-ruby-
on-rails-gem-out-there-yet-or-ruby-version-
of
12年8月2日星期四

25. exchange user token
(server-side)
必須是你app
的相關網址 如果授權還有效
這個dialog會略過
授權過期
的情境有...
12年8月2日星期四

26. 按下notification後
會做哪些事？
• 發含有signed_request的POST給app
• app應該負責把用過的request刪除
12年8月2日星期四

27. Page Tab App是啥
• 基本上還是Canvas app
• 但製作好以後，可以裝在個人或專頁的
Timeline上
• 不過在各page上的Page Tab App似乎沒有
獨立的app id，所以跟純Canvas相比會有
更多限制
12年8月2日星期四

28. 加入page tab app的方法
12年8月2日星期四

29. 其他的
• When over 10 people have used your
application, it will automatically be
submitted to Facebook's search index
• 用Graph API撈照片，不見能⼀一次撈完，
連續call幾次後，平均大概25張
12年8月2日星期四