PJCHENder 未整理筆記

[API] Facebook SDK 學習筆記

2017-09-26

[API] Facebook SDK 學習筆記

@(Web Development)[api]

整理筆記時使用 Facebook sdk v2.9

前端處理

初始化 Facebook SDK

記得在 <app_id> 的地方代入自己的 appId

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
window.fbAsyncInit = function() {
FB.init({
appId : '<app_id>',
cookie : true,
xfbml : true,
version : 'v2.9'
});
FB.AppEvents.logPageView();
};

(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/zh_TW/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

確認使用者 FB 登入狀態

1
2
3
4
// Get FB Login Status
FB.getLoginStatus( response => {
console.log('res', response) // 這裡可以得到 fb 回傳的結果
})

response 中會包含:

1
2
3
4
5
6
7
8
9
{
status:'connected',
authResponse:{
accessToken:'...',
expiresIn:'...',
signedRequest:'...',
userID:'...'
}
}

其中比較重要的 status 包含幾個狀態:

  • connected: 使用者已登入 FB,且授權你的 app 使用。
  • not_authorized: 使用者已登入 FB,但未授權你的 app 使用。
  • unknown: 使用者沒有登入 FB,或已從你的 app 中登出。

如果你拿不到 authResponse 有可能是使用者沒有登入 FB,或者他尚未授權你的 app 使用。

使用 FB SDK 登入

1
2
3
4
5
6
7
FB.login(function (response) {
console.log('res', response)
}, {
scope: 'email, public_profile',
return_scopes: true
})
}
  • scope:APP 想要取得的使用者權限
  • return_scopes:在回傳的 response 中可以得到 grantedScope 的欄位。

取得使用者資訊

使用 Facebook Graph API,記得在 fields 中代入要存取的使用者資訊:

1
2
3
FB.api('/me?fields=name,id,email', function (response) {
console.log('res in getProfile', response)
})

Graph API Request

FB 登出

1
2
3
FB.logout(function (response) {
console.log('res when logout', response)
})

後端處理

產生應用程式存取權杖

access_token 需要透過 API 另外取得:

1
2
3
4
GET /oauth/access_token
?client_id={app-id}
&client_secret={app-secret}
&grant_type=client_credentials

如果用 superagent 寫會長這樣子:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/**
* 產生應用程式存取權杖
*/
let url = 'https://graph.facebook.com/v2.9/oauth/access_token'
request.get(url)
.query({client_id: facebook.appId})
.query({client_secret: facebook.appSecrete})
.query({grant_type: 'client_credentials'})
.end((error, response) => {
if (error) {
next(error)
}
res.status(200).json(response)
})

如此將可以得到 app 的存取權杖:

1
2
3
"text": "{
"access_token":"66419***0445424|AHCdQa_*****jo9zQnxC__c9Ip4",
"token_type":"bearer"}"

取得存取權杖 @ 文件 > Facebook 登入 > 存取權杖 > 應用程式存取權杖

驗證使用者 token 是否有效(檢查存取權杖)

方法一:使用 APP Access Token

1
2
3
4
# https://graph.facebook.com/v2.9/debug_token
GET /debug_token?
input_token={input-token}&
access_token={access-token}
  • input_token:要從其取得資訊的存取權杖(client 傳進來的 accessToken)
  • access_token:應用程式存取權杖或來自應用程式開發人員的有效用戶存取權杖(透過上段方法取得的 APP accessToken)
request

superagent 寫起來會像這樣:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/**
* 取得權杖和偵錯相關資訊
**/

url = 'https://graph.facebook.com/v2.9/debug_token'
request.get(url)
.query({input_token: clientAccessToken})
.query({access_token: appAccessTokenFromAPI})
.end((error, response) => {
if (error) {
next(error)
}
res.status(200).json(response)
})
response

可以取得如下的資訊:

1
2
3
4
5
6
7
8
{
"app_id":"6641*****445424",
"application":"Simple-WebApps",
"expires_at":1497452400,
"is_valid":true,
"scopes":["email","public_profile"],
"user_id":"13094*****824623"
}

方法二:不使用 APP Token 直接呼叫 Graph API 的方式:

可以直接利用 GETendpoint 中輸入對應的 Graph API 網址;access_token 則代入 app_id|app_secrete

1
https://graph.facebook.com/endpoint?key=value&access_token=app_id|app_secret
request

使用 superagent

1
2
3
4
5
6
7
8
9
10
11
12
13
/**
* 不使用 APP Access Token 的方式
**/
url = 'https://graph.facebook.com/v2.9/debug_token'
request.get(url)
.query({input_token: clientAccessToken})
.query({access_token: `${facebook.appId}|${facebook.appSecrete}`})
.end((error, response) => {
if (error) {
next(error)
}
res.status(200).json(response)
})
response
1
2
3
4
5
6
7
8
{
"app_id":"6641****445424",
"application":"Simple-WebApps",
"expires_at":1497452400,
"is_valid":true,
"scopes":["email","public_profile"],
"user_id":"13094****824623"
}

方法三

由網頁端使用 存取權杖偵錯工具

使用網頁端檢驗 token:存取權杖偵錯工具
說明取得各種存取權杖的方式:存取權杖 @ Facebook 登入

錯誤處理

如果使用者移除對於 APP 的存取權限時,則在驗證使用者 Token 時回應的 JSON 會含有 error 訊息,並且 is_validfalse

1
2
3
4
5
6
7
8
9
10
11
12
{
"app_id":"664195880445424",
"application":"Simple-WebApps",
"error":{
"code":190,
"message":"Error validating access token: The session was invalidated explicitly using an API call.",
"subcode":466
},
"expires_at":1497452400,
"is_valid":false,
"scopes":[],
"user_id":"1309400575824623"}

說明錯誤發生會回傳的結果:偵錯和錯誤 @ 存取權杖 > Facebook 登入

參考資源

掃描二維條碼,分享此文章