Munu

วิธีการทำ login Facebook กับเว็บไซต์

หน้าแรก » ข่าวสาร » วิธีการทำ login Facebook กับเว็บไซต์


 

วิธีการทำ login แบบนี้เริ่มต้นก็ต้องออกแบบฐานข้อมูลก่อนครับ โดยมี ตาราง open_ids เพิ่มขึ้นมา โดยมีฟิลด์ที่เก็บประมาณนี้

user_id (ของเว็บเราเอง)
service (twitter, facebook, google)
uid (id ของเว็บที่จะเป็นตัว login เรา)
access_token (token ที่ได้รับมาหลังจาก login)
dump (serialize data ทุกอย่างที่ปลายทางคืนมา)

พอมี table นี้แล้ว ทีนี้เราจะทำให้เว็บเรา login กับอะไรก็ได้ ที่เรา implement

Concept ของ facebook, twitter จะเป็นเหมือนกันคือใช้ oAuth แต่ detail ยังมีความต่างกันนิดนึง

Facebook นั้น หลังจากที่เราสร้าง ปุ่ม connect แล้ว เวลากดมันจะเป็น popup (หรือจะทำ direct ก็ได้) พอหลังจากที่เรา login cookie จะถูก sync มาที่ domain เราด้วย (ไปตั้งที่ developer ของ facebook)

พอ user login ผ่านมาได้ เราก็เอามาเช็คใน table open_ids ของเรานี่แหละครับ เพราะเค้าจะคืน uid มา

WHERE service=’twitter’ AND uid='[ค่าที่ได้คืนมา]’

โดยที่เราจะเอาค่า user_id set เข้าไปให้ เหมือนกับ login ตามปกติ เท่านี้ก็เรียบร้อยแล้วครับ

 

ตัวอย่างโคดที่ผมใช้งาน

โค๊ด:
if (typeof next_url == ‘undefined’) {
next_url =  “<?php echo (isset($_GET[‘next_url’])) ? $_GET[‘next_url’] : site_url(‘dashboard’, true); ?>”;
}/** Integrate Facebook Connect **/
window.fbAsyncInit = function() {
FB.init({
appId : ‘<?php echo $appId; ?>’,
session : <?php echo json_encode($session); ?>,
status : true,
cookie : true,
xfbml : true
});
};

(function() {
var e = document.createElement(‘script’);
e.src = document.location.protocol + ‘//connect.facebook.net/en_US/all.js’;
e.async = true;
document.getElementById(‘fb-root’).appendChild(e);
}());

$(‘#fb-login, #fb-signup, #fb-signup-full’).bind(‘click’, function() {
FB.login(handleSessionResponse, { perms: ‘offline_access,email,user_birthday,publish_stream,user_about_me’ });
});

function handleSessionResponse(rs) {
if (rs.session && rs.status == ‘connected’) {
$.get(“<?php echo site_url(‘connect/facebook/action’, true); ?>”, function(uid) {
if (uid) {
location.href = next_url;
} else {
location.href= “<?php echo site_url(‘signup/facebook’, true); ?>”;
}
});
}
}

ส่วน link นี้เป็นส่วนการใช้งาน graph api ที่จะเอาพวกค่าต่างๆ มาเก็บ

http://thinkdiff.net/facebook/php-sdk-graph-api-base-facebook-connect-tutorial/
http://developers.facebook.com/docs/plugins/registration/
http://www.jquerytips.com/blogs/view/1126

Tags: , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ,

เรามีทีมงานผู้เชี่ยวชาญที่มีประสบการณ์ด้านเว็บไซต์

มาประยุกต์ในการพัฒนาการให้บริการอยู่ตลอดเวลา เพื่อสร้างความพึงพอใจสูงสุดให้แก่ลูกค้าทุกท่าน
ด้วยประสบการณ์ที่เรามีอยู่นั้น ทำให้มั่นใจได้ว่าลูกค้าทุกท่านจะได้รับการบริการที่ดีจากเรา

Call

082-493-2295

E-mail

Konyubyub@Gmail.com

Location

บริษัท ดีไซน์นำโชค จำกัด
58/146 หมู่ที่ 6 หมู่บ้านซื่อตรง คลอง13 ตำบลบึงน้ำรักษ์ อำเภอธัญบุรี จังหวัดปทุมธานี 12110

2014 Powered by IYATHAI.com
Tel: 082-493-2295 E-mail: Konyubyub@gmail.com