เทคนิคการสร้าง Facebook Login บนเว็บไซต์เราด้วย Facebook SDK for PHP

เว็บมาสเตอร์ต้องการสร้างระบบสมาชิกโดยให้มีปุ่ม Login with Facebook สำหรับผู้เข้าชม โดยผู้เข้าชมแค่กดปุ่ม Login with Facebook ระบบก็จะไปดึงข้อมูล facebook ของผู้เข้าชมนั้นมาเก็บลงในฐานข้อมูลของเว็บไซต์เราได้เลย เช่น ชื่อผู้ใช้ของ facebook / ชื่อเรียก / อีเมล์ / รูปภาพประจำตัว ฯลฯ

ใน ครั้งต่อไปเมื่อผู้เข้าชมที่เคยลงทะเบียนเป็นสมาชิกกับเว็บไซต์ด้วย Facebook กลับเข้ามาเยี่ยมชมเว็บไซต์เราอีกครั้ง ก็เพียงแค่กดปุ่ม Login with Facebook ก็ถือว่าเข้าระบบสมาชิกของเว็บไซต์เราได้โดยสมบูรณ์

ข้อดีของการสร้าง Login ด้วย Facebook บนเว็บไซต์ของเรา :

(1) สำหรับเว็บไซต์ขายของออนไลน์จะได้ประโยชน์มาก เพราะผู้ซื้อขี้เกียจจำ Username และ Password พอเห็นปุ่ม Login with Facebook ปุ๊ป ผู้ซื้ออยากจะลงทะเบียนซื้อ เพราะมันง่ายในการใช้งานทุกครั้ง ซึ่งจะทำให้ "แรงจูงใจ" ในการจะซื้อของในเว็บไซต์เรามีมากขึ้น

(2) หลังจากที่ผู้เข้าชม Login ด้วย facebook แล้ว เราค่อยสร้างแบบฟอร์มกรอกที่อยู่จัดส่งแยกออกมา จะช่วยให้ผู้เข้าชมไม่เกิดความเบื่อหน่าย

(3) ผ่านไปนานเท่าไหร่ หากผู้เข้าขมยังคงใช้ facebook อันเดิม เมื่อกลับเข้ามาชมเว็บไซต์เราอีกครั้ง แค่กดปุ่ม Login with facebook ก็เข้าระบบสั่งซื้อได้อย่างง่ายดาย (สถิติพบว่า เว็บไซต์ขายของที่ต้องให้ผู้เข้าชมจดจำชื่อผู้ใช้ / รหัสผ่านที่ต้องสร้างใหม่ จะลดแรงจูงใจในการสั่งซื้อครับ)

วิธีการสร้าง :

ในวิธีจะแนะนำการสร้างด้วยภาษา PHP ซึ่งเป็นที่นิยมกัน

(1) เว็บมาสเตอร์ต้องมี Facebook Account ของตัวเอง แล้วเข้าไปที่เมนูสร้างแอพ / จัดการแอพ ตามลิงค์ด้านล่างนี้
https://developers.facebook.com/apps?ref=mb

(2) เว็บมาสเตอร์ทำการสร้างแอพ เพื่อจะนำเอาเลข app_id และรหัส app_secret ที่ facebook ให้นำมาใช้ต่อไป

 
(3) ดาวโหลด PHP_SDK ที่เว็บไซต์ Github.com (ต้องสมัครสมาชิกก่อนจึงจะดาวโหลดได้) โดยดาวโหลดได้ตามลิงค์ด้านล่างนี้
https://github.com/facebook/facebook-php-sdk  (ปุ่มดาวโหลด SDK จะอยู่คอลัมน์ขวามือล่างสุด (หายากหน่อย))

(4) ดาวโหลดมาเสร็จให้แตกไฟล์ออกมา จะได้ 3 โฟลเดอร์ คือ examples / src / tests

