PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum

การล็อกอิน facebook กับระบบสมาชิก ด้วย facebook javascript sdk

28 June 2016 By


เนื้อหานี้จะเป็นการประยุกต์ใช้งาน การล็อกอินด้วย facebook เพื่อเข้าใช้งานเว็บไซต์
รูปแบบการทำงานคือ เมื่อมีการกดปุ่มล็อกอินด้วย facebook ถ้าผู้ใช้นั้น เข้าใช้งาน
facebook อยู่แล้ว (ล็อกอิน facebook อยู่) ระบบจะลิ้งค์ไปหน้าเชื่อมต่อกับ app id ของเรา
หรือ app ของเรา เมื่อผู้ใช้ทำการเชื่อมต่อกับ app ของเราแล้ว (เชื่อมต่อ  app แค่ครั้งแรก) 
ก็จะส่งค่าข้อมูลไปทำการ ตรวจสอบในฐานข้อมูล ว่ามีผู้ใช้นี้ในระบบแล้วหรือไม่ ถ้ายังไม่มีผู้ใช้นี้ในระบบ 
ให้ทำการเพิ่มข้อมูล ผู้ใช้งานใหม่เข้าไปในระบบ และเก็บค่าการเชื่อมต่อกับ facebook ไว้ใช้งาน 
ในที่นี้ สมมติเก็บ username ผู้ใช้เป็น fb_ ตามด้วยไอดีของ facebook เช่น fb_1111111
แบบนี้เป็นต้น (รูปแบบสามารถไปดัดแปลง และเพิ่มเติมได้ตามต้องการ) ส่วนรหัสผ่าน เราจะทำการ
random ค่าตัวเลขแทน และอีกค่าทีสำคัญคือ fb_gen_authorized ที่เราจะสร้างไว้สำหรับใช้ในการ
ตรวจสอบผู้ใช้ในการล็อกอินครั้งต่อๆ ไป และเมื่อตรวจสอบการล็อกอินกับฐานข้อมูลแล้ว ก็จะสร้าง
ตัวแปร session ไว้ใช้งาน
 
*เนื้อหานี้เป็นแนวทาง สามารถนำไปประยุกต์ดัดแปลงเพิ่มเติม 
 
เริ่มต้นที่ตารางฐานข้อมูลสมมติ สำหรับการล็อกอินด้วย facebook
 
 
-- Table structure for table `tbl_simple_user`
--

CREATE TABLE IF NOT EXISTS `tbl_simple_user` (
  `user_id` int(11) NOT NULL,
  `user_name` varchar(25) NOT NULL,
  `user_pass` varchar(20) NOT NULL,
  `user_fb_connect` int(1) NOT NULL,
  `user_fb_authorized` varchar(50) NOT NULL,
  `user_last_login` datetime NOT NULL
) ENGINE=InnoDB  DEFAULT CHARSET=utf8;

ALTER TABLE `tbl_simple_user`
  ADD PRIMARY KEY (`user_id`);
ALTER TABLE `tbl_simple_user`
  MODIFY `user_id` int(11) NOT NULL AUTO_INCREMENT,AUTO_INCREMENT=1;
 
แต่ละฟิลด์จะเก็บข้อมูลดังนี้
user_id // เก็บ id กำหนดเป็น auto increment
user_name // เก็บชื่อผู้ใช้ ในที่นี้เราจะเก็บในรูปแบบ fb_1111111
user_pass // เก็บรหัสผ่าน ไว้กรณีหน้าล็อกอินปกติ ในที่นี้ใช้ random ค่า
user_fb_connect // เก็บสถานะว่า ผู้ใช้นี้ มีการล็อกอินด้วย facebook หรือไม่ เก็บค่า 1 กับ 0
user_fb_authorized // เก็บ authorized code ที่เราสร้างขึ้น เพื่อใช้ในการตรวจสอบการล็อกอิน
user_last_login // เก็บวันที่ และเวลาล็อกอินล่าสุด
 
