Membuat Form Register dengan Login Facebook

Oke, kali ini aku akan mengajarkan sedikit tentang FBJS (facebook javascript). Ini adalah salah satu cara integrasi facebook untuk web/blog jadi ketika kita memasang javascript di web/blog kita maka web/blog kita akan dapat ber integrasi dengan facebook. Kita dapat mengakses facebook pengguna yang tentunya dengan izin dari pengguna terlebih dahulu.

Langkah pertama dalam penelitian ini adalah membuat form login untuk mengetahui apa saja yang bisa kita dapat di data pengguna (/me). Untuk membuat form login silahkan menuju halaman http://developers.facebook.com/blog/post/525/ dan copy codenya

<div id="fb-root"></div>
<h2>Updated JS SDK example</h2><br />
<div id="user-info"></div>
<p><button id="fb-auth">Login</button></p>

<script>
window.fbAsyncInit = function() {
  FB.init({ appId: 'YOUR_APP_ID',
   status: true,
   cookie: true,
   xfbml: true,
   oauth: true});

  function updateButton(response) {
    var button = document.getElementById('fb-auth');

    if (response.authResponse) {
      //user is already logged in and connected
      var userInfo = document.getElementById('user-info');
      FB.api('/me', function(response) {
        userInfo.innerHTML = '<img src="https://graph.facebook.com/'
 + response.id + '/picture">' + response.name;
        button.innerHTML = 'Logout';
      });
      button.onclick = function() {
        FB.logout(function(response) {
          var userInfo = document.getElementById('user-info');
          userInfo.innerHTML="";
});
      };
    } else {
      //user is not connected to your app or logged out
      button.innerHTML = 'Login';
      button.onclick = function() {
        FB.login(function(response) {
 if (response.authResponse) {
            FB.api('/me', function(response) {
     var userInfo = document.getElementById('user-info');
     userInfo.innerHTML =
                '<img src="https://graph.facebook.com/'
       + response.id + '/picture" style="margin-right:5px"/>'
       + response.name;
   });  
          } else {
            //user cancelled login or did not grant authorization
          }
        }, {scope:'email'});  
      }
    }
  }

  // run once with current status and whenever the status changes
  FB.getLoginStatus(updateButton);
  FB.Event.subscribe('auth.statusChange', updateButton);
};

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

Itu adalah kode yang dibutuhkan untuk membuat form loginnya. Sekarang yang kita lakukan adalah memasangnya di post web/blog kita (jangan lupa untuk mengganti YOUR_APP_ID dengan aplikasi yang telah kamu buat)

Jika berhasil maka akan muncul tampilan seperti ini

Lakukan login pada aplikasi yang telah kamu buat dengan click login button. Lalu perbolehkan aplikasi untuk mengakses akun kamu

Oke, jika kamu menggunakan chrome maka bukalah menu inspect element dan pergi ke console. Jika kamu menggunakan mozilla silahkan install plugin firebug (http://getfirebug.com/). Karena aku menggunakan chrome maka tampilan akan menjadi seperti ini

Oke, langkah selanjutnya adalah memeriksa informasi apa saja yang dapat kita dapatkan dari user di facebook. Mungkin email, nama pengguna, etc (end of thinking capacity) Tuliskan pada console FB.api (“/me”, “get”, function (a) {console.log(a)}) lalu enter dan kamu akan mendapatkan beberapa informasi dari log a

Just Information
FB => main class
Api => Application programming interface
Api (x, y, z)
X = me itu maksudnya adalah mendapatkan informasi yang ada pada fb user, jika menggunakan fb orang lain bisa dituliskan username atau user idnya (ex: xenphy/1202532608)
Y = metode yang akan kita gunakan, karena kita memerlukan informasi maka kita menggunakan metode get. Metode yang lain adalah POST dan DELETE
Z = nilai kembalian dari GET me. Karena nilai kembalian tidak langsung maka harus diberikan function (a) {// your code here}
Console.log adalah fungsi yang ada dalam browser untuk mencetak nilai kembalian dari a yang telah di panggil

Oke, kita sudah mendapatkan beberapa data, bio, name, gender, email dan data lain yang sekiranya sudah cukup untuk dijadikan form login. Langkah kita kali ini adalah membuat tampilan untuk HTMLnya. Untuk mendapatkan nama, email, gender dan quotes maka yang dibutuhkan adalah code yang kurang lebih seperti ini


<button onclick="runjs()" >Test me</button>
<table id="regtab" style="display:none" border=1>
<tr>
<td>Nama</td>
<td><input type="text" value="input your name" id="funame" /></td>
</tr>
<tr>
<td>Email</td>
<td><input type="text" value="input your email" id="fumail"/></td>
</tr>
<tr>
<td>Gender</td>
<td><input type="text" value="input your gender" id="fugen" /></td>
</tr>
<tr>
<td>Quotes</td>
<td><input type="text" value="input your Quotes" id="fuquo"/></td>
</tr>
<tr>
<td><center><input type="button" onclick="alert('cuma sampel')" value="register"/></center></td>
</tr>
</table>

Lalu untuk script yang dibutuhkan adalah


<script>
function runjs () {
FB.api ("/me", "get", function (a) {
document.getElementById ("funame").value = a.name
document.getElementById ("fumail").value = a.email
document.getElementById ("fugen").value = a.gender
document.getElementById ("fuquo").value = a.quotes
document.getElementById ("regtab").style.display = "block"
})
}
</script>

Dan test lagi, maka kamu akan menghasilkan hal seperti ini

Jika sudah menghasilkan hal yang seperti itu hal terakhir yang kamu lakukan adalah bergaya seperti ini

Sample :
Tolong, sambungkan dengan facebook dulu

Nama
Email
Gender
Quotes