(5) ให้อัพโหลดเฉพาะโฟลเดอร์ src ไปไว้บนโฮสต์ของเรา ซึ่งจะมี 3 ไฟล์สำคัญ โดยทั้ง 3 ไฟล์นี้จะถูกเรียกใช้ผ่านฟังก์ชั่น require()

6) พารามิเตอร์ของ facebook พร้อมตัวอย่างวิธีการใช้ methodแต่ละอันสำหรับ PHP อยู่ที่หน้านี้
https://developers.facebook.com/docs/reference/php/

 
(7) ตัวอย่างโค้ด PHP สมบูรณ์ สำหรับการสร้างระบบ Login ด้วย Facebook พร้อมลิงค์สำหรับการออกจากระบบด้วย ในที่นี่ผมตั้งชื่อไฟล์ว่าfblogin.php และให้คัดลอกโค้ดด้านล่างไปใส่ บันทึก และ อัพโหลดขึ้นโฮสต์

require_once("facebook.php"); // เรียกพาธให้ถูกต้องตามที่ได้อัพโหลดไว้ด้วย ในที่นี่ผมเก็บไฟล์ facebook.php ไว้ในที่เดียวกันกับไฟล์ fblogin.php ครับ

$config = array(

  'appId'  => 'ใส่เลขรหัส app id ของคุณที่นี่', // มีเครื่องหมาย ' คร่อมหัวท้ายด้วย

  'secret' => 'ใส่ชุดรหัส secret ของคุณที่นี่', // มีเครื่องหมาย ' คร่อมหัวท้ายด้วย

      'fileUpload' => false, // optional

      'allowSignedRequest' => false, // optional, but should be set to false for non-canvas apps

  );

  $facebook = new Facebook($config);

  $user_id = $facebook->getUser();

  ?>

    if($user_id) { // ถ้าผู้เข้าชมมีการ Login facebook ในเว็บไซต์เราแล้วให้แสดงผลต่อไปนี้

      try {

        $user_profile = $facebook->api('/me','GET');

        echo "ชื่อ facebook : " . $user_profile['name'];

        $params = array( 'next' => 'https://www.softmelt.com/' ); // เว็บไซต์ของคุณ

        $logout_url = $facebook->getLogoutUrl($params);  // $params is optional.

        echo "ออกจากระบบ Facebook "; // คุณอาจเปลี่ยนเป็นรูปภาพที่สวยงามแทนข้อความ

      } catch(FacebookApiException $e) {

        // If the user is logged out, you can have a

        // user ID even though the access token is invalid.

        // In this case, we'll get an exception, so we'll

        // just ask the user to login again here.

        $login_url = $facebook->getLoginUrl();

        echo 'กรุณาเข้าสู่ระบบด้วย <a href="' . $login_url . '">ด้วย facebook</a>'; // คุณอาจเปลี่ยนเป็นรูปภาพที่สวยงามแทนข้อความ

        error_log($e->getType());

        error_log($e->getMessage());

      }  

    } else {

      // ถ้าผู้เข้าชมยังไม่มีการ Login facebook ในเว็บไซต์ ให้แสดงลิงค์เข้าสู่ระบบแทน

      $login_url = $facebook->getLoginUrl();

      echo 'กรุณาเข้าสู่ระบบด้วย <a href="' . $login_url . '">ด้วย facebook</a>'; // คุณอาจเปลี่ยนเป็นรูปภาพที่สวยงามแทนข้อความ

    }

  ?>

(8) ปัญหาสำคัญ คือ ฐานข้อมูลภาษาไทยในระบบ facebook เข้ารหัสเป็น utf-8 ดังนั้น ต้องระมัดระวังจุดนี้ให้ดี คือ ให้เก็บค่าตัวแปร Array $user_profile[] ลงใน mySQL ด้วยรหัส UTF-8 นะครับ แล้วค่อย Redirect ไปเข้าหน้าเว็บไซต์ภาษาไทยอีกที ซึ่งสำคัญมากสำหรับคนที่ใช้รหัสฐานข้อมูล mySQL เป็น TIS-620 อยู่นะครับ

ขอบคุณเนื้อหา :