สอนการใช้งาร Facebook PHP SDK ตอนที่ 4 การแสดงผลรูปภาพประจำตัวและชื่อหลังจากการ Login-Part 1

ตอนที่ 4 การแสดงผลรูปภาพประจำตัวและชื่อหลังจากการ Login-Part 1

จากบทความที่แล้วผมได้สอนการ Login Facebook ด้วยการ Login Facebook ด้วย Facebook API หลายคนก็ยังคง งงๆ ว่าแลัวเมื่อ Login ได้แล้วจะไปทำอะไรต่อ จะทำยังไงต่อ ก็เมื่อ Login แล้วมันแสดง อะไรไม่รู้ไม่รู้เรื่องเลย ดังนั้นในบทความนี้ผมก็จะมาสอนในการแสดงผลอันดับแรกเลยคือการแสดงผลโปรไฟล์ Facebook ของตัวเองกันก่อน ว่าสามารถทำได้อย่างไรจะไปต่อยอดอย่างไร เราไปดูกันเลยครับ

สิ่งที่ต้องใช้ในการทำการทดลองสร้าง Login Facebook ด้วย Facebook API

ต้องติดตั้งโปรแกรม Wamp Server ถ้ายังไม่ติดตั้งไปติดตั้งกันก่อนเลยครับ การติดตั้ง Wamp Server
ต้องติดตั้ง Facebook SDK ถ้ายังไม่ติดตั้งไปติดตั้งกันก่อนเลยครับ การตอดตั้ง Facebook SDK ผ่าน Composer หรือ การติดตั้ง Facebook SDK แบบ Manul
ต้องติดตั้งโปรแกรม Netbeans PHP IDE ถ้ายังไม่ติดตั้งไปติดตั้งกันก่อนเลยครับ การติดตั้ง Netbeans PHP ID

เมื่อพร้อมแล้วเรามาเริ่มกันเลยครับ

1. ทำการเปิดโปรแกรม Netbeans PHP IDE ขึ้นมาแล้วทำการ News File ที่ชื่อ fb-profile.php

fb-profile.php

2. เมื่อทำการสร้าง File ทั้งสองแล้ว เปิด ไฟล์ fb-profile.php ขึ้นมาครับ แล้วทำการ copy Code ดังต่อไปนี้ไปไส่ใน file fb-profile.php

<meta charset="utf-8">
<?php
session_start();
require_once __DIR__ . '/src/Facebook/autoload.php';

$fb = new Facebook\Facebook([
  'app_id' => '740357906069989',
  'app_secret' => '85be710ace9ac4e630fdcff56e51bdbd',
  'default_graph_version' => 'v2.4',
  ]);

$helper = $fb->getRedirectLoginHelper();
 
try {
 if (isset($_SESSION['facebook_access_token'])) {
  $accessToken = $_SESSION['facebook_access_token'];
 } else {
    $accessToken = $helper->getAccessToken();
 }
} 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;
 }


if (isset($accessToken)) {
    
if(isset($_SESSION['facebook_access_token'])) {
  $fb->setDefaultAccessToken($_SESSION['facebook_access_token']);
 } else {
    // Logged in!
    $_SESSION['facebook_access_token'] = (string) $accessToken;

    // OAuth 2.0 client handler
  $oAuth2Client = $fb->getOAuth2Client();

  // Exchanges a short-lived access token for a long-lived one
  $longLivedAccessToken = $oAuth2Client->getLongLivedAccessToken($_SESSION['facebook_access_token']);

  $fb->setDefaultAccessToken($_SESSION['facebook_access_token']);
 } 
        
   try {
        $UserPicture = $fb->get('/me/picture?redirect=false&height=300');
 $response = $fb->get('me?fields=email,name');
        $picture = $UserPicture->getGraphUser();
 $userNode = $response->getGraphUser();
        
 } 
        
        catch(Facebook\Exceptions\FacebookResponseException $e) {
 // When Graph returns an error
 echo 'Graph returned an error: ' . $e->getMessage();
 unset($_SESSION['facebook_access_token']);
 exit;
 } 
        
        catch(Facebook\Exceptions\FacebookSDKException $e) {
 // When validation fails or other local issues
 echo 'Facebook SDK returned an error: ' . $e->getMessage();
 exit;
 }
       //แสดงผลข้อมูล
        
 echo "<img src='".$picture['url']."'/>";
 echo '<hr width="300" align="left" > สวัสดีครับ คุณ :  ' . $userNode->getName();
        echo '<hr width="300" align="left" > รหัส ไอดีของคุณ  :  ' . $userNode->getId();
        echo ' <hr width="300" align="left" > อีเมลล์ของคุณ :  ' . $userNode->getEmail();
        echo '<hr width="300" align="left" >';
        //$LogutUrl=$helper->getLogoutUrl('http://localhost/facebook-adk/User-show.php',$accessToken);
        //echo '<a href="'.$LogutUrl .'">logut</a>';
       
}else {
 $permissions = ['email']; // optional
 $loginUrl = $helper->getLoginUrl('http://localhost/facebook-adk/User-show.php', $permissions);

 echo '<a href="' . $loginUrl . '"><img src="img/loginfacebook.gif"></a>';
}

3. ทดสอบการทำงาน เปิดบลาวเชอร์ ขึ้นมาแล้ว พิมพ์ Url http://localhost/facebook-adk-Manually/fb-profile.php ถ้าเรายังไม่ได้ Login Facebook ก็จะได้ดังรูป แล้วคลิก Login Facebook

4. เมื่อได้ทำการ Login เรียบร้อยแล้ว ก้จะแสดงผลออกมา ดังรูปด้านล่างนี้ครับ

อธิบายเพิ่มเติม

สำหลับใครที่ทำแล้วไม่ได้ในส่วนของ app_id, app_secret ให้ไส่ Facebook Apps ของตัวเองนะครับ

ถาม : แล้ว app_id, app_secret จะเอามาจากใหน ?
ตอบ : ก็เอามาจาก Facebook Apps ที่เราได้สร้างไว้ก่อนหน้านี้ครับ ถ้าใครยังไม่ได้สร้าง ก็ไปดูวิธิการทำได้ที่บทความที่ผ่านมา สอนการใช้งาร Facebook PHP SDK ตอนที่ 1 การสร้าง Facebook Apps แล้วไปที่ FacebookApps แล้วก็ไปที่ Ssttings ก็ทำการ Copy มาแทนที่ได้เลยครับ