前言
本篇將分享如何使用 JavaScript SDK 讓用戶登入並取得 token, 然後利用 PHP SDK 向 Facebook 發請求, 進而取得使用者的資訊。
到FB的開發者頁面, 申請一個帳號, 並且在主控台的地方, 新增一個應用程式
到應用程式內的基本資料裡頭, 複製應用程式編號以及應用程式密鑰
創建 Laravel 專案
laravel new Facebook
初始化 Git
git init
安裝 Facebook PHP SDK
- 於專案目錄下
composer require facebook/graph-sdk
建立一個稍後用來向 FB 拿資料的 Controller
php artisan make:controller FBController
建立一個 getFacebookResources function
- 複製 Facebook SDK 首頁的範例程式碼,並貼在這個 function 裏頭
require_once __DIR__ . '/vendor/autoload.php'; // change path as needed
$fb = new \Facebook\Facebook([
'app_id' => '{app-id}',
'app_secret' => '{app-secret}',
'default_graph_version' => 'v2.10',
//'default_access_token' => '{access-token}', // optional
]);
// Use one of the helper classes to get a Facebook\Authentication\AccessToken entity.
// $helper = $fb->getRedirectLoginHelper();
// $helper = $fb->getJavaScriptHelper();
// $helper = $fb->getCanvasHelper();
// $helper = $fb->getPageTabHelper();
try {
// Get the \Facebook\GraphNodes\GraphUser object for the current user.
// If you provided a 'default_access_token', the '{access-token}' is optional.
$response = $fb->get('/me', '{access-token}');
} catch(\Facebook\Exceptions\FacebookResponseException $e) {
// When Graph returns an error
echo 'Graph returned an error: ' . $e->getMessage();
exit;
} catch(\Facebook\Exceptions\FacebookSDKException $e) {
// When validation fails or other local issues
echo 'Facebook SDK returned an error: ' . $e->getMessage();
exit;
}
$me = $response->getGraphUser();
echo 'Logged in as ' . $me->getName();
填入應用程式編號以及應用程式密鑰
- 上頭的範例中, 在以下地方填入我們從 FB 開發者帳號中得到的資訊
$fb = new \Facebook\Facebook([
'app_id' => '應用程式編號',
'app_secret' => '應用程式密鑰',
'default_graph_version' => '目前版本',
//'default_access_token' => '{access-token}', // optional
]);建立使用者登入按鈕
- 使用者要先登入進而拿到 token, 我們才可以使用 token 來做事
- 於 routes/web.php 檔案中, 新建一個給登入頁面使用的 route
Route::get('/FBToken', function(){
return view('FBToken');
}); - 於 resources/views/ 資料夾底下, 新增
FBToken.bladePHP 檔, 然後在裡頭貼上以下的 JS code<!DOCTYPE html>
<html>
<head>
<title>Facebook Login JavaScript Example</title>
<meta charset="UTF-8">
</head>
<body>
<script>
// This is called with the results from from FB.getLoginStatus().
function statusChangeCallback(response) {
console.log('statusChangeCallback');
console.log(response);
// The response object is returned with a status field that lets the
// app know the current login status of the person.
// Full docs on the response object can be found in the documentation
// for FB.getLoginStatus().
if (response.status === 'connected') {
// Logged into your app and Facebook.
testAPI();
} else {
// The person is not logged into your app or we are unable to tell.
document.getElementById('status').innerHTML = 'Please log ' +
'into this app.';
}
}
// This function is called when someone finishes with the Login
// Button. See the onlogin handler attached to it in the sample
// code below.
function checkLoginState() {
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
}
window.fbAsyncInit = function() {
FB.init({
appId : '{your-app-id}',
cookie : true, // enable cookies to allow the server to access
// the session
xfbml : true, // parse social plugins on this page
version : '{api-version}' // The Graph API version to use for the call
});
// Now that we've initialized the JavaScript SDK, we call
// FB.getLoginStatus(). This function gets the state of the
// person visiting this page and can return one of three states to
// the callback you provide. They can be:
//
// 1. Logged into your app ('connected')
// 2. Logged into Facebook, but not your app ('not_authorized')
// 3. Not logged into Facebook and can't tell if they are logged into
// your app or not.
//
// These three cases are handled in the callback function.
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
};
// Load the SDK asynchronously
(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 = "https://connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
// Here we run a very simple test of the Graph API after login is
// successful. See statusChangeCallback() for when this call is made.
function testAPI() {
console.log('Welcome! Fetching your information.... ');
FB.api('/me', function(response) {
console.log('Successful login for: ' + response.name);
document.getElementById('status').innerHTML =
'Thanks for logging in, ' + response.name + '!';
});
}
</script>
<!--
Below we include the Login Button social plugin. This button uses
the JavaScript SDK to present a graphical Login button that triggers
the FB.login() function when clicked.
-->
<fb:login-button scope="public_profile,email" onlogin="checkLoginState();">
</fb:login-button>
<div id="status">
</div>
</body>
</html> - 同樣, 在上面的程式碼中需填入編號及版本號, 如下
FB.init({
appId : '編號',
cookie : true, // enable cookies to allow the server to access
// the session
xfbml : true, // parse social plugins on this page
version : '版本' // The Graph API version to use for the call
});
熟悉 FB graph API 工具
- 利用 FB graph API 測試工具,我們可以找到我們需要的 API
客製 endpoint
因為之後我們可能會直接複製經由 graph API 工具 取得的 endpoint, 如下：
所以我們可以把 endpoint 這段移到 .env 中, 如下：
$endpoint = env('FBEndpoint');
try
{
// Get the \Facebook\GraphNodes\GraphUser object for the current user.
// If you provided a 'default_access_token', the '{access-token}' is optional.
$response = $fb->get($endpoint, $token);然後 .env 裡頭
FBEndpoint=me?fields=id,name,email
如此一來, 之後我們只要直接複製 graph API 取得的值, 貼到 .env, 打完收工！
修改錯誤回傳值
- PHP SDK 預設錯誤時, 會依照錯誤狀況回傳錯誤訊息, 可我只需知道 true or false, 就行了, token 無效有可能是因為以下幾種狀況
- 根本沒帶
- 帶的是錯的
- 過期了
- 不管是哪一種, 我都需要回傳錯誤訊息給前端, 並要求前端再去跟 FB 要一次, 拿對的來, 所以說, 我必須要判斷 PHP SDK 的輸出, 有沒有錯誤, 若錯做一件事, 對也做一件事, 因此我們需要修改原本錯誤訊息輸出的地方, 改成簡單的 true or false, 如下：
catch (\Facebook\Exceptions\FacebookResponseException $e)
{
return false;
// echo 'Graph returned an error: ' . $e->getMessage();
// exit;
}
取得 public url
- 使用 ngrok 取得用來拿 token, HTML 頁面的 public url
- 登入開發者應用程式 => 找到產品 Facebook 登入 => 快速入門 => 網站 => 貼上 public url
留言