เข้าสู่ระบบด้วย-facebook

ทำระบบ Facebook Login ด้วย jQuery เก็บข้อมูลชื่อและอีเมล

ทำระบบ Facebook Login ด้วย jQuery เก็บข้อมูลชื่อและอีเมล
facebook ได้ชื่อว่าเป็น social website ที่มีผู้ใช้งานมากที่สุดในโลก คิดเป็นหลายพันล้าน account นั่นคือเหตุผลอันดับต้น ๆ ว่าทำไมเว็บไซต์หรือเกมส์ โมบายแอพพลิเคชั่นในปัจจุบัน จึงจะมักจะมีระบบการสมัครสมาชิกหรือเข้าสู่ระบบโดยอาศัยข้อมูลจาก facebook account ซึ่งคนใหญ่มากเป็นสมาชิกอยู่แล้ว การคลิกที่ปุ่ม “Facebook Login” หรือ “เข้าสู่ระบบด้วย facebook” จึงกลายเป็นความสะดวกสบายและเป็นทางเลือกในการลงทะเบียนผ่านเว็บไซต์ เพราะไม่ต้องเสียเวลาในการกรอกข้อมูลรายละเอียดการลงทะเบียนยาวเหยียด แต่สามารถคลิกที่ปุ่มเดียวก็สามารถเข้าใช้งานเว็บไซต์หรือแอพพลิเคชั่นได้ทันที

วันนี้ลองมาดูกันครับว่า เราจะทำระบบการเข้าสู่ระบบหรือสมัครสมาชิกผ่าน javascript API ของ facebook ได้อย่างไร โดยที่สามารถได้ข้อมูลหลัก ๆ เช่น ชื่อ อีเมล และ ไอดี รวมไปถึงรูปภาพ avatar และนำไปใช้งานในส่วนอื่น ๆ ของเว็บไซต์หรือนำไปบันทึกลงฐานข้อมูล เก็บไว้ใช้งานในอนาคตได้ มีขั้นตอนง่าย ๆ ดังต่อไปนี้ครับ

ดาวน์โหลด facebookLogin.js

โหลด javascript SDK ของ facebook มาใช้งาน

ให้ท่านไปที่หน้า javascript quickstart ของ Facebook https://developers.facebook.com/docs/javascript/quickstart จากนั้น copy โค๊ด Facebook SDK มาวางไว้เหนือแท็กปิด body ในหน้าที่ท่านต้องการทำระบบ Facebook login ตัวอย่างโค๊ดจะมีหน้าตาลักษณะนี้ครับ

ทำการตั้งค่าพื้นฐานการใช้งาน facebook SDK

หลังจากที่เราได้ติดตั้ง facebook SDK ไว้ในหน้าเว็บไซต์เหนือแท็กปิด body เรียบร้อยแล้ว ให้เราทำการเขียนโค๊ดสำหรับตั้งค่าพื้นฐานการใช้งาน โดยเบื้องต้นต้องไปสร้าง facebook application ที่หน้า developer ของ facebook ก่อน คือ https://developers.facebook.com เมื่อท่านสร้างแอพเสร็จเรียบร้อยให้ไปที่หน้า การตั้งค่า -> ข้อมูลพื้นฐาน กรอกข้อมูลต่าง ๆ ลงไปรวมไปถึง url หน้าเว็บไซต์ที่เราต้องการจะใช้งาน facebook login เมื่อตั้งค่าเสร็จแล้ว ใก้ก๊อปปี้ app id และเขียนโค๊ดสำหรังตั้งค่าพื้นฐานดังนี้

สร้างฟังก์ชั่นดึงข้อมูลที่ต้องการใช้งาน ไอดี ชื่อ อีเมล

หลังจากที่เราได้โหลด facebook sdk และเขียนโค๊ดตั้งค่าพื้นฐานเรียบร้อยแล้ว ในขั้นตอนต่อไปคือส่วนที่เราจะดึงข้อมูลที่จำเป็นสำหรับการเข้าสู่ระบบหรือการสมัครสมาชิกของเว็บไซต์เรา ซึ่งแต่ละเว็บไซต์ก็อาจจะต้องการข้อมูลที่แตกต่างกันไป แต่พื้นฐานที่เราจะได้จาก facebook sdk ก็คือ ชื่อ-นามสกุล อีเมล และไอดี โดยสามารถเขียนคำสั่งได้ดังนี้

สำหรับรูป facebook profile เราสามารถหาได้จากการทำ fbuid ไปเรียกใช้งาน facebook graph ตัวอย่าง

ตัวอย่างการเรียกใช้งานในหน้า html

และถ้าเราต้องการบันทึกข้อมูลทั้งหมดลงฐานข้อมูล ก็เพียงใช้ ajax ส่งข้อมูลแบบ post ไปที่ php ตัวอย่างเช่น

เมื่อใช้ ajax ในการส่งข้อมูลแบบ post มาแล้ว ในไฟล์ facebookLogin.php เราก็เพียงเขียนโค๊ดสำหรับรับตัวแปรทั้งสามตัวแบบ post และ insert ลงฐานข้อมูล สำหรับนำไปใช้งานในการเข้าระบบครั้งต่อไป ตัวอย่างคำสั่ง

ดูตัวอย่างการส่งข้อมูลด้วย Ajax และการบันทึกข้อมูลใน PHP ได้จากกระทู้นี้
https://www.codebee.co.th/labs/html5-canvas-เซฟรูปจากแคนวาสด้วย-jquery-ajax/

วิธีทำ LINE Login เข้าสู่ระบบด้วย Line (PHP) บนเว็... LINE Login API คือการเข้าสู่ระบบหรือสมัครสมาชิกแบบ SSO ( Single Sign On ) ความหมายคือการใช้ข้อมูลเดียวกันกับแพลตฟอร์มใด แพลตฟอร์มหนึ่งในการลงทะเบ...
วิธีสมัครและใช้งาน Facebook Developer Account... วิธีสมัครและใช้งาน Facebook Developer Account วิธีสมัครและใช้งาน Facebook Developer Account ในปัจจุบัน facebook ถือเป็น social platform ที่มีผู้...
วิธีทำระบบ Login ด้วย Google Plus Javascript API... วิธีทำระบบ Login ด้วย Google Plus Javascript API วิธีทำระบบ Login ด้วย Google Plus Javascript API ปัจจุบันการพัฒนาเว็บไซต์ที่มีระบบสมาชิก เรามักจะเห็น...
API คืออะไร ทำความรู้จักกับเอพีไอ... API คืออะไร คุณประโยชน์ของเอพีไอ หลายคนอาจจะเคยได้ยินคำว่า API หรือ Web Service API มาบ้างแล้ว เพราะเป็นคำที่มักจะนำมาพูดในขั้นตอน การพัฒนาเว็บไซต...

By codebee

- Programmer & Writer