เมื่อได้รุปแบบตารางฐานข้อมูล พร้อมแล้ว เรามาดูส่วนของโค้ด หน้าล็อกอิน
รูปแบบของหน้าล็อกอิน เราจะไม่มีฟอร์มอะไร จะเป็นแค่ปุ่ม สามารถประยุกต์ใช้ปุ่ม
รูปภาพหรืออื่นๆ ให้สวยงามได้ 
ในที่นี้ไฟล์ทดสอบเราจะทำไว้แค่ไฟล์เดียว ชื่อว่า test.php
 

มาดูโค้ดตัวอย่างไฟล์ test.php  

คำอธิบายแสดงในโค้ด
 
<?php
session_start(); // ใช้งาน session
include("inc/dbconnect.php");//  ไฟล์เชื่อมต่อฐานข้อมูล
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>javascript facebook login</title>
</head>

<body>


<div>
<?php if(!isset($_SESSION['ses_user_id']) || $_SESSION['ses_user_id']==""){?>
ยังไม่ได้ล็อกอิน ไม่มี session ชื่อ ses_user_id แสดงปุ่มล็อกอินด้วย facebok<br><br>
<input type="button" name="button" id="button_login_with_fb" class="login_with_fb" value="Login with facebook">
<div class="loading_text" style="display:none;">รอสักครู่....</div>
<br>
<br>
<?php }else{ ?>
<strong>userID</strong>: <?=$_SESSION['ses_user_id']?><br>
<strong>userName</strong>: <?=$_SESSION['ses_user_name']?><br>
<strong>LastLogin</strong>: <?=$_SESSION['ses_user_last_login']?><br>
<input type="button" name="button" id="button_logout" class="button_logout" value="Logout">
<?php } ?>
</div>


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>      
<script type="text/javascript">
	// ส่วนของการตั้งค่าการเชื่อมต่อกับ app 
    var fb_appId='xxxxxxxxxxx';   // facebook app id
    var urlDirect="http://localhost/demo/db_class/test.php";  // หน้าหลังจากล็อกอินด้วย facebook แล้ว
    var loginURL="https://www.facebook.com/dialog/oauth?";
    loginURL+="client_id="+fb_appId;
    loginURL+="&redirect_uri="+urlDirect;
    loginURL+="&auth_type=rerequest";
    loginURL+="&scope=email,public_profile";    

  window.fbAsyncInit = function() {
    FB.init({appId: fb_appId, status: true, cookie: true,version: 'v2.3',
             xfbml: true});    		 	 

	// กำหนดชื่อตัวแปร สำหรับใช้เป็น ฟังก์ชั่นล็อกอินด้วย facebook
	var fb_login = null;		 
    $(function(){

       // ฟังก์ชั่นสำหรัลล็อกอินด้วย facebook สำหรับเรียกใช้งาน
	   fb_login = function(){
		   // effect เล็กน้อยกว่ากำลังโหลดข้อมูล
		   $(".loading_text").show();
             FB.getLoginStatus(function(response) { // ตรวจสอบการล็อกินด้วย facebook
              if (response.status === 'connected') {  // มีการล็อกอินด้วย facebook และเชื่อมต่อกับ app id แล้ว
                var uid = response.authResponse.userID;  // เก็บ userID ไวในตัวแปร uid ไว้ใช้งาน
                var accessToken = response.authResponse.accessToken; // เก็บ accessToken ไว้ใช้งาน
				console.log(accessToken);
                    FB.api('/me', function(response) { // ไปดึงข้อมูลข้อผู้ใช้
						  console.log("connected");
						  console.log(response);		// แสดง log หรือรายการข้อมูลที่ได้ตากการดึงข้อมูล
						  
						  // ถ้าอยากรู้ว่าเราไปดึงข้อมูลผู้ใช้ facebook ได้ค่าอะไรมาบ้าง ให้ปิดคอมเม้น โค้ดด้านล่างก่อน
						  // เพื่อดู log ของตัวแปร response
						  
						  // นำค่าจากข้อมูลผู้ใช้มาตรวจสอบ
	                       if(response.id!=null && response.name!=null){ // ถ้าชื่อ กับ ไอดี ไม่เป็นค่าว่าง
						   		// ส่งข้อมูลไปใช้งาน เช่นตรวจสอบการล็อกอิน หรือสร้างข้อมูลสมาชิกใหม่
								$.post("checkuser.php",{
									fbname:response.name,
									fbemail:response.email,
									fbid:response.id,
									accTK:accessToken
								},function(data){
									console.log(data);
									window.location=urlDirect;
								});
							}


                    });
              } else if (response.status === 'not_authorized') {  // มีการล็อกอิน facebok แต่ยังไม่เชื่อมต่อกับ app id
                  window.location=loginURL; // บังคับให้ไปทำการเชื่อมต่อกับ app id เราก่อน
              } else {		  // กรณีอื่นๆ 
                  window.location=loginURL; //  บังคับให้ไปทำการเชื่อมต่อกับ app id เราก่อน
              }
             });      		   
	   }

		<?php 
		// กำหนดค่าไว้เพื่อรองรับ การล็อกอิน facebook เช่นถ้าล็อกอินสำเร็จ จะได้ตัวแปร $_GET['code']
		// ถ้าล็อกอินหรือเชื่อมต่อ facebook ผิดพลาดจะได้ตัวแปร $_GET['error'] เมื่อเข้าเงื่อนไข
		// ตัวโปรแกรมก็จะไปเรียกใช้งานฟังก์ชั่นล้อกอินใหม่ จะกว่าจะทำงานสำเร็จ เพื่อสร้าง session ไอดี สมาชิก
		if(isset($_GET['code']) || isset($_GET['error'])){ ?>
		fb_login();	
		<?php } ?>
		
		$(".button_logout").on("click",function(){
			// เรียกไฟล์ล็อกเอาท์ เพื่อล้างค่าตัวแปร session
			$.post("logout.php",function(){
				/// ล้างค่าตัวแปร session แล้ว
				setTimeout(function(){
					window.location = urlDirect;
				},300); // ตั้งเวลา ดีเลย์ ก่อนลิ้งค์ไปหน้าที่ต้อการ
			});
		});

		// ถ้ากดปุ่ม ที่มี class ชื่อ login_with_fb เรียกใช้งานฟังก์ชั่นล็อกอินด้วย facebook
       $(".login_with_fb").on("click",fb_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'));  		   
</script>
</body>
</html>
 
 
 

ไฟล์ dbconnect.php

<?php
$mysqli = new mysqli("localhost", "root","","test");
/* check connection */
if (mysqli_connect_errno()) {
    printf("Connect failed: %sn", mysqli_connect_error());
    exit();
}
if(!$mysqli->set_charset("utf8")) {
    printf("Error loading character set utf8: %sn", $mysqli->error);
    exit();
}
 

ไฟล์ checkuser.php

คำอธิบายแสดงในโค้ด
 
<?php
session_start();
include("inc/dbconnect.php");
// ตรวจสอบค่าที่ส่งมาผ่าน ajax แบบ POST ในที่นี้เราจะเช็ค 3 ค่า ว่ามีส่งมาไหม
if(isset($_POST['fbname']) && $_POST['fbname']!="" && isset($_POST['fbid']) && $_POST['fbid']!=""
&& isset($_POST['accTK']) && $_POST['accTK']!=""
){
	// กำหนดรูปแบบรหัสสำหรับ fb_authorized สำหรับไว้ใช้ล็อกอิน ในท่ี่นี้ใช้รูปแบบอย่างง่าย 
	// ใช้ ไอดี ต่อกับ รหัสพิเศษกำหนดเอง สามารถไปประยุกต์เข้ารหัสรูปแบบอื่นเพิ่มเติมได้
	$fb_secret_set = "mysecret";
	$fb_string_authorized = $fb_secret_set.trim($_POST['fbid']); // ต่อข้อความสำหรับเข้ารหัส
	$fb_gen_authorized = md5($fb_string_authorized);
	
	$sql_check="
	SELECT * FROM tbl_simple_user WHERE user_fb_authorized='".$fb_gen_authorized."' 
	AND user_fb_connect=1 
	";
	$result = $mysqli->query($sql_check);
	if($result && $result->num_rows>0){  // มีสมาชิกที่ล็อกอินด้วย facebook id นี้ในระบบแล้ว
		// ดึงข้อมูลมาแสดง และสร้าง session
		$row = $result->fetch_array();
		$_SESSION['ses_user_id']=$row['user_id'];
		$_SESSION['ses_user_name']=$row['user_name'];		
		$_SESSION['ses_user_last_login']=date("Y-m-d H:i:s");
		// อัพเดทเวลาล็อกอินล่าสุด
		$sql_update="
		UPDATE tbl_simple_user SET 
		user_last_login=NOW()
		WHERE user_id='".$row['user_id']."'
		";
		$mysqli->query($sql_update);
	}else{   // ไม่พบสมาชิกที่ใช้ facebook id นี้ล็อกอิน
		// สร้างผู้ใช้ใหม่
		//  สมมติให้ชื่อผู้ใช้ใหม่เป็น fb_ไอดี รหัสผ่านเป็น แรนดอม 
		$sql_insert="
		INSERT INTO tbl_simple_user SET
		user_name='fb_".$_POST['fbid']."',
		user_pass='".rand(11111111, 9999999)."',
		user_fb_connect='1',
		user_fb_authorized='".$fb_gen_authorized."',
		user_last_login=NOW()
		";	
		$result = $mysqli->query($sql_insert);
		if($result && $mysqli->affected_rows>0){
			$insert_userID = $mysqli->insert_id;
			$sql="
			SELECT * FROM tbl_simple_user WHERE user_fb_authorized='".$fb_gen_authorized."' 
			AND user_fb_connect=1 
			";
			$result = $mysqli->query($sql);
			if($result && $result->num_rows>0){  // มีสมาชิกที่ล็อกอินด้วย facebook id นี้ในระบบแล้ว
				// ดึงข้อมูลมาแสดง และสร้าง session
				$row = $result->fetch_array();
				$_SESSION['ses_user_id']=$row['user_id'];
				$_SESSION['ses_user_name']=$row['user_name'];		
				$_SESSION['ses_user_last_login']=date("Y-m-d H:i:s");				
				// อัพเดทเวลาล็อกอินล่าสุด
				$sql_update="
				UPDATE tbl_simple_user SET 
				user_last_login=NOW()
				WHERE user_id='".$row['user_id']."'
				";
				$mysqli->query($sql_update);							
			}
		}
		
	}
/*echo "<pre>";
echo $fb_gen_authorized;
print_r($_POST);
echo "</pre>";*/
}
 

ไฟล์ logout.php

<?php
session_start();
include("inc/dbconnect.php");
unset(
	$_SESSION['ses_user_id'],
	$_SESSION['ses_user_name']	,
	$_SESSION['ses_user_last_login']
);
exit;


เพิ่มเติม สำหรับการตั้งค่า app id ในการใช้งานการล็อกอินด้วย facebook

ให้เข้าไปที่ https://developers.facebook.com/apps/

จากนั้นเลือก เข้าไปที่ appid ของเราที่ต้องการใช้งาน facebook login

เมือเข้าไปแล้ว ให้ดูที่ เมนูด้านซ้ายหัวข้อ PRODUCTS ดูว่ามีคำว่า Facebook Login หรือไม่
ถ้ายังไม่มีให้กดไปที่

Add Product

หาคำว่า Facebook Login แล้วกดคำ่า Get Started 

ก็จะเข้าสู่การตั้งค่า Facebook Login และเมนูด้านซ้ายก็จะปรากฎ เมนู Facebook Login

หน้าตั้งค่า เราสามารถกำหนดเพิ่ม ตรงคำว่า

Valid OAuth redirect URIs
โดยกรอก url ที่เราต้องการอนุญาตให้ใช้งาน Facebook Login 
โดยสามารถกำหนดได้หลายค่า เช่น http://www.ninenik.com หรือถ้าต้องการให้สามารถทดสอบใช้งานที่ loalhost 
ได้ ก็กำหนดเพิ่ม http://localhost แต่เมื่อไม่ได้ใช้ ควรลบส่วนของ localhost  ออก 
จากนั้นหด Save Change

คำเตือน สำหรับ APPID  ใหม่ๆของ facebook จะมีการกำหนดค่าบางค่า ต่างจาก APPID รุ่นก่อน 

ดังนั้นกรณีดึงข้อมูล ให้เปลี่ยนเดังนี้  

แก้ไขบรรทัด
 
                    FB.api('/me', function(response) { // ไปดึงข้อมูลข้อผู้ใช้
 
เปลี่ยนเป็น
 
                   FB.api('/me?fields=id,name,first_name,last_name,email', function(response) { // ไปดึงข้อมูลข้อผู้ใช้
 
โดยค่า  id,name,first_name,last_name,email สามารถดูเพิ่มเติมได้ที่
 
https://developers.facebook.com/docs/graph-api/reference/user/
 
ว่าต้องการค่าใดบ้างมาใช้งาน โดยคั่นแต่ละค่าด้วย คอมม่า ( , )



 



เนื้อหาที่เกี่ยวข้อง



Tags:: facebook sdk sdk javascript facebook login

เนื้อหาพิเศษ เฉพาะสำหรับสมาชิก

กรุณาล็อกอิน และลงชื่อติดตาม


สมัครสมาชิกได้ที่        ล็อกอินได้ที่   



ส่วนของการตรวจสอบตัวแปร $_GET['code'] และ $_GET['error'] ด้วย PHP เราสามารถประยุกต์ใช้
ฟังก์ชั่นตามเนื้อหานี้แทนได้ กรณีเราทำเป็นไฟล์ javascript ซึ่งจะไม่สามารถใช้โค้ดคำสั่ง PHP ได้

แทน

<?php   
// กำหนดค่าไว้เพื่อรองรับ การล็อกอิน facebook เช่นถ้าล็อกอินสำเร็จ จะได้ตัวแปร $_GET['code']  
// ถ้าล็อกอินหรือเชื่อมต่อ facebook ผิดพลาดจะได้ตัวแปร $_GET['error'] เมื่อเข้าเงื่อนไข  
// ตัวโปรแกรมก็จะไปเรียกใช้งานฟังก์ชั่นล้อกอินใหม่ จะกว่าจะทำงานสำเร็จ เพื่อสร้าง session ไอดี สมาชิก  
if(isset($_GET['code']) || isset($_GET['error'])){ ?>  
fb_login();   
<?php } ?>  


ด้วย

	var _get = function(val){
		var result = null; // กำหนดค่าเริ่มต้นผลลัพธ์
			tmp = []; // กำหนดตัวแปรเก็บค่า เป็น array
			// เก็บค่า url โดยตัด ? อันแรกออก แล้วแยกโดยตัวแบ่ง &
		var items = location.search.substr(1).split("&"); 
		for(var index = 0; index < items.length; index++) { // วนลูป
			tmp = items[index].split("="); // แยกระหว่างชื่อตัวแปร และค่าของตัวแปร
			// ถ้าค่าที่ส่งมาตรวจสอบชื่อตัวแปรตรง ให้เก็บค่าผลัพธ์เป็นค่าของตัวแปรนั้นๆ
			if(tmp[0] === val) result = decodeURIComponent(tmp[1]);
		}
		return result;  // คืนค่าของตัวแปรต้องการ ถ้าไม่มีจะเป็น null
	}
	if(_get('code') || _get('error')){ // ใช้ตรวจสอบ ถ้ามีการส่งค่าของตัวแปร code หรือ error
		fb_login();   
	}		


อ่านเพิ่มเติมที่

แนวทางฟังก์ชั่น การตรวจสอบตัวแปร GET ที่มากับ url ด้วย javascript 
http://www.ninenik.com/content.php?arti_id=720 via @ninenik

 



URL สำหรับอ้างอิง