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

ทำระบบ 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 ตัวอย่างโค๊ดจะมีหน้าตาลักษณะนี้ครับ

(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/