การเชื่อมต่อ facebook และ ล็อกอิน แบบ popup ด้วย php sdk v.3.1.1
14 October 2011แนวทางการประยุกต์ การเชื่อมต่อ facebook ด้วย php sdk v.3.1.1 แบบสร้าง ล็อกอิน
แบบ popup window ด้วย javascript
โดยจะเป็นการประยุกต์ใช้งานจากเนื้อหาเดิม ตามลิ้งค์ด้านล่าง
รูปแบบการทำงานคือ เมื่อทำการคลิกที่ลิ้งค์ สำหรับล็อกอินด้วย facebook ก็จะเปิดหน้า popup
สำหรับกรอกชื่อผู้ใช้ หรือรหัสผ่าน กรณียังไม่ได้ล็อกอิน facebook อยู่ หลังจาก ล็อกอินเสร็จแล้ว
จะลิ้งค์ไปอีกหน้าหนึ่ง สำหรับสร้างค่า session และเช็ค สถานะการล็อกอิน ของผู้ใช้งาน
แล้วปิดหน้า popup นั้นลง พร้อมกับรีโหลดหน้าหลัก เป็นต้น
ดาวน์โหลดไฟล์ทดสอบ ไปปรับใช้ได้ที่
หรือทดสอบตัวอย่างก่อนโหลด
ไฟล์โค้ดตัวอย่าง ที่เกี่ยวข้อง
ไฟล์ test_login_popup.php
<?php
include("fb_connect_popup.php");
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sample FB Login Popup</title>
</head>
<body>
<?php
//pre($fb_user);
?>
<h1>php-sdk 3.1.1</h1>
<?php if($fb_user){ // ถ้ามีการล็อกอิน facebook อยู่แล้ว แสดงลิ้งค์สำหรับ logout ?>
<a href="<?=$logoutUrl?>">Logout</a>
<?php }else{ // ถ้ายังไม่ได้ล็อกอิน แสดงลิ้งค์สำหรับ Login ?>
<div>
Login using OAuth 2.0 handled by the PHP SDK:
<a href="javascript:popup('<?=$loginUrl?>','',500,350);">Login with Facebook</a>
</div>
<?php } ?>
<h3>PHP Session</h3>
<pre><?php print_r($_SESSION); ?></pre>
<?php if($fb_user){ // ถ้ามีการล็อกอิน facebook อยู่แล้ว แสดงข้อมูลของคนๆ นั้น ?>
<h3>You</h3>
<img src="https://graph.facebook.com/<?=$fb_user?>/picture">
<h3>Your User Object (/me)</h3>
<?php
pre($fb_userData);
?>
<?php }else{ // ถ้ายังไม่ได้ล็อกอิน ?>
<strong><em>You are not Connected.</em></strong>
<?php } ?>
<script type="text/javascript">
function popup(url,name,windowWidth,windowHeight){
myleft=(screen.width)?(screen.width-windowWidth)/2:100;
mytop=(screen.height)?(screen.height-windowHeight)/2:100;
properties = "width="+windowWidth+",height="+windowHeight;
properties +=",scrollbars=yes, top="+mytop+",left="+myleft;
window.open(url,name,properties);
}
</script>
</body>
</html>
ไฟล์ fb_connect_popup.php
<?php
session_start(); // กำหนดไว้ กรณีอาจได้ใช้ตัวแปร session
include("inc/facebook.php"); // เรียกใช้งานไฟล์ php-sdk สำหรับ facebook
//
$facebook = new Facebook(array(
'appId' => 'xxxxxx', // appid ที่ได้จาก facebook
'secret' => 'xxxxxxxx', // app secret ที่ได้จาก facebook
'fileUpload' => true, // เปิดใช้ในส่วนของการอัพโหลดรูปได้
'cookie' => true, // อนุญาตใช้งาน cookie
));
// สร้างฟังก์ชันไว้สำหรัดทดสอบ การแสดงผลการใช้งาน
function pre($varUse){
echo "<pre>";
print_r($varUse);
echo "</pre>";
}
// Get User ID
$fb_user = $facebook->getUser();
if($fb_user){
try{
// Proceed knowing you have a logged in user who's authenticated.
$fb_userData=$facebook->api('/me');
}catch(FacebookApiException $e) {
error_log($e);
$user=null;
}
}
if(isset($_GET['logout'])){ // ทำการ logout อย่างสมบูรณ์
$facebook->destroySession(null); // ล่างค่า session ของ facebook
header("Location:".$_SERVER['PHP_SELF']); //ลิ้งค์ไปหน้าที่ต้องการเมื่อ logout เรียบร้อยแล้ว
}
// Login or logout url will be needed depending on current user state.
if($fb_user){
$logoutUrl = $facebook->getLogoutUrl(array(
"next"=>"http://www.ninenik.com/fb/fb3.1.1/test_login_popup.php?logout"
));
} else{
$loginUrl = $facebook->getLoginUrl(array(
"redirect_uri"=>"http://www.ninenik.com/fb/fb3.1.1/fb_checklogin.php",
"display"=>"popup",
"scope"=>"offline_access,publish_stream,email" // คั่นแต่ละค่าด้วย ,(comma
));
}
?>
ไฟล์ fb_checklogin.php
<?php
include("fb_connect_popup.php");
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Check Login</title>
</head>
<body>
<script type="text/javascript">
window.opener.location.reload();
window.close();
</script>
</body>
</html>
บทความในหมวดที่่น่าสนใจ อื่นๆ
บทความคนเข้าอ่านวันนี้
05 Nov 09 เช็ค บราวเซอร์ Browser ด้วย php อย่างง่าย อ่าน 2309 17 Oct 08 แสดงตัวอย่างรูป ก่อน upload image preview berfore upload อ่าน 9241 25 Sep 08 รู้จักฟังก์ชันของ jQuery ในการเรียกใช้ Class ใน CSS อ่าน 2778 01 Feb 10 การใช้งาน method delay() ใน jQuery 1.4 อ่าน 2772 17 Nov 08 ตรวจสอบฟอร์ม form ก่อน submit ด้วย jquery อ่าน 9443 10 Sep 10 ค้นหา พิกัด ค่า latitude และ longitude ใน Google Map จากฃื่อสถานที่ อ่าน 5944 16 Jul 11 แทรก +1 button ในเว็บจาก google plus อ่าน 1037 04 Jan 10 ดึงไฟล์ xml (rss) ไฟล์แบบ cross domain มาแสดงด้วย ajax ใน jQuery อย่างง่าย อ่าน 3700 06 Sep 10 ประยุกต์ การ invite friends ใน facebook มาใช้งาน อ่าน 3370 11 Feb 11 แนะนำ การใช้งาน jQuery quicksearch plugin อ่าน 3090 04 Nov 08 การจำกัดจำนวนตัวอักษร ใน textarea ด้วย jquery อ่าน 4346 08 Feb 11 แท็บเมนู tab menu แนวตั้งอย่างง่าย ด้วย jQuery อ่าน 4116 13 Oct 08 คำสั่ง SQL LIKE อ่าน 4599 07 Sep 11 นาฬิกาเวลา จาก server อย่างง่าย อ่าน 1011 04 Nov 09 ประยุกต์สร้าง pdf ไฟล์ จาก tcpdf class ด้วย php รองรับภาษาไทย อ่าน 5408 22 Mar 11 การกำหนด แท็ก html ในตัวแปร JavaScript อย่างง่าย อ่าน 1623 24 Feb 11 ยืนยันการเปลี่ยนแปลงข้อมูลใน select option ด้วย javascript อย่างง่าย อ่าน 1797 19 Jul 10 การนำ ระบบสมาชิก ของ facebook มาประยุกต์ใช้ อ่าน 5672 09 Jul 10 เพิ่มความเร็ว ให้กับการ cache ด้วย jquery ajax และ php cache class อ่าน 2342 19 Jan 11 อักขระคั่น (Delimiters) ในการใช้งาน Regular Expressions ของ PHP อ่าน 1116