Login facebook sử dụng PHP

Ngày nay thì người dùng rất ít khi quan tâm tới việc điền vào một cái form để có thể đăng ký được một tài khoản bất kỳ trên một website. Quy trình đăng ký đơn giản giúp website của bạn thu hút được người dùng đăng ký tài khoản. Một trong số đó là đăng nhập vào website của bạn thông qua tài khoản mà người dùng đã đăng ký với MXH Facebook, hoặc Google là một cách nhanh chóng để tích hợp chức năng đăng ký và đăng nhập trên website của bạn. Chúng ra không thể phủ nhận mức phổ biến của mạng xã hội Facebook càng ngày càng rộng lớn. Đăng nhập vào website của bạn thông qua đăng nhập facebook cho phép người dùng đăng nhập vào trang web của bạn bằng cách sử dụng tài khoản facebook mà họ đã đăng ký trên facebook mà không cần đăng ký trên trang web của bạn.

Trong bài viết này mình sẽ hướng dẫn cách bạn có thể thực hiện đăng nhập người dùng bằng tài khoản facebook sử dụng PHP và lưu trữ dữ liệu người dùng vào CSDL MySQL. Chúng ta sẽ không sử dụng Facebook PHP SDK với Facebook Graph API để xây dựng nữa mà thay vào đó chúng ta sẽ sử dụng Ajax + Javascript SDK.

Trước khi bạn bắt đầu tích hợp Đăng nhập với Facebook bằng PHP, Mình có cấu trúc thư mục như sau..

• config_db.php
• index.php
• login.php
• script.js

Thực ra thì chủ đề này có khá là nhiều ở trên mạng bạn chỉ cần nên Google search một cái thì ra cả đống.

1. Tạo ứng dụng facebook APP

Để có thể truy xuất vào Facebook API thì bạn cần tạo một ứng dụng Facebook APP. Trên thực tế là khi người dùng click vào Đăng nhập facebook là người dùng đăng nhập vào ứng dụng của bạn. Để có thể bắt đầu tạo một ứng dụng bạn truy cập vào https://developers.facebook.com/

Truy cập vào Ứng dụng của tôi -> Tạo ứng dụng mới.

2. Tạo database table Users

Để có thể lưu trữ thông tin người dùng đăng nhập hoặc đăng ký thông qua tài khoản Facebook thì mình cần tạo một bảng dữ liệu như trong ví dụ này mình sẽ tạo một bảng Users.

