ทำระบบ Facebook Login ด้วย jQuery เก็บข้อมูลชื่อและอีเมล
ทำระบบ Facebook Login ด้วย jQuery เก็บข้อมูลชื่อและอีเมล
facebook ได้ชื่อว่าเป็น social website ที่มีผู้ใช้งานมากที่สุดในโลก คิดเป็นหลายพันล้าน account นั่นคือเหตุผลอันดับต้น ๆ ว่าทำไมเว็บไซต์หรือเกมส์ โมบายแอพพลิเคชั่นในปัจจุบัน จึงจะมักจะมีระบบการสมัครสมาชิกหรือเข้าสู่ระบบโดยอาศัยข้อมูลจาก facebook account ซึ่งคนใหญ่มากเป็นสมาชิกอยู่แล้ว การคลิกที่ปุ่ม “Facebook Login” หรือ “เข้าสู่ระบบด้วย facebook” จึงกลายเป็นความสะดวกสบายและเป็นทางเลือกในการลงทะเบียนผ่านเว็บไซต์ เพราะไม่ต้องเสียเวลาในการกรอกข้อมูลรายละเอียดการลงทะเบียนยาวเหยียด แต่สามารถคลิกที่ปุ่มเดียวก็สามารถเข้าใช้งานเว็บไซต์หรือแอพพลิเคชั่นได้ทันที
วันนี้ลองมาดูกันครับว่า เราจะทำระบบการเข้าสู่ระบบหรือสมัครสมาชิกผ่าน javascript API ของ facebook ได้อย่างไร โดยที่สามารถได้ข้อมูลหลัก ๆ เช่น ชื่อ อีเมล และ ไอดี รวมไปถึงรูปภาพ avatar และนำไปใช้งานในส่วนอื่น ๆ ของเว็บไซต์หรือนำไปบันทึกลงฐานข้อมูล เก็บไว้ใช้งานในอนาคตได้ มีขั้นตอนง่าย ๆ ดังต่อไปนี้ครับ
โหลด javascript SDK ของ facebook มาใช้งาน
ให้ท่านไปที่หน้า javascript quickstart ของ Facebook https://developers.facebook.com/docs/javascript/quickstart จากนั้น copy โค๊ด Facebook SDK มาวางไว้เหนือแท็กปิด body ในหน้าที่ท่านต้องการทำระบบ Facebook login ตัวอย่างโค๊ดจะมีหน้าตาลักษณะนี้ครับ
(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 = "//connect.facebook.net/en_US/sdk.js"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));
ทำการตั้งค่าพื้นฐานการใช้งาน facebook SDK
หลังจากที่เราได้ติดตั้ง facebook SDK ไว้ในหน้าเว็บไซต์เหนือแท็กปิด body เรียบร้อยแล้ว ให้เราทำการเขียนโค๊ดสำหรับตั้งค่าพื้นฐานการใช้งาน โดยเบื้องต้นต้องไปสร้าง facebook application ที่หน้า developer ของ facebook ก่อน คือ https://developers.facebook.com เมื่อท่านสร้างแอพเสร็จเรียบร้อยให้ไปที่หน้า การตั้งค่า -> ข้อมูลพื้นฐาน กรอกข้อมูลต่าง ๆ ลงไปรวมไปถึง url หน้าเว็บไซต์ที่เราต้องการจะใช้งาน facebook login เมื่อตั้งค่าเสร็จแล้ว ใก้ก๊อปปี้ app id และเขียนโค๊ดสำหรังตั้งค่าพื้นฐานดังนี้
$(document).ready(function(e) { var APP_ID = "YOUR FACEBOOK APP_ID"; // ไอดีได้จาก developers.facebook.com window.fbAsyncInit = function() { FB.init({ appId : APP_ID, xfbml : true, version : 'v2.5' }); }; });
สร้างฟังก์ชั่นดึงข้อมูลที่ต้องการใช้งาน ไอดี ชื่อ อีเมล
หลังจากที่เราได้โหลด facebook sdk และเขียนโค๊ดตั้งค่าพื้นฐานเรียบร้อยแล้ว ในขั้นตอนต่อไปคือส่วนที่เราจะดึงข้อมูลที่จำเป็นสำหรับการเข้าสู่ระบบหรือการสมัครสมาชิกของเว็บไซต์เรา ซึ่งแต่ละเว็บไซต์ก็อาจจะต้องการข้อมูลที่แตกต่างกันไป แต่พื้นฐานที่เราจะได้จาก facebook sdk ก็คือ ชื่อ-นามสกุล อีเมล และไอดี โดยสามารถเขียนคำสั่งได้ดังนี้
function facebookLogin(){ FB.login(function(response) { var fbuid = response.authResponse.userID; // ไอดีเฟสบุ้ค if (response.authResponse) { FB.api('/me', { locale: 'en_US', fields: 'name, email' }, function(response) { console.log(JSON.stringify(response)); var name = response.name; // ชื่อและนามสกุล var email = response.email; // อีเมล }); }else{ } }, {scope:'email'}); // รายการ permission ที่เว็บไซต์เราร้องขอข้อมูล }
สำหรับรูป facebook profile เราสามารถหาได้จากการทำ fbuid ไปเรียกใช้งาน facebook graph ตัวอย่าง
http://graph.facebook.com/fbuid/picture?type=square
ตัวอย่างการเรียกใช้งานในหน้า html
<a href="#" onclick="facebookLogin();"><img src="facebook-login.png"/></a>
และถ้าเราต้องการบันทึกข้อมูลทั้งหมดลงฐานข้อมูล ก็เพียงใช้ ajax ส่งข้อมูลแบบ post ไปที่ php ตัวอย่างเช่น
$.ajax({ type: 'POST', url: 'facebookLogin.php', data: { 'fluid':fbuid, 'name': name, 'email': email }, success: function(json) { } });
เมื่อใช้ ajax ในการส่งข้อมูลแบบ post มาแล้ว ในไฟล์ facebookLogin.php เราก็เพียงเขียนโค๊ดสำหรับรับตัวแปรทั้งสามตัวแบบ post และ insert ลงฐานข้อมูล สำหรับนำไปใช้งานในการเข้าระบบครั้งต่อไป ตัวอย่างคำสั่ง
$fbuid = $_POST['fbuid']; $name = $_POST['name']; $email = $_POST['email']; $query = "INSERT INTO tb_member SET fbuid = '".$fbuid."',name = '".$name."',email = '".$email."'"; $result = mysql_query($query); $response = array('success' => TRUE); return $response;
ดูตัวอย่างการส่งข้อมูลด้วย Ajax และการบันทึกข้อมูลใน PHP ได้จากกระทู้นี้
https://www.codebee.co.th/labs/html5-canvas-เซฟรูปจากแคนวาสด้วย-jquery-ajax/