007 Facebook Open Graph 相關開發簡單介紹 公開版

Open Graph API介紹

Bruce2012/7/30雲端線上科技股份有限公司

12年8月2日星期四

Open Graph API介紹很粗略&片段的介紹 請鞭小力⼀一點... (抖

Bruce2012/7/30雲端線上科技股份有限公司

12年8月2日星期四

Social Graph

12年8月2日星期四

Open Graph是什麼

Open graph allows apps to model user activities based on actions and objects.

12年8月2日星期四

Open Graph的組成

Actions and Objects

Open Graph Mechanics

Social Channels

issuing a HTTP POST to the user's /me/myapp:cook connection with the URL of the recipe object.

各種可能曝光的地方：Timeline, News Feed,

Aggregations, Requests, App Center, ...

12年8月2日星期四

Graph API是什麼

• access objects

• 對objects進行CRUD

12年8月2日星期四

Requests

• 分為兩種

• User-generated requests

• App-generated requests

12年8月2日星期四

User-generated requests 的特性

• 必須透過dialog，由user按下確認才能發

• Only available for Canvas apps

• 提示方式：紅色泡泡的notification

• 發送對象：

• 任何好友，無論有沒有裝app

• 任何有裝該app的人，無論是否為朋友

12年8月2日星期四

App-generated requests 的特性

• 呼叫Graph API 產生

• 提示方式：

• bookmark的counter

• App Center的request欄位(原本是Dashbaord)

• 發送對象：有裝app的人

12年8月2日星期四

signed_request 用途 格式 解讀

A signed_request parameter is used by Facebook to pass data to an application

Facebook傳資訊給第三方App的方法（實際上是⼀一個HTTP parameter）

12年8月2日星期四

signed_request 用途 格式 解讀

userPOST / 第三方APP

FBCanvas app

(iframe)

GET /ooxx_app

params[:signed_request]=“vlXgu64BQGFSQrY0ZcJBZASMvYvTHu9GQ0YM9rjPSso.eyJhbGdvcml0aG0iOiJITUFDLVNIQTI1NiIsIjAiOiJwYXlsb2FkIn0”

內含：user token, user info, ...

(第⼀一次load)

12年8月2日星期四

(不知道)

signed_request 用途 格式 解讀

user第三方APPFB砍掉ooxx_app

12年8月2日星期四

(不知道)

signed_request 用途 格式 解讀

userPOST / 第三方APPFB砍掉ooxx_app

嘿！某某user把你移除了喔

12年8月2日星期四

(不知道)

signed_request 用途 格式 解讀

userPOST / 第三方APPFB砍掉ooxx_app

嘿！某某user把你移除了喔

12年8月2日星期四

signed_request 用途 格式 解讀

vlXgu64BQGFSQrY0ZcJBZASMvYvTHu9GQ0YM9rjPSso.eyJhbG

dvcml0aG0iOiJITUFDLVNIQTI1NiIsIjAiOiJwYXlsb2FkIn0

12年8月2日星期四

signed_request 用途 格式 解讀

vlXgu64BQGFSQrY0ZcJBZASMvYvTHu9GQ0YM9rjPSso.eyJhbG

dvcml0aG0iOiJITUFDLVNIQTI1NiIsIjAiOiJwYXlsb2FkIn0

分隔用的

12年8月2日星期四

signed_request 用途 格式 解讀

vlXgu64BQGFSQrY0ZcJBZASMvYvTHu9GQ0YM9rjPSso.eyJhbG

dvcml0aG0iOiJITUFDLVNIQTI1NiIsIjAiOiJwYXlsb2FkIn0

Base64url, hex encodedHMAC SHA-256 signature

驗證身分用

分隔用的

12年8月2日星期四

signed_request 用途 格式 解讀

vlXgu64BQGFSQrY0ZcJBZASMvYvTHu9GQ0YM9rjPSso.eyJhbG

dvcml0aG0iOiJITUFDLVNIQTI1NiIsIjAiOiJwYXlsb2FkIn0

Base64url, hex encodedHMAC SHA-256 signature

驗證身分用

Base64url, hex encoded JSON真正的內容 (payload)

分隔用的

12年8月2日星期四

signed_request 用途 格式 解讀

vlXgu64BQGFSQrY0ZcJBZASMvYvTHu9GQ0YM9rjPSso.eyJhbG

dvcml0aG0iOiJITUFDLVNIQTI1NiIsIjAiOiJwYXlsb2FkIn0

Base64url, hex encodedHMAC SHA-256 signature

驗證身分用

Base64url, hex encoded JSON真正的內容 (payload)

分隔用的

12年8月2日星期四

signed_request 用途 格式 解讀

<?php ...hash_hmac('sha256', $payload, $secret, $raw = true)?>

就是點.後面的那⼀一段 (尚未Base64 decode)

app secret key

算出來應該要跟點.的前面那段⼀一模⼀一樣12年8月2日星期四

signed_request 用途 格式 解讀

<?php ...hash_hmac('sha256', $payload, $secret, $raw = true)?>

signature

就是點.後面的那⼀一段 (尚未Base64 decode)

app secret key

算出來應該要跟點.的前面那段⼀一模⼀一樣12年8月2日星期四

signed_request 用途 格式 解讀

• Base64url decode後就是JSON了

• 需注意Facebook省略了結尾的=，需要自己補上

• 依照Base64的規格，要將字串長度補滿成4的倍數

12年8月2日星期四

signed_request 用途 格式 解讀payload

• Base64url decode後就是JSON了

• 需注意Facebook省略了結尾的=，需要自己補上

• 依照Base64的規格，要將字串長度補滿成4的倍數

12年8月2日星期四

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日星期四

exchange user token (server-side)

如果授權還有效這個dialog會略過

必須是你app的相關網址

授權過期的情境有...

12年8月2日星期四

按下notification後會做哪些事？

• 發含有signed_request的POST給app

• app應該負責把用過的request刪除

12年8月2日星期四

Page Tab App是啥

• 基本上還是Canvas app

• 但製作好以後，可以裝在個人或專頁的Timeline上

• 不過在各page上的Page Tab App似乎沒有獨立的app id，所以跟純Canvas相比會有更多限制

12年8月2日星期四

加入page tab app的方法

12年8月2日星期四

其他的

• 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日星期四