Get information via Facebook graph API

Introduction

In this article, I'm going to share how to get user information from Facebook by submitting a token with PHP SDK, which is got by providing user a login page with JaveScript code.

Go to FB develop page, and sign up, and then go to console and add a new application

In the user information, copy App key and App secret

Create a Laravel project

laravel new Facebook

Initiate Git

git init

Install Facebook PHP SDK

  • Under the project
    composer require facebook/graph-sdk

Create a controller which we could interact with FB later with

php artisan make:controller FBController

Create a function called getFacebookResources

  • Copy the SDK example code in its page, and paste it in the 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();

Enter App key and App secret

  • In the example above, we need to fill in some area with some information got from FB developer account as follows:
    $fb = new \Facebook\Facebook([
    'app_id' => 'App Key',
    'app_secret' => 'App Secret',
    'default_graph_version' => 'Current version',
    //'default_access_token' => '{access-token}', // optional
    ]);

    Create a user login button

  • User need to login in and get the token, and then we could use the token for further processing.
  • In routes/web.php file, create a route for the login page
    Route::get('/FBToken', function(){
    return view('FBToken');
    });
  • Under resources/views folder, create a php file called FBtoken.blade, and paste the example code of JS as follows:
    <!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>
  • Same here, we need to fill in App key and current version there as follows:
    FB.init({
    appId : 'App key',
    cookie : true, // enable cookies to allow the server to access
    // the session
    xfbml : true, // parse social plugins on this page
    version : 'version' // The Graph API version to use for the call
    });

Familiar yourself with FB Graph API tool

  • We could we the API we need with FB Graph API tool

Customize endpoint

  • Because we might specify our endpoint simply by copying and pasting as follows:

  • So we could move endpoint to .env as follows:

    $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);
  • And then in the .env

    FBEndpoint=me?fields=id,name,email
  • So, in the future, we could simply copy the endpoint from FB, and paste it on .env

Revise the error return

  • In the default setting of PHP SDK, it would return error message according to the situation, which might be good. However, I only need to know true or false, and that’s it. A ineffective token might be caused by several factors as follows:
    • It doesn’t exist
    • Wrong token
    • It expired
  • It doesn’t matter which one it is, the only thing we have to do is inform front end of this matter, and ask them to provide make a request to FB again and provide the valid token to us. Therefore, we need to determine what we are going to by a simple true or false feedback from FB PHP SDK, so we revise it as follows:
      catch (\Facebook\Exceptions\FacebookResponseException $e)
    {
    return false;
    // echo 'Graph returned an error: ' . $e->getMessage();
    // exit;
    }

Get a public URL

  • Use ngrok to get a public URL for the HTML page that we will use to get token from users.
  • Login the application => Find login product => shortcut => website => paste the public URL

Login and get token

Feed the token to getFacebookResources function in FBController.

Insert the data into our database

We are done here

Let’s specify a reversion number Handle AllPay third party payment service with Laravel

Comments

Your browser is out-of-date!

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

×