CREATE TABLE `Users` (
  `id` int(10) unsigned NOT NULL AUTO_INCREMENT,
  `oauth_provider` varchar(255) NOT NULL,
  `oauth_uid` varchar(255) NOT NULL,
  `full_name` varchar(255) NOT NULL DEFAULT '1',
  `first_name` varchar(255) CHARACTER SET utf8 NOT NULL DEFAULT ',
  `last_name` varchar(255) CHARACTER SET utf8 NOT NULL,
  `email` varchar(255) CHARACTER SET utf8 NOT NULL,
  `gender` varchar(255) CHARACTER SET utf8 NOT NULL,
  `locale` varchar(255) CHARACTER SET utf8 NOT NULL,
  `picture` varchar(255) CHARACTER SET utf8 NOT NULL,
  `link` varchar(255) CHARACTER SET utf8 NOT NULL,
  `order_no` int(10) unsigned NOT NULL DEFAULT '0',
  `reg_date` int(10) NOT NULL,
  `upd_date` int(10) NOT NULL,
  `is_trash` tinyint(1) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=3 DEFAULT CHARSET=latin1;

2.1. File config_db.php

Trong file này sẽ chứa những thông tin được sử dụng để kết nối CSDL.

<?php 
	define("DB_HOST", "localhost");
	/** The name of the database for demo */
	define("DB_NAME", "MySQLDemo");
	/** MySQL database username */
	define("DB_USER", "root");
	/** MySQL database password */
	define("DB_PASS", "");
	
	// Kết nối tới CSDL
	$dbconn = mysqli_connect(DB_HOST,DB_USER,DB_PASS,DB_NAME) or die("");
	if(!$dbconn){
		die("Can't connect database ".mysqli_connect_error());
	}
	mysqli_query("SET NAMES 'utf8'");
?>

Trong bài viết này mình sẽ sử dụng MySQLi. Nếu bạn chưa lắm rõ các câu lệnh SELECT hay INSERT thì bạn có thể xem các bài viết của mình tại chuyên mục PHP & MySQL

2.2. Javascript

Bạn cần include vào thư viện của JQuery

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

2.3. File index.php

Nếu người dùng thực sự đã đăng nhập loged_in=1 và loged_id > 0 cùng với tài khoản facebook thì trạng thái đăng nhập sẽ được hiển thị. Ngược lại thì sẽ hiển thị nút đăng nhập facebook.

<?php 
	// Include config DB
	require_once('config_db.php');
	// Check user loged in
	$loged_id = 0;
	if(isset($_SESSION['loged_in']) && $_SESSION['loged_in']==1){
		$loged_id = $_SESSION['loged_id'];
		$sql = "SELECT * FROM Users WHERE id='$loged_id'";
		$result = mysqli_query($dbconn, $sql);
		$fbUser = mysqli_fetch_assoc($result);
	}
?>

<div class="nav navbar-nav navbar-account pull-right" id="account-box">
    <?php if($loged_id > 0){ ?>
    <div class="loged_information">
        <a class="picture" href="<?php echo $fbUser['link']; ?>"><img awidth="30px" height="30px" src="<?php echo $fbUser['picture']; ?>" /></a>
        <p class="info"><b>Xin chào:</b> <?php echo $fbUser['full_name']; ?><br /> <a href="javascript:void(0);" onclick="fbLogout()">Logout</a></p>
    </div>
    <?php }else{ ?>
    <a href="javascript:void(0);" onclick="javascript:fbLogin();">
        <img src="facebook-button.jpg" awidth="160px" />
    </a>
    <?php } ?>
</div>

2.4. Logout

Khi người dùng muốn đăng xuất khỏi tài khoản của họ. Thì action này sẽ được thực thi

if(isset($_POST['action']) && $_POST['action']=='logout'){
	unset($_SESSION['loged_in']);
	unset($_SESSION['loged_id']);
	#
	echo(1);
	die();
}

2.5 File xử lý login.php

<?php 
	// Start session
	session_start();
	
	// Include config DB
	require_once('config_db.php');
	
	// Logout 
	if(isset($_POST['action']) && $_POST['action']=='logout'){
		unset($_SESSION['loged_in']);
		unset($_SESSION['loged_id']);
		#
		echo(1);
		die();
	}
	else{
		// Login
		$fbUser = $_POST['fbUser'];
		$oauth_provider = $_POST['oauth_provider'];
		
		$oauth_uid = $fbUser['id'];
		$first_name = $fbUser['first_name'];
		$last_name = $fbUser['last_name'];
		$email = $fbUser['email'];
		$link = $fbUser['link'];
		$gender = $fbUser['gender'];
		$locale = $fbUser['locale'];
		$picture = $fbUser['picture']['data']['url'];
		
		$sql = "SELECT * FROM Users WHERE oauth_provider='_facebook' and oauth_uid='$oauth_uid' limit 0,1";
		$result = mysqli_query($dbconn, $sql);
		
		if(mysqli_num_rows($result) > 0){
			// Nếu user này đã tồn tại trong CSDL
			// Chỉ cần lấy User ID và gán nó vào biến SESSION
			while($row = mysqli_fetch_assoc($result)){
				$id = $row['id'];
			}
		}else{
			// Thêm mới nếu user này chưa tồn tại
                        // Sau đó cần lấy User ID và gán nó vào SESSION
			$f = "oauth_provider,oauth_uid,full_name,first_name,last_name,email,gender,locale,picture,link,reg_date";
			$full_name = $first_name .' '.$last_name;
			$v = "'$oauth_provider'
			,'$oauth_uid'
			,'$full_name'
			,'$first_name'
			,'$last_name'
			,'$email'
			,'$gender'
			,'$locale'
			,'$picture'
			,'$link'
			,'".time()."'";
			$sql = "INSERT INTO Users (".$f.") VALUES(".$v.")";
			mysqli_query($dbconn, $sql);
			
			// Lấy User ID mà người dùng vừa Login
           		$id = mysqli_insert_id($dbconn);
		}
		// Gán SESSION
		$_SESSION['loged_in'] = 1; // Thiết lập trạng thái đã đăng nhập
		$_SESSION['loged_id'] = $id; // User ID 
		
		// Output
		echo ($id);
		die();
	}
?>

2.6 File script.js

window.fbAsyncInit = function() {
	FB.init({
	  appId      : '1277200368995645',
	  xfbml      : true,
	  version    : 'v2.8'
	});
	FB.AppEvents.logPageView();
	
	FB.getLoginStatus(function(response) {
		if (response.status === 'connected') {
			//display user data
			console.log(response);
			//getFbUserData();
		}
	});
};
(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'));
// Login to facebook
function fbLogin() {
	FB.login(function (response) {
		if (response.authResponse) {
			// Get and display the user profile data
			actionToSignIn(response.authResponse.accessToken);
		} else {
			document.getElementById('status').innerHTML = 'User cancelled login or did not fully authorize.';
		}
	}, {scope: 'email'});
}
// Logout from facebook
function fbLogout() {
	$.ajax ({
		type : "POST",
		url: 'login.php',
		data: {oauth_provider: '_facebook', action: 'logout'},
		dataType : "html",
		success : function(data){
			var html = '<a href="javascript:void(0);" onclick="javascript:fbLogin();">'
			+'<img src="facebook-button.jpg" awidth="160px" />'
			+'</a>';
			document.getElementById('account-box').innerHTML = html;
		}
	});
}
// Hàm xử lý Login
function actionToSignIn(accessToken){
    FB.api('/me', {locale: 'en_US', fields: 'id,first_name,last_name,email,link,gender,locale,picture'},
    function (response) {
		$.ajax({
			type : "POST",
			url : 'login.php',
			data : {oauth_provider: '_facebook', fbUser: response },
			dataType : 'html',
			success : function(data){
				var html = '<div class="loged_information">'
				+' <a class="picture" href="'+response.link+'"><img src="'+response.picture.data.url+'" awidth="30px" height="30px" /></a>'
				+' <p class="info"><b>Xin chào:</b> '+response.first_name+' '+response.last_name+'<br />'
				+' <a href="javascript:void(0);" onclick="fbLogout();">Logout</a></p>'
				+' </div>';
				document.getElementById('account-box').innerHTML = html;
			}			
		});
    });
}

3. Tổng kết.

Trên đây mình đã hướng dẫn các bạn làm chức năng đăng nhập thông qua tài khoản Facebook. Trên thực tế chúng ta còn một cách nữa để hoàn thiện chức năng này là sử dụng Facebook SDK. Nói chung nó cũng tương tự như vậy mình thích sử dụng Ajax vì nó cũng khá đơn giản.