Autentikasi dan Mengambil Data Pengguna dengan Facebook SDK

Tutorial ini sudah banyak didokumentasikan di blog-blog baik dalam dan luar negeri, tetapi sangat membingungkan bagi saya. Beberapa tutorial menggunakan JavaScript SDK, sedangkan yang lain menggunakan PHP SDK. Belum lagi, banyak di antaranya yang sudah kadaluarsa dan diperburuk oleh revisi dari Facebook yang tidak menentu.

Hal lain yang juga membingungkan adalah perbedaan tampilan kotak dialog yang menanyakan izin untuk mengakses data-data. Bandingkan tampilan dialog yang saya ambil dari Facebook Developers Guide berikut dengan yang dihasilkan dari tutorial ini.

login with facebook

Sebenarnya hanya ada 2 hal dasar yang menjadi alasan untuk menggunakan Facebook SDK.
1. Kita mempunyai sistem “register” dan “login” sendiri, dan ingin menambahkan “Login with Facebook” sebagai pilihan bagi pengguna yang malas untuk mendaftar secara normal.
2. Kita membutuhkan data-data pengguna yang sudah dicatat dengan baik oleh Facebook, tentunya dengan persetujuan pemilik akun.

Dokumentasi dan kode sumber yang ada di Facebook Developers Guide sudah lengkap, namun susah diikuti dan tidak semuanya saya butuhkan. Tutorial ini akan menggabungkan Javascript SDK dan PHP SDK, karena cara ini menurut saya paling sederhana untuk memenuhi 2 kebutuhan dasar di atas.

Langkah-langkah untuk menghubungkan website dengan Facebook SDK adalah:
1. Daftarkan website pada halaman Facebook Developers, di situ akan diperoleh “App ID” dan “App Secret”.
2. Buat sebuah table pada database untuk menyimpan data-data pengguna dari Facebook. Field-nya sesuai kebutuhan saja, contoh: nama, password, email, tipe (password yang dimaksud di sini bukan password facebook dan tipe akan berisi “facebook” jika data diambil dari facebook dan “normal” jika tidak).
3. Download Facebook SDK. Ambil semua isi folder “src” (kita hanya membutuhkan ini).
4. Tombol login bisa menggunakan tag HTML biasa

<div class="fb-login-button">

atau menggunakan JavaScript SDK.

<fb:login-button>

Dengan ini kita bisa mengakses data-data pengguna yang diatur secara publik (tidak disembunyikan), misalnya id, nama, jenis kelamin. Data-data yang tidak bisa diakses publik harus ditulis ke dalam atribut scope.

<fb:login-button scope="email, read_stream"></fb:login-button>

5. Deklarasikan Facebook object di paling atas halaman. Jangan lupa isi “App ID” dan “App secret”. Kemudian ambil data-data pengguna (sudah termasuk yang ditulis di atribut scope tadi) dengan Facebook API.

require_once("facebook.php");

$config = array();
$config['appId'] = '';
$config['secret'] = '';

$facebook = new Facebook($config);

$user = $facebook->getUser();

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

6. Terakhir, data-data yang sudah diperoleh dari Facebook API bisa diolah sesuai keinginan. Untuk lebih memahami, baca komentar yang ada pada kode sumber.

<?php if($user) { ?>

//tampilkan foto dan nama user		      
<img src="https://graph.facebook.com/<?php echo $user; ?>/picture">
<?=$user_profile['name']?>
		    
<?php
//ambil data-data yang ingin disimpan
$fb_id = $user_profile['id'];
$username = $user_profile['username'];
$email = $user_profile['email'];

//periksa apakah user sudah pernah login
$insert = true;
if (/*query untuk memeriksa apakah data sudah ada di database*/)
    $insert = false;

//jika pertama kali login, masukan data user ke database
if($insert) {
    /*query INSERT untuk memasukan data ke database*/
}

//login user
/* kode untuk login user dan SESSION */
?>

<?php } else { ?>
<fb:login-button scope="email, read_stream"></fb:login-button>
<?php } ?>

Gabungkan langkah ke-5 dan ke-6 serta tambahkan JavaScript SDK. Akhirnya kita akan memperoleh data dalam bentuk array setelah login dengan Facebook.

<?php 
require_once("facebook.php");

$config = array();
$config['appId'] = 'isi_dengan_app_id';
$config['secret'] = 'isi_dengan_app_secret';

$facebook = new Facebook($config);

$user = $facebook->getUser();

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

if ($user) { ?>

<pre>
<?php print_r($user_profile) ?>
</pre>

<?php } else { ?>
<fb:login-button scope="email, read_stream"></fb:login-button>
<?php } ?>
<div id="fb-root"></div>

<script>
window.fbAsyncInit = function() {
  FB.init({
    appId: '<?php echo $facebook->getAppID() ?>',
    cookie: true,
    xfbml: true,
    oauth: true
  });
  FB.Event.subscribe('auth.login', function(response) {
    window.location.reload();
  });
  FB.Event.subscribe('auth.logout', function(response) {
    window.location.reload();
  });
};
(function() {
  var e = document.createElement('script'); e.async = true;
  e.src = document.location.protocol +
    '//connect.facebook.net/en_US/all.js';
  document.getElementById('fb-root').appendChild(e);
}());
</script>

