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>

Catatan yang direkomendasikan:

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. gaulhost says June 14, 2012 at 12:45 am

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

    Reply
  3. Darryl says October 22, 2012 at 12:06 am

    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..

    Reply
    • Sibudi says October 22, 2012 at 10:07 pm

      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

      Reply
      • Darryl says October 22, 2012 at 11:50 pm

        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! 😀

        Reply
  4. Darryl says October 22, 2012 at 12:08 am

    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..

    Reply
  5. sapto says April 2, 2013 at 1:33 pm

    mas klo mao nampilin wall + comentar gmn yah.

    Reply
  7. Hafiizh Eko says July 3, 2013 at 3:03 pm

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

    Reply
  8. designs says September 5, 2014 at 12:16 pm

    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.

    Reply
  9. modular kitchen says September 8, 2014 at 7:22 am

    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.

    Reply
  10. abu hisab says April 25, 2016 at 5:41 pm

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

    Reply
  11. Handi says December 28, 2016 at 12:13 pm

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

    Reply
  12. Aksan Zalendra says February 9, 2017 at 11:30 pm

    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 🙂

    Reply
  13. moh imam baehaqi says March 6, 2017 at 5:17 pm

    saya ingin jawabankenapa fb saya tidak bisa diperbaharui

    Reply
  14. Abigail Rental says April 10, 2017 at 2:41 pm

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

    Reply
  15. Irfan Maulana says May 18, 2017 at 6:00 pm

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

    Reply
  16. Irfan Maulana says May 18, 2017 at 6:01 pm

    Bisa dijalankan dilocalhost kah ?

    Reply
  17. Vonny says May 22, 2017 at 9:08 am

    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

    Reply
  18. ландшафтный дизайн Харьков says June 2, 2017 at 4:50 am

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

    Reply
  19. fransiska dewi says August 2, 2017 at 2:26 pm

    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 🙂

    Reply
  20. webpage says August 4, 2017 at 2:54 pm

    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.

    Reply
  21. Martin says September 4, 2017 at 9:07 am

    Askk… Kalau saya Mau ngambil tanggal lahir gmana gan?

    Reply
  22. rizka mifta says September 13, 2017 at 8:43 pm

    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

    Reply
  23. Dian Ermawan says January 24, 2018 at 5:46 pm

    Assalamualaikum, Mantab Gan Ane Coba dulu

    Reply

Leave a Reply

Required fields are marked *