Skip to main content

[WebService] Facebook SDK 學習筆記

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

前端處理

初始化 Facebook SDK

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

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 登入狀態

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

response 中會包含:

{
"status": "connected",
"authResponse": {
"accessToken": "...",
"expiresIn": "...",
"signedRequest": "...",
"userID": "..."
}
}

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

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

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

使用 FB SDK 登入

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 中代入要存取的使用者資訊:

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

Graph API Request

FB 登出

FB.logout(function (response) {
console.log('res when logout', response);
});

後端處理

產生應用程式存取權杖

access_token 需要透過 API 另外取得:

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

如果用 superagent 寫會長這樣子:

/**
* 產生應用程式存取權杖
*/
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 的存取權杖:

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

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

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

方法一:使用 APP Access Token

# 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 寫起來會像這樣:

/**
* 取得權杖和偵錯相關資訊
**/

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

可以取得如下的資訊:

{
"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

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

使用 superagent

/**
* 不使用 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
{
"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

{
"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 登入

參考資源