Cara Implementasi Web Login Dengan Facebook

Pasti banyak diantara kalian sering melihat beberapa website menggunakan login dengan facebook. Mungkin juga sudah terlalu banyak username dan password yang kita buat di beberapa aplikasi semisal usernam dan password untuk email, username dan password untuk web portal berita, username dan password untuk login menjadi member dll. Bukan tidak mungkin, kita sendiri suka lupa apa usernam dan password untuk email, portal berita dll. Kemungkinan itu sangat besar ditambah jika username dan password yang kita buat berbeda-beda. Teknologi saat ini memungkinkan kita untuk punya satu username dan satu password untuk bisa login ke semua aplikasi web yang membutuhkan login. Tidak hanya facebook, google+, twitter dll juga sudah mempunyai teknologi ini sehingga kita bisa menggunakan salah satu akun di facebook atau google+ atau di twitter untuk bisa login tanpa harus menjadi member lagi. Disini saya coba berbagai bagaimana memahami dan mengimplementasikan proses login dengan facebook.
Facebook sendiri sebenarnya sudah membuat dokumentasi sangat detail bagaimana implementasi login dengan facebook untuk berbagai platform seperti web. Ini bisa dilihat dari link berikut:
https://developers.facebook.com/docs/facebook-login/login-flow-for-web/v2.0
Disini saya coba menterjemahkan secara ringkas hal-hal yang penting untuk dipahami sehingga implementasi login dengan facebook di web anda bisa dikerjakan dengan cepat, itu harapannya.

App ID

Syarat utama untuk bisa mengimplementasikannya adalah kita sudah punya App ID. Apa itu App ID? App ID adalah ID unik yang dimiliki oleh facebook app. Jika belum punya, silahkan baca cara membuat facebook app.
Setelah kita punya App ID, cara yang paling mudah untuk mengimplementasikannya adalah dengan menggunakan JavaScript SDK. Berikut contoh implementasi menggunakan JavaScript SDK:

Facebook Login JavaScript Example<script>// <![CDATA[ // This is called with the results from from FB.getLoginStatus(). function statusChangeCallback(response) { console.log('statusChangeCallback'); console.log(response); // The response object is returned with a status field that lets the // app know the current login status of the person. // Full docs on the response object can be found in the documentation // for FB.getLoginStatus(). if (response.status === 'connected') { // Logged into your app and Facebook. testAPI(); } else if (response.status === 'not_authorized') { // The person is logged into Facebook, but not your app. document.getElementById('status').innerHTML = 'Please log ' + 'into this app.'; } else { // The person is not logged into Facebook, so we're not sure if // they are logged into this app or not. document.getElementById('status').innerHTML = 'Please log ' + 'into Facebook.'; } }   // This function is called when someone finishes with the Login // Button. See the onlogin handler attached to it in the sample // code below. function checkLoginState() { FB.getLoginStatus(function(response) { statusChangeCallback(response); }); }   window.fbAsyncInit = function() { FB.init({ appId : '{your-app-id}', cookie : true, // enable cookies to allow the server to access // the session xfbml : true, // parse social plugins on this page version : 'v2.0' // use version 2.0 });   // Now that we've initialized the JavaScript SDK, we call // FB.getLoginStatus(). This function gets the state of the // person visiting this page and can return one of three states to // the callback you provide. They can be: // // 1. Logged into your app ('connected') // 2. Logged into Facebook, but not your app ('not_authorized') // 3. Not logged into Facebook and can't tell if they are logged into // your app or not. // // These three cases are handled in the callback function.   FB.getLoginStatus(function(response) { statusChangeCallback(response); });   };   // Load the SDK asynchronously (function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/sdk.js"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));   // Here we run a very simple test of the Graph API after login is // successful. See statusChangeCallback() for when this call is made. function testAPI() { console.log('Welcome! Fetching your information.... '); FB.api('/me', function(response) { console.log('Successful login for: ' + response.name); document.getElementById('status').innerHTML = 'Thanks for logging in, ' + response.name + '!'; }); } // ]]></script><!-- Below we include the Login Button social plugin. This button uses the JavaScript SDK to present a graphical Login button that triggers the FB.login() function when clicked. -->

Alur proses script diatas sebagai berikut:

1. Facebook akan memeriksa apakah kita dalam kondisi login atau belum
2. Jika belum, facebook akan memberikan form login dan meminta permisi hak akses informasi yang kita punya seperti akses email, nama dsb.
3. Facebook akan menverifikasi identitas
4. Memanggil beberapa fungsi API
5. Mengenerate link untuk logout

Secara garis besar, proses login dengan facebook kurang lebih seperti yang saya jelaskan disini. Untuk penjelasan lebih detailnya bisa dibaca pada link yang disediakan oleh facebook. Jika masih bingung, boleh ditanyakan disini, dengan senang hati saya akan coba membantu