Cara Membuat Fitur Login With Facebook Dengan PHP MySQL & Facebook PHP SDK

Hai, Selamat pagi :) Beberapa orang sangat malas untuk mengisi form register untuk menjadi member di suatu website karena harus menginput nama, email, password dan lainya sehingga membuat maas dan akhirnya gak jadi register deh :p .

Gimana solusinya ya?? Hampir semua orang memiliki akun facebook entah itu untuk bisnis atau untuk akun pribadi bahkan ada yang 1 orang memiliki 30 akun facebok wow :p Lah hubunganya apa??

Hubunganya, Facebook menyediakan fitur OAuth yang bisa dijadikan alternatif sebagai register method daripada harus ribet2 ngisi data register, Mending login pake akun facebook tinggal masukin email & password iya kan :D

DAFTAR AKUN FACEBOOK DEVELOPER.

Apa saja yang akan didapatkan jika mendaftar akun developer? Banyak, Kamu bisa menghadirkan fitur facebook di website kamu, Di aplikasi android kamu, Di aplikasi iOS kamu, dan banyak lainya :D. 

Facebook memang sengaja membuat API untuk memudahkan para developer untuk menghadirkan fitur yang terdapat di facebook ke aplikasi yang sedang kamu buat contohnya yang sekarang akan kita buat ini :D

Bagaimana si cara daftar akun developer? Silahkan akses https://developers.facebook.com Jika kamu belum pernah mendaftar akun developer maka kamu akan disuguhi penampilan seperti screenshoot diatas gan, Silahkan klik mendaftar. 

Lalu facebook akan bertanya apakah kamu menyetujui privacy policy dan kebijakan facebok, Silahkan switch tombol yang ada diamping kanan sehingga menjadi seperti screenshoot dibawah ini. 

Lalu untuk alasan keamanan, Facebook akan memverifikasi nomor telponmu Masukan saja seperti yang diminta :D.

Buat kamu yang memiliki kartu kredit, Kamu juga bisa verifikasi menggunakan kartu kredit juga lhoo wkwkwk.

Jika sudah selesai verifikasi, Kamu akan ditanyai akan membuat aplikasi berbasis apa, Karena kita akan membuat aplikasi berbasis web, Maka pilih yang web ya :D.

Pilih Skip and Create APP ID yang berada di pojok kanan atas gan :D

Lalu isi data aplikasi kamu seperti nama tampilan dan email kontak seperti 

screenshoot dibawah ini :D

Nama tampilan akan digunakan saat seseorang menggunakan layanan login facebook websitemu gan kayak ss dibawah ini deh :D.

Kalau sudah kamu akan dibawa ke halaman aplikasi kamu seperti dibawah ini.

Lalu klik pengatrun yang ada di sidebar sebelah kiri gan, Sehingga kamu akan dibawa ke halaman sperti dibawah ini .

isi domain aplikasi yang akan kamu whitelist maksudnya adalah domain yang akan kamu gunakan untuk fitur ini, karena kita mau coba di localhost isi localhost saja dulu, Nanti kalo udh di real project baru di aplikasikan dengan benar :)

Selanjutnya scroll kebawah lalu klik add platform, Dan pilih web seperti screenshoot dibawah.

Jika berhasil akan muncul platform baru seperti ss dibawah :D.

Ok, Saatnya mengaktifkan aplikasi kamu :) , Klik Tinjauan Aplikasi di sidebar sebelah kiri, Lalu kamu akan dibawa ke halaman seperti ss dibawah ini.

Switch tombol Jadikan bersifat publik jadi on, Dan kamu akan dimitai konfirmasi, Konfirmasi saja hehe :D

Buat akun facebook developer Selesai!!...

TIME TO CODE!.

Setelah membuat aplikasi di facebook developer, Kamu akan mendapatkan app id dan secret id jangan pernah share secret id nya!!. 

Silahkan download facebook SDK melalui link https://github.com/facebook/facebook-php-sdk-v4 atau download langsung di https://github.com/facebook/facebook-php-sdk-v4/archive/master.zip Atau download melalui server rizalfakhri.com di https://files.rizalfakhri.com/facebook-php-sdk-v4-5.0.0.zip?token=lsjkdhheujabjmckdj.

