串接 Facebook graph API

前言


本篇將分享如何使用 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.blade PHP 檔, 然後在裡頭貼上以下的 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

登入取得 token

將 token 打到 Laravel 裡的 FBController 裡頭的 getFacebookResources

將取得的資料,存入資料庫,完成會員建檔

打完收工

Git-標注一個版本號碼 Laravel串接歐付寶第三方金流支付

留言

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×