About Sibudi

Ubuntu user | Loves books | Blogger | Web Developer | Learn PHP, JavaScript, Ruby & Python the hard way

13. March 2012 by Sibudi
Categories: PHP | Tags: , , , | 31 comments

Comments (31)

  1. wah bagus sekali kak tutornya,,saya merasa kagum dengan web ini
    salam kenal ya kak
    gaulhost.com

  2. Tutorial ini ditujukan untuk PHP fundamental atau menggunakan Framework ya?

    karena ketika saya coba, ada error di bagian ini…

    $facebook = new Facebook($config);

    $user = $facebook->getUser();

    dan tanda “->” mengingatkan saya pada syntax framework CI (apakah betul menggunakan CI?)..
    mohon bantuannya mas Budi..

    • Syntax CI itu ya PHP juga. Notasi “->” digunakan untuk mengakses variable atau method pada sebuah object. Contoh:

      class Orang {
      $nama = “Darryl”;
      }

      $komentator = new Orang();
      echo $komentator -> nama; // Darryl

      • Oo… oke wa ngerti skrg… jadi “->” dpt digunakan utk mengambil nilai dari sbuah variabel, dan variabel itu sndr ga perlu pake tanda “$” kalo ud pake tanda “->” ya berarti… thanks mas Budi! 😀

  3. oh ya, saya skalian ingin bertanya, untuk menampilkan foto saat membuat komen seperti ini, hanya dengan cara memasukkan email (dari tebakan saya), bgmn ya? hehe thanks bgt nih sblmnya..

  4. mas klo mao nampilin wall + comentar gmn yah.

  5. Saya kurang mengerti di bagian 4-akhir. Mohon penjelasannya mas budi!!

  6. Regarding these facts in the field of kitchen appliances business, Kutchina
    the brand and the best provider of services of modular kitchen Kolkata
    offers greater class products during a proficient deliverance system to their consumers at practical prices.
    The different types of modules in a modular kitchen include kitchen cabinets, worktop, chimney and all the other electronic and mechanical appliances used in a kitchen.
    Everybody needs to contain an elegant and stylish kitchen, as
    thats the merely position for the storage space of food.

  7. Cooking has become a joyful experience with the advent of
    modular kitchens. Like high school rodeo, trail
    riding, family vacations and retirement traveling the country.
    Place one bed behind the other against the wall, and create a storage partition in between.

  8. ternyata dapat pencerahan disini, alhamdulillah! terimakasih.
    semoga makin lancar saja rejekinya, amin.

  9. Mau tanya skrg untuk ambil profile picture di fb kok tidak bisa ya?

  10. facebook saya lupa kata sandi , waktu login kata sandi diganti 5 jam yang lalu , bisa dibilang dihack orang . cara ngembaliinnya gimana ya ? di youtube ada cara mengembalikannya menggunakan script melalui inspect element cuman kurang paham untuk mendapatkan scriptnya dimana -_- mohon bantuannya 🙂

  11. saya ingin jawabankenapa fb saya tidak bisa diperbaharui

  12. waw sedap gan jadi lebih mudah dipahami 😀
    barangkali butuh jasa rental bisa ke Sewa Elf Bandung

  13. Bagus sekali ! Tapi kalo dijalankan di localhost bisa ga kak ?

  14. Bisa dijalankan dilocalhost kah ?

  15. Pagi,
    Kalau saya mau keluar dr FB suka muncul tulisan.. Autentikasi Facebook gagal..

    Sering kalau saya mau bikin status puls foto suka gk mau.
    Mohon petunjuk.
    Terima kasih.

    Salam,
    Vonny

  16. ландшафтный дизайн Харьков
    ландшафтный дизайн Харьков (Terrell)
    ландшафтный дизайн Харьков http://semena-baza.com/bitrix/rk.php?goto=http://dreamgarden.com.ua

  17. Keren bgt mas tutorialnya, sana sini nyari susah bgt ga ada yg bs bantu, alhandulillah nemuin blog ini, makasih ya mas.. 🙂

    Sy ada project mas terkait postingan yg ini, brgkali minat, mohon pm. Thanks 🙂

  18. I’m not certain where you’re getting your info, but great topic.
    I must spend a while studying much more or working out more.
    Thanks for magnificent info I was searching for this info for my
    mission.

  19. Askk… Kalau saya Mau ngambil tanggal lahir gmana gan?

  20. klo saat menghubungkan twitter ke facebook ada tulisan “failed to load the Facebook SDK. please make sure you are not blocking” itu di bagian mananya yang diperbaiki

  21. Assalamualaikum, Mantab Gan Ane Coba dulu

Leave a Reply to Darryl Cancel reply

Required fields are marked *