Bagi anda yang sering mengunjungi website, baik itu web portal atau toko online yang sering menanyakan informasi terhadap pengunjung webnya. Salah satu nya adalah untuk mengantisipisasi orang yang sedang berkunjung di website kita adalah orang. Halaaahh sampe segitunya, haha kita ambil contoh lainnya, mungkin kita pernah diminta untuk melakukan SignUp atau Login menggunakan akun facebook anda? kok bisa ya kita login dengan menggunakan akun Facebook kita? untuk penjelasannya coba deh googling dengan keyword “apa itu OAuth?” :D

Baiklah jika kita sudah mengetahui jawaban mengenai OAuth itu sendiri kita akan membuat skrip login sederhana menggunakan Facebook Login. Mengapa kita menggunakan Facebook Login? mungkin jaman sekarang siapa yang tidak memiliki akun Facebook? walaupun akun tersebut jarang sekali dibuka hehe… ya dengan adanya Facebook Login ini kita dapat mempersingkat waktu pengunjung website kita dalam proses login itu sendiri karena kita diberi akses untuk mengetahui data publik pengunjung kita tanpa harus mengetiknya, bagaimana? masih bingung? hehe

Jadi intinya dengan menggunakan fasilitas Facebook login ini, anda diberi kemudahan dalam proses login dalam suatu website karena memanfaatkan informasi dari Facebook anda :)

Oke langsung aja pada penerapannya :D

Langkah 1 : Database

CREATE TABLE `users` (
    `id` int(10) unsigned NOT NULL AUTO_INCREMENT,
    `oauth_provider` varchar(10),
    `oauth_uid` text,
    `username` text,
    PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1;

Dalam table tersebut terdapat id, oauth_provider, oauth_uid dan username yang nantinya akan menyimpan data-data facebook user setelah melakukan login..

Langkah 2 : Membuat Aplikasi di Facebook

Untuk dapat mendaftarkan aplikasi anda di facebook caranya mudah sekali, silahkan klik http://developers.facebook.com setelah itu nanti kamu bakalan disuruh untuk mengisi beberapa field seperti tampak pada gambar dibawah ini..

Keterangan :

  1. Pada label nomer satu yaitu AppId dan AppSecret yang nantinya kamu gunakan untuk menggunakan Facebook PHP SDK yang nantinya kita akan gunakan :D
  2. Pada label nomer dua berisi field yang digunakan ketika script login kita dijalankan atau di redirect :D

Oke selanjutnya kita akan mendownload ramuan intinya, disini kita akan menggunakan Facebook PHP SDK, maka silahkan klik link dibawah ini

https://github.com/facebook/facebook-php-sdk

Jika anda sudah mendownloadnya, seharusnya terdapat beberapa file.. sekarang kita fokus saja pada file yang berada di dalam folder /src

didalam folder /src tadi seharusnya berisi dua buah file yaitu:

  1. base_facebook.php
  2. facebook.php

Langkah 3 : Penerapan Skrip

Baiklah langkah terakhir yaitu penerapan Facebook PHP SDK tersebut pada aplikasi website yang kita buat. Disini anggap saja kita memiliki dua buah file atau dua buah halaman…

  1. Halaman pertama berfungsi sebagai halaman awal dari aplikasi kita, jadi di halaman ini terdapat link yang ditujukan pada pengguna untuk memulai login menggunakan Facebook Login
  2. Halaman kedua berfungsi untuk memproses ketika user melakukan login facebook dan memasukan data user tersebut kedalam table yang telah kita buat sebelumnya :D
NOTE: sebelumnya perlu diketahui bahwa pada postingan ini sistem folder adalah sebagai berikut:
  • ROOT
    • Folder src
      • File facebook.php
      • File base_facebook.php
    • Folder Login
      • File index.php
      • File proses.php

Oke langsung saja ya, pertama kita buat dulu file yang bernama index.php

<?php
<?php

session_start();
?>
<h2>Welcome,
<?php
	if(!empty($_SESSION) {
		echo $_SESSION['username'];
	} else {
		echo 'Guest | <a href="proses.php">Login?</a>';
?></h2>

File tersebut jika dijalankan memiliki dua kondisi, yaitu ketika pengguna belum mendaftar maka akan memunculkan link untuk login dengan menggunakan Facebook Login tetapi jika pengguna telah melakukan login dan datanya sudah ada dalam table kita maka akan memunculkan username Facebook pengguna :D

Selanjutnya kita buat file proses.php yang isinya sebagai berikut..

<?php
session_start();
require '../src/facebook.php';

$facebook = new Facebook(array(
  'appId'  => 'nama_app_id_anda',
  'secret' => 'nama_app_secret_anda',
));

// Get User ID
$user = $facebook->getUser();

if (!empty($user)) {
  try {

    $user_profile = $facebook->api('/me');
  } catch (FacebookApiException $e) {
    error_log($e);
    $user = null;
  }

  if(!empty($user_profile)) {

		mysql_connect('localhost', 'root', '');
		mysql_select_db('nama_database');

		//Mengecek apakah user sudah mendaftar atau belum
		$query = mysql_query("SELECT * FROM users WHERE oauth_provider = 'facebook' AND oauth_uid = ".$user_profile['id']);
		$result = mysql_fetch_array($query);

		if($result == null) {

			//Memasukan data user
			$query = mysql_query("INSERT INTO users(oauth_provider, oauth_uid, username) VALUES('facebook', {$user_profile['id']}, '{$user_profile['username']}')");
			$query = mysql_query("SELECT * FROM users WHERE id = ".mysql_insert_id());
			$result = mysql_fetch_array($query);
		}
		// Mengeset SESSION
		$_SESSION['id'] = $result['id'];
		$_SESSION['oauth_uid'] = $result['oauth_uid'];
		$_SESSION['oauth_provider'] = $result['oauth_provider'];
		$_SESSION['username'] = $result['username'];

	}
	  else {
		die("Terjadi Kesalahan");
		}
}
else {

	$login_url = $facebook->getLoginUrl();
	header("Location: ".$login_url);
}
?>

File proses.php tersebut berfungsi untuk mengecek apakah user telah terdaftar dalam table atau website kita? jika sudah terdaftar maka akan diset session dan dikembalikan ke halaman index.php tetapi jika belum maka akan dilakukan proses redirect ke halaman login facebook dengan memanfaatkan sintaks $facebook->getLoginUrl(); pada bagian akhir baris…

Langkah 4 : Pengetesan

Untuk langkah pengetesan ini, silahkan anda masukan url yang merujuk pada index.php tadi, dan jika sudah seharusnya anda diharuskan login karena session anda belum dibuat. Untuk dapat dibuatkan session maka anda disuruh untuk mengklik login dan ketika anda klik login anda merujuk pada halaman login facebook. Setelah anda berhasil login maka anda dikembalikan pada halaman proses.php tadi yang berfungsi untuk mengambil data publik facebook anda dan memasukannya kedalam tabel database yang telah kita buat tadi. Setelah data kita berada di dalam tabel database tersebut maka secara otomatis user tersebut dibuat kan session… :D

Oke dengan dua buah file tadi yang telah kita buat dan ditambah Facebook SDK untuk Login telah selesai… Sekarang silahkan mencobanya. Dengan adanya fasilitas login seperti ini maka diharapkan proses login akan lebih mudah dan menyenangkan :Dheheh

Sekian postingan kali ini :DSalam Blogger! ⤧  Next post Membuat Responsive Web Part 1 – Hello World ⤧  Previous post Upload Drag and Drop File Menggunakan dropzone.js