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.
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>
Leave a Reply