บทความลักษณะแบบนี้จริงๆแล้วมีคนเขียนไว้เยอะแล้วแหละ แต่เมื่อไม่นานนี้หลังจากที่ Graph API ของเฟสบุ๊คตัวเก่ามันหมดอายุไปนักพัฒนาก็ต้องอัพเกรดไปใช้เวอร์ชันใหม่ๆ และพอใช้ๆไปมันก็จะหมดอายุอีก ทำให้เราต้องอัพเดทโค้ดของเราอีก เพราะฉะนั้นถึงแม้จะมีหลายท่านได้เขียนไว้แล้ว แต่ผมเชื่อว่าจะมีบางจุดที่ไม่เหมือนกัน โดยเฉพาะนักพัฒนาหน้ามือใหม่ที่เริ่มต้น บทความนี้ก็อาจจะมีประโยชน์กับท่านก็เป็นได้
การเริ่มต้นใช้งานและพัฒนาเว็บแอพพลิเคชันเพื่อเชื่อมต่อกับ Facebook ด้วยภาษา PHP ถ้าเราพอได้ภาษาอังกฤษผมก็แนะนำว่าให้ลองเข้าไปศึกษาจาก Facebook for Developers ในนั้นมีคำแนะนำที่ Facebook มาอัพเดทให้โดยตรงเลย และสำหรับการพัฒนาด้วย PHP สามารถอ่านได้ที่ Getting started with the Facebook SDK for PHP
ความต้องการของระบบ
ก่อนที่จะลงมือพัฒนาแอพฯ PHP ร่วมกับ Facebook SDK เราก็มาตรวจสอบกันก่อนว่าเครื่องมือของเราพร้อมหรือไม่
1.) PHP 5.4 เป็นอย่างต่ำ ใครมีเวอร์ชันที่ใหม่กว่านี้ก็แหล่มเลย แต่ถ้าของใครยังต่ำกว่า ก็ลองอัพเกรด PHP มาเป็นเวอร์ชันใหม่ได้
2.) The mbstring extension โดยปกติ PHP ที่ติดตั้งบนเซิร์ฟเวอร์ต่างๆก็มักจะตั้งค่าให้รองรับไว้อยู่แล้ว แต่ถ้าใครไม่แน่ใจ ก็ลองรัน PHP ด้วยคำสั่ง phpinfo(); แล้วตรวจสอบดูว่า extension ของเราเปิดใช้อยู่หรือป่าว
3.) Composer (optional) ตัวนี้จะมีก็ดีไม่มีก็ได้ ถ้ามีมันก็จะช่วยให้เราทำงานง่ายขึ้น ผมจะยังไม่ของลงรายละเอียดตรงนี้ เพราะมันจะยาวเกินไป เอาเป็นว่าถ้าเครื่องของเรามีพร้อมอย่างน้อยสองอย่างก็สามารถเริ่มใช้งาน Facebook SDK ด้วย PHP ได้เลย
ติดตั้ง Facebook SDK for PHP
เรามีวิธีการติดตั้ง Facebook SDK อยู่สองแบบตามที่ Facebook แนะนำมา คือแบบที่ใช้ Composer และแบบ Manual ในที่นี้ผมจะเลือกทำแบบ Manual เพราะจะทำให้เราเข้าใจ และเผื่อใครที่ไม่มีหรือไม่รู้จัก Composer ก็จะได้ข้ามไปเลย
ขั้นตอนแรกให้เราทำการ ดาวน์โหลด Facebook SDK แล้วก็ทำการ Unzip ออกมาก
เรามาสำรวจกันหน่อยว่าข้างในมีไฟล์อะไรบ้าง และไฟล์ที่สำคัญที่เราจะตามเข้าไปดูนั่นก็คือไฟล์ที่มีชื่อว่า autoload.php ครับ ในที่นี้ผมจะลองแสดงรูปภาพให้ดูจะได้เห็นภาพว่าไฟล์ที่ว่านั้นมันเก็บอยู่ตรงไหน
ทำการอัพโหลดเฉพาะ Folder Facebook ขึ้นไปบนเซิร์ฟเวอร์ของเรา หรือใครจะถนัดอัพขึ้นหมดเลยก็ไม่ว่ากันนะ แต่เราจะเอาไปเฉพาะที่จำเป็นเฉยๆ โดยอัพขึ้นไปไว้ที่ไดเรคทอรีเดียวกันกับโปรเจ็คของเรา
สมมติว่าโปรเจ็คของเราเก็บอยู่ที่ /var/www/html/apps/facebook/
ผมก็ทำการอัพโหลดโฟลเดอร์ Facebook ทั้งดุ้นขึ้นไปเลย แล้วรอจนกระทั้งมันอัพโหลดเสร็จ
ขั้นตอนต่อไปเราจะสร้างไฟล์ขึ้นมาสองไฟล์ คือ login.php และ login-callback.php โดยที่ไฟล์ login.php ก็คือหน้าเข้าสู่ระบบด้วย Facebook ของเรา ซึ่งมักจะสร้างเป็นปุ่ม “เข้าสู่ระบบด้วยบัญชี Facebook” อะไรก็ว่ากันไป
และอีกไฟล์หนึ่งคือ login-callback.php เอาไว้ตรวจสอบหลังจากที่กดล็อกอินแล้วว่าที่เราทำนั้นมันล็อกอินได้จริงหรือป่าวนั่นเอง
- login.php ทำการสร้างไฟล์ชื่อ login.php โดยเนื้อหาข้างในแบบนี้เลยครับ
– บรรทัด[3] : session_start(); โดยปกติแล้วระบบล็อกอินเราจะใช้งาน session อยู่แล้ว และตัว Facebook SDK เองก็มีการใช้งาน session ดังนั้นก่อนอื่น เราต้องไม่ลืมที่จะประกาศ session ก่อน ไม่เช่นนั้นก็จะใช้งานไม่ได้
– บรรทัด[4] : ทำการ include autoload.php เข้ามา ซึ่งไฟล์นี้ก็จะเก็บอยู่ในโฟลเดอร์ Facebook ที่เราเพิ่งจะใส่ Facebook เข้าไปนั่นเอง
– บรรทัด[5 – 9 ] : สร้าง object ขึ้นมา จากคลาสFacebook\Facebook ซึ่งจำเป็นจะต้องกำหนดค่าต่างๆ ที่สำคัญคือ app_id และ app_secret ตรงนี้แหละ มือใหม่หลายๆท่านอาจจะติดอยู่ ดังนั้นก่อนที่จะไปขั้นตอนต่อไป เราไปสร้าง app_id ใหม่ขึ้นมาก่อนเราก็ต้องทำการสร้างแอพฯบนเฟสบุ๊คขึ้นมา ในขั้นตอนเมื่อสร้างแอพฯเสร็จ เราถึงจะได้ App ID และ App Secret มาใช้งาน โดยจะต้องทำการล็อกอินเข้า Facebook และเข้าไปที่ https://developers.facebook.com/ จากนั้นก็คลิกที่ My Apps และสร้าง Apps ขึ้นมาใหม่
สร้างแอพพลิเคชันบนเฟสบุ๊ก
ระบบก็จะให้เราใส่ชื่อแอพฯ อีเมล และเลือกหมวดหมู่แอพฯของเรา ว่าเราสร้างแอพฯไอดีใหม่ขึ้นมาเพื่ออะไร แล้วก็กด Create App ID ได้เลย
ใส่ข้อความให้ตรงกับรูปภาพ อันนี้เป็น Security Check หลายๆคนคงรู้จักกันดีอยู่แล้วว่าต้องทำยังไง
เราก็จะได้ App ID มา เอาข้อมูลสองชุดนี้แหละไปใช้ในโค้ดของเรา
ในตัวอย่างนี้ เราก็จะได้ชุดข้อมูลมาสองชุดคือ
app_id : 1902403916702759
app_secret : 2644a874fd4d7801db5d2e68f9e26d3b
(เดี๋ยวผมขอลองทำให้ดูจนเสร็จก่อน เดี๋ยวค่อยไปรีเซ็ต app_secret ใหม่ไม่ต้องเซ็นเซอร์ไว้)
– บรรทัดที่[10 – 14] : เราทำการสร้างลิงก์สำหรับให้ user กด พร้อมทั้งกำหนด callBackURL ไว้ด้วย สำหรับไฟล์แรก login.php ก็เสร็จแล้วครับ ต่อไปเราจะสร้างไฟล์ login-callback.php
2.login-callback.php ทำการสร้างอีกหนึ่งไฟล์ขึ้นมา สำหรับเอาไว้ตรวจสอบว่าเราล็อกอินได้สำเร็จหรือไม่ ถ้าหากล็อกอินได้ให้ดึงชื่อของเราใน Facebook มาแสดง
โค้ดในส่วนแรกๆก็จะคล้ายๆกับไฟล์แรก จะมีเพิ่มเข้ามานิดหน่อยตรงที่จะเรียกใช้ Method เพื่อดึงข้อมูลโปรไฟล์มาแสดง
สำหรับไฟล์ที่สองขออนุญาติไม่อธิบายเพิ่มละกันนะครับ ให้เราลองแกะๆดูว่าเข้าใจโค้ดไหม มือใหม่อาจจะงงๆนิดนึง แต่หลายๆคนมือโปรฯแล้วก็คงข้ามไปได้เลย แต่ถ้าติดจริงๆสามารถคอมเม้นด้านล่างไว้ได้เลย เดี๋ยวผมจะมาตอบให้ไวที่สุด นี่ขนาดตัดหลายๆช่วงพยายามอธิบายไม่เยอะ บทความเราก็เริ่มยาวมากเกินที่จะอ่านจบละ มาถึงตอนนี้เราก็มีสองไฟล์แล้ว คือ login.php และ login-callback.php ซึ่งทั้งสองนี้ผมอัพขึ้นเซิร์ฟเวอร์เพื่อลองให้ดูจริงๆเลย จะอยู่ที่ https://green.in.th/apps/facebook/login.php หน้าตาก็แบบนี้เลย
ทีนี้เรามาลองกดล็อกอินดูซิว่ามันจะล็อกอินได้สำเร็จหรือป่าว
Error ! ! หลายคนคงจะเคยเห็นป๊อบอัพนี้มาบ้างแล้ว อันนี้เราก็แสดงให้ดูว่ามันคือข้อผิดพลาดที่เกิดจาก เราไม่ได้กำหนดในแอพพลิเคชันของเราว่า callback ได้ที่ URL ไหนบ้าง วิธีการแก้ไขก็คือเราจะต้องไปเพิ่ม URL writh list ให้กับแอพฯ
ตั้งค่าแอพฯบนเฟสบุ๊คให้ถูกต้อง
กลับไปที่ developers.facebook.com เพื่อเข้าไปตั้งค่าแอพฯของเรา กดเข้าไปที่แอพที่ต้องการตั้งค่า >Add Product > Get Started
ในที่นี้เราพัฒนาแอพฯบนเว็บ เพราะฉะนั้นเลือก Platform เป็น www ได้เลย
แอพฯจะแสดง Quick Start มาให้ ตรงนี้เราข้ามไปได้เลย เพราะว่าจุดประสงค์ของเรา แค่จะมาเพิ่ม Product สำหรับทำล็อกอินเว็บไซต์
เหลือบหันกลับไปมองที่เมนูด้านซ้าย เราจะให้ลิงก์ Settings สำหรับตั้งค่าแอพฯของเรา จิ้มเบาๆ
ใส่ URL ของ login-callback.php ให้ถูกต้อง ย้ำนะครับว่าต้องถูกต้อง และตรงกันกับที่เรากำหนดไว้ให้โค้ด login.php ไม่เช่นนั้นแล้วก็จะเด้ง error มาตลอด เมื่อมั่นใจว่าใส่ถูกแล้วก็กดบันทึกการตั้งค่าของเราได้เลย เป็นอันเสร็จสิ้น ทีนี้ก็เหลือขั้นตอนการกลับไปทดสอบการทำงานแล้วหละ
เปิดหน้าล็อกอินของเราขึ้นมา : https://green.in.th/apps/facebook/login.php
จากนั้นก็กดลิงก์ล็อกอินดูซิ ! ว่าจะเกิดอะไรขึ้น
ถ้าขึ้นป๊อบอัพมาแบบนี้ก็แสดงว่าเกือบจะสำเร็จแล้วแหละ ลองกด Continue as Your Account ดูซิว่าพอมันเด้งกลับไป login-callback.php มันจะเป็นยังไง
เป็นอันว่าจบซักที สำเร็จสำหรับการทำล็อกอินเว็บไซต์ด้วยเฟสบุ๊ก ซึ่งเป็นพื้นฐานสำหรับหลายๆคนที่ต้องใช้ และโดยเฉพาะมือใหม่ที่เริ่มต้น ผมก็พยายามจะเขียนให้ละเอียดมากที่สุด ถ้าขาดตกบกพร่องตรงไหน สามารถคอมเม้นบอกหน่อย ก็จะเป็นพระคุณอย่างสูง จะดีมากๆถ้าช่วยแชร์ ขอบคุณหลายๆเด้อ