Anggap saja document root website kamu adalah var/www/public_html, SIlahkan buat file baru namanya sdk.

Silahkan extract file yang kamu download tadi dimana saja. Karena kita tidak membutuhkan semua source codenya, Silahkan copy isi dari file src/Facebook ke directory sdk yang baru saja kamu buat.

1. Buat database.

Silahkan buat database namanya terserah, bisa test_login_faceboot atau apapun terserah deh :D, Jika sudah membuat database, Silahkan jalankan SQL query dibawah ini. 

CREATE TABLE IF NOT EXISTS `user` (
  `id` int(13) NOT NULL AUTO_INCREMENT,
  `nama` varchar(255) NOT NULL,
  `email` varchar(255) NOT NULL,
  `password` varchar(255) NOT NULL,
  `token` tinytext NOT NULL,
  PRIMARY KEY (`id`),
  UNIQUE KEY `id` (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;

Kita hanya akan mengambil data nama, email dan token saja ya, Anggap saja table diatas adalah table yang digunakan untuk login ke layanan web kamu :D

2. config.php

Config.php menyimpan semua informasi sensitif, Pastikan jangan pernah kamu share ke orang yang tidak kamu percayai. Paste kode dibawah ini.

<?php
require_once 'sdk/autoload.php'; // load file autoload dari facebook

$appId     = "app id mu"; // replace dengan app id yang kamu dapatkan di facebook developer
$appSecret = "app secret mu"; // replace dengan secret key yang kamu dapatkan di facebook developer

class db {

  function __construct() {
    $dbhost = "host databasemu"; // replace dengan database host kamu
    $dbuser = "user databasemu"; // replace dengan databae user kamu
    $dbpass = "pass databasemu"; // replace dengan database pass kamu
    $dbname = "nama databasemu"; // replace dengan database name kamu
    $this->mysqli = new mysqli($dbhost,$dbuser,$dbpass,$dbname );
    if(mysqli_connect_error()) {
      die("Tidak Bisa Konek Ke Database Karena : ". mysqli_connect_errno());
    }
  }

  function redirect($url) {
    echo "<script type='text/javascript'>window.top.location='$url';</script>";
  }
} 

3. index.php

Index.php berguna sebagai homepage websitemu atau istilahnya page yang hanya boleh diakses jiak user tersebut telah login gitu :p, paste kode dibawah ini.

<?php
session_start();
require_once 'config.php';
$fb = new Facebook\Facebook([
  'app_id' => $appId,
  'app_secret' => $appSecret,
  'default_graph_version' => 'v2.5',
]);

if(empty($_SESSION['facebook_session'])) {
  echo "

  <html>
  <head>
  <title>Belajar Login With Facebook</title>
  <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>
  <script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script>
   <script src='https://www.google.com/recaptcha/api.js'></script>
  </head>
  <body>
  <style>
        body {
        background: url(http://il8.picdn.net/shutterstock/videos/8543482/thumb/1.jpg) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        }
        .panel-default {
        opacity: 0.9;
        margin-top:30px;
        }
        .form-group.last { margin-bottom:0px; }
  </style>
  <div class='container'>
    <div class='row'>
      <div class='col-md-12'>
        <div class='panel panel-default'>
          <div class='panel-heading'>
          <span class='glyphicon glyphicon-option-vertical'></span> BELUM LOGIN TERDETEKSI
          </div>
          <div class='panel-body' style='word-wrap: break-word;'>
           <div class='col-md-12'>
             <h1 style='text-align:center;'>Kelihatanya anda belum login, Silahkan login terlebih dahulu dengan klik tombol dibawah ini.</h1><br /><br />
             <a href='login_fb.php'><img src='login_fb.png' style='margin-left:35%;'></img></a>
         </div>
              <div class='form-group'>
                <div class='col-md-12'>
                  <hr>
                  <p style='text-align:center;'>Copyright &copy; " . date('Y') ." rizalfakhri</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
  </html>

  ";
} else {
  $token    = $_SESSION['facebook_session'];
  $data     = $fb->get("/me?fields=id,name,email,picture,link,gender",$token);
  $user     = $data->getGraphUser();
  $input    = new db();
  $nama     = $user['name'];
  $email    = $user['email'];
  if($cek = $input->mysqli->query("SELECT * FROM user WHERE token = '$token' ")) {
    if($cek->num_rows < 1 ) {
      if($input->mysqli->query("INSERT INTO user(nama,email,token) VALUES('$nama','$email','$token')")) {
        $input->redirect("http://" . $_SERVER['SERVER_NAME']);
      }
    }
  }
 $cek_pass = "SELECT * FROM user WHERE token = '$token' ";
  if($cek_pass = $input->mysqli->query($cek_pass)) {
    if($cek_pass->num_rows > 0 ) {
      if($data = mysqli_fetch_array($cek_pass)) {
        if($data['password'] == "") {
          $pesan = "
           <div class='col-md-12'>
            <div class='panel panel-default'>
             <div class='panel-heading'>
              <span class='glyphicon glyphicon-lock'></span>
               SET PASSWORD
             </div>
             <div class='panel-body'>
              <h1 style='text-align:center'>Tingal 1 Langkah Lagi, Silahkan Buat Password Anda :D </h1><br />
              <div class='col-md-6 col-md-offset-3'>
              <form method='post'>
              <div class='form-group'>
               <label for='password'>Password </label>
               <input type='password' class='form-control' placeholder='Password' name='password'>
              </div>
              <div class='form-group'>
               <label for='cpassword'>Confirm Password</label>
               <input type='password' class='form-control' name='cpassword' placeholder='Confirm Password'>
              </div>
               <button class='btn btn-success' style='width:100%' type='submit' name='btn-save-password'>SAVE!</button>
             </form>
            </div>
           </div>
          </div>
          ";
        }
      }
    }
  }
  ?>

  <!DOCTYPE html>
  <html>
  <head>
  <title>Belajar Login With Facebook</title>
  <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>
  <link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css' rel='stylesheet' integrity='sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1' crossorigin='anonymous'>
  <script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script>
   <script src='https://www.google.com/recaptcha/api.js'></script>
  </head>
  <body>
  <style>
        body {
        background: url(http://il8.picdn.net/shutterstock/videos/8543482/thumb/1.jpg) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        }
        .panel-default {
        opacity: 0.9;
        margin-top:30px;
        }
        .form-group.last { margin-bottom:0px; }
  </style>
  <div class='container'>
    <div class='row'>
      <?php

      if(isset($_POST['btn-save-password'])) {
        $password  = md5(md5($_POST['password']));
        $cpassword = md5(md5($_POST['cpassword']));
        if($password != $cpassword) {
          echo "

          <br />
          <div class='alert alert-danger'>
           Password Konfirmasi Harus Sama!
          </div>

          ";
        } else {
          if($input->mysqli->query("UPDATE user SET password = '$cpassword' WHERE token = '$token'")) {
            echo "
            <br />
            <div class='alert alert-success'>
             Password Sukses Disimpan :)
            </div>
            ";

            $input->redirect("http://" . $_SERVER['SERVER_NAME']);
          }
        }
      }

      if(isset($pesan)) {
        echo $pesan;
      }

      ?>
     <div class='col-md-3'>
       <div class='panel panel-default' style='position:fixed;'>
         <div class='panel-heading'>
           <i class='fa fa-user'></i> DATA FACEBOOK
         </div>
         <div class='panel-body'>
           USERNAME   : <?php echo $user['name']; ?>
           <hr>
           EMAIL   : <?php echo $user['email']; ?>
           <hr>
           USER ID    : <?php echo $user['id']; ?>
           <hr>
           GENDER : <?php echo $user['gender']; ?>
          <div class='form-group'>
            <div class='col-md-12 '>
             <hr>
              Copyright &copy; <?php echo date("Y"); ?> rizalfakhri
               </div>
             </div>
           </div>
         </div>
     </div>


      <div class='col-md-9'>
        <div class='panel panel-default'>
          <div class='panel-heading'>
          <i class='fa fa-info'></i> WELCOME TO MY SITE
          </div>
          <div class='panel-body' style='word-wrap: break-word;'>
           <div class='col-md-12'>
             <h1 style='text-align:center;'>Selamat Datang Di Website Saya, Anda Telah Berhasil Login Dengan Facebook :)</h1>
         </div>
              <div class='form-group'>
                <div class='col-md-12'>
                  <hr>
                  <p style='text-align:center;'>Copyright &copy; <?php echo date("Y"); ?> rizalfakhri</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
  </html>
<?php
}
?>

4. login_fb.php

<?php
session_start();
require_once 'config.php';
$fb = new Facebook\Facebook([
  'app_id' => $appId,
  'app_secret' => $appSecret,
  'default_graph_version' => 'v2.5',
]);

$helper = $fb->getRedirectLoginHelper();
$loginUrl = $helper->getLoginUrl("http://". $_SERVER['SERVER_NAME'] . "/proses.php",array('scope' => 'email'));
header("location: " . $loginUrl);

5. proses.php

Didalam file proses.php terdapat code untuk memproses response facebook, memoerbarui token untuk menuka dengan token yang tahan lama. Silahkan paste kode dibawah ini.

<?php
session_start();
require_once 'config.php';

$fb = new Facebook\Facebook([
  'app_id' => $appId,
  'app_secret' => $appSecret,
  'default_graph_version' => 'v2.5',
]);

$helper = $fb->getRedirectLoginHelper();
try {
  $accessToken = $helper->getAccessToken();
} catch (Facebook\Exception\FacebookResponseException $e) {
  echo "Graph SDK Error : " . $e->getMessage();
  exit;
}

if(!isset($accessToken)) {
  if($helper->getError()) {
    header("HTTP/1.0 401 Unauthorized");
    echo "Error -> " .$helper->getError(). "\n";
    echo "Error Code -> " .$helper->getErrorCode(). "\n";
    echo "Error Reason -> " . $helper->getErroReason(). "\n";
    echo "Error Description -> ". $helper->getErrorDescription(). "\n";
  }
  exit;
}

$OAuth         = $fb->getOAuth2Client();
$tokenMetadata = $OAuth->debugToken($accessToken);
$tokenMetadata->validateAppId($appId);
$tokenMetadata->validateExpiration();
if(!$accessToken->isLongLived()) {
  try {
    $accessToken = $OAuth->getLongLivedAccessToken($accessToken);
    } catch(Facebook\Exceptions\FacebookSDKException $e) {
      echo "Facebook SDK Error gan -> " . $e->getMessage();
      exit;
  }
}

$_SESSION['facebook_session'] = (string)$accessToken;
header("Location: index.php");

SELESAI!!

Mari kita bahas alur dan kemana atau bagaimana caranya aplikasi ini bekerja atau bagimana cara kerja aplikasi ini. 

Dimulai dari config.php saya meng include file autoload.php fungsinya adalah untuk memanggil SDK facebook biar gak usah include 1 1 filenya misal saya mau manggil class OAuth2Client  berati saya harus include file php nya dong? 

o tidak, Semua sudah otomatis oeh file autoload.php, kita tinggal panggil function dia akan cari functionya dan executenya. 

Oiya, aplikasi ini juga dibangun dengan Object Oriented lho :p speeti artikel saya sebelumnya yang membahas OOP, Hampir semua project yang saya masukan ke blog memakai OOP.

index.php, pertama saya menginisialisasi session dengan menggunakan session_start() agar saya dapat menggunakan session. Lalu saya meng include config.php supaya saya bisa berkomunikasi dengan database.

kalo di perhatikan terdapat code if(empty($_SESSION['facebook_session'])) { ...

Fungsi code tersebut adalah untuk memvalidasi jika user belum login maka akan muncul tampilan seperti ss dibawah ini .

Karena ada urusan, Bahasan code ini sampai sini dulu ya gan, Akan saya bahas di part ke dua :D 

Download Surce Code di : https://files.rizalfakhri.com/login_fb_rizalfakhri.com.zip?token=skettyrbc684bchdj

TERIMAKASIH SUDAH MENGIKUTI TUTORIAL KALI INI :) SHARE BIAR BANYAK YANG LEBIH TAU CARA MEMASANG FITUR INI ^_^