เนื้อหานี้จะเป็นการประยุกต์ใช้งาน การล็อกอินด้วย 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: %s\n", $mysqli->connect_error);
exit();
}
if(!$mysqli->set_charset("utf8")) {
printf("Error loading character set utf8: %s\n", $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
โดยสามารถกำหนดได้หลายค่า เช่น https://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 สามารถดูเพิ่มเติมได้ที่
ว่าต้องการค่าใดบ้างมาใช้งาน โดยคั่นแต่ละค่าด้วย คอมม่า ( , )
เนื้อหาที่เกี่ยวข้อง