Facebook Login untuk Web dengan SDK JavaScript

Dokumen ini memberikan panduan tentang langkah-langkah untuk menerapkan Facebook Login dengan SDK Facebook untuk JavaScript di halaman web Anda.

Sebelum Anda Memulai

Anda akan membutuhkan hal-hal berikut:

• Akun Developer Facebook
• Aplikasi Facebook terdaftar dengan Pengaturan Dasar yang telah dikonfigurasi
• SDK JavaScript Facebook

1. Masukkan URL Pengalihan Anda di Dasbor Aplikasi

Di Dasbor Aplikasi, pilih aplikasi Anda dan buka Tambahkan Produk Klik Siapkan di kartu Facebook Login. Pilih Pengaturan di panel navigasi sisi kiri dan dalam Pengaturan OAuth Klien, masukkan URL pengalihan Anda di kolom URL Pengalihan OAuth yang Valid untuk otorisasi.

2. Periksa Status Login Seseorang

Langkah pertama saat halaman web Anda dimuat adalah mencari tahu apakah seseorang sudah login ke aplikasi Anda dengan Facebook Login. Panggilan FB.getLoginStatus akan memulai panggilan ke Facebook untuk mendapatkan status login. Facebook kemudian memanggil fungsi callback Anda dengan hasilnya.

Sampel Panggilan

FB.getLoginStatus(function(response) {
    statusChangeCallback(response);
});

Contoh Tanggapan JSON

{
    status: 'connected',
    authResponse: {
        accessToken: '{access-token}',
        expiresIn:'{unix-timestamp}',
        reauthorize_required_in:'{seconds-until-token-expires}',
        signedRequest:'{signed-parameter}',
        userID:'{user-id}'
    }
}

status menetapkan status login orang yang menggunakan halaman web. status dapat berupa salah satu dari berikut ini:

Jika statusnya adalah connected, parameter authResponse berikut tercantum dalam tanggapan:

SDK JavaScript otomatis mendeteksi status login, jadi Anda tidak perlul melakukan tindakan tambahan untuk mengaktifkan perilaku ini.

3. Membuat Seseorang Login

Jika seseorang membuka halaman web Anda tetapi tidak login ke sana atau ke Facebook, Anda dapat menggunakan dialog Login untuk mendorong mereka login ke keduanya. Jika tidak login ke Facebook, dia pertama-tama akan diminta untuk login ke Facebook, kemudian diminta untuk login ke halaman web Anda.

Ada dua cara untuk membuat seseorang login:

• Tombol Facebook Login
• Dialog Masuk dari SDK JavaScript

A. Login dengan Tombol Login

Untuk menggunakan Tombol Facebook Login, gunakan Konfigurator Plugin kami untuk menyesuaikan Tombol Login dan mendapatkan kode.

B. Login dengan Dialog Login SDK JavaScript

Untuk menggunakan tombol login Anda sendiri, picu Dialog Login dengan panggilan ke FB.login().

FB.login(function(response){
  // handle the response 
});

Mintalah Izin Tambahan

Saat seseorang mengklik tombol HTML Anda, jendela pop-up dengan dialog Login akan ditampilkan. Dialog ini memungkinkan Anda meminta izin untuk mengakses data seseorang. Parameter scope dapat dimasukkan beserta panggilan fungsi FB.login(). Parameter opsional ini adalah daftar izin, yang dipisahkan koma, yang harus dikonfirmasi oleh seseorang untuk memberi halaman web Anda akses ke datanya.

Sampel Panggilan

Contoh ini bertanya kepada orang yang login apakah halaman web Anda diizinkan untuk mengakses profil publik dan emailnya.

FB.login(function(response) {
  // handle the response
}, {scope: 'public_profile,email'});

Tangani Tanggapan Dialog Login

Tanggapannya, apakah untuk menghubungkan atau membatalkan, menghasilkan sebuah objek authResponse ke callback yang ditetapkan saat Anda memanggil FB.login(). Tanggapan ini dapat dideteksi dan ditangani di dalam panggilan FB.login().

Sampel Panggilan

FB.login(function(response) {
  if (response.status === 'connected') {
    // Logged into your webpage and Facebook.
  } else {
    // The person is not logged into your webpage or we are unable to tell. 
  }
});

4. Membuat Seseorang Logout

Buat seseorang logout dari halaman web Anda dengan melampirkan fungsi SDK JavaScript FB.logout() ke sebuah tombol atau tautan.

Sampel Panggilan

FB.logout(function(response) {
   // Person is now logged out
});

Catatan: Panggilan fungsi ini juga dapat mengeluarkan orang dari Facebook.

Skenario untuk Dipertimbangkan

1. Seseorang login ke Facebook, lalu login ke halaman web Anda. Setelah logout dari aplikasi Anda, orang tersebut masih login ke Facebook.
2. Seseorang login ke halaman web Anda dan ke Facebook sebagai bagian dari alur login aplikasi Anda. Setelah logout dari aplikasi Anda, pengguna juga logout dari Facebook.
3. Seseorang login ke halaman web lain dan ke Facebook sebagai bagian dari alur login halaman web lain tersebut, lalu login ke halaman web Anda. Setelah logout dari salah satu halaman web itu, orang tersebut logout dari Facebook.

Selain itu, logout dari halaman web Anda tidak mencabut izin yang diberikan orang tersebut kepada halaman web Anda selama login. Mencabut izin harus dilakukan secara terpisah. Bangun halaman web Anda sedemikian rupa sehingga seseorang yang telah logout tidak akan melihat dialog Login saat mereka kembali login.

Contoh Kode Lengkap

Kode ini memuat dan menginisialisasi SDK JavaScript dalam halaman HTML Anda. Ganti {app-id} dengan ID aplikasi Anda dan {api-version} dengan versi API Graf yang akan digunakan. Kecuali Anda memiliki alasan spesifik untuk menggunakan versi yang lebih lama, masukkan versi yang paling baru: v5.0.

<!DOCTYPE html>
<html>
<head>
<title>Facebook Login JavaScript Example</title>
<meta charset="UTF-8">
</head>
<body>
<script>

  function statusChangeCallback(response) {  // Called with the results from FB.getLoginStatus().
    console.log('statusChangeCallback');
    console.log(response);                   // The current login status of the person.
    if (response.status === 'connected') {   // Logged into your webpage and Facebook.
      testAPI();  
    } else {                                 // Not logged into your webpage or we are unable to tell.
      document.getElementById('status').innerHTML = 'Please log ' +
        'into this webpage.';
    }
  }


  function checkLoginState() {               // Called when a person is finished with the Login Button.
    FB.getLoginStatus(function(response) {   // See the onlogin handler
      statusChangeCallback(response);
    });
  }


  window.fbAsyncInit = function() {
    FB.init({
      appId      : '{app-id}',
      cookie     : true,                     // Enable cookies to allow the server to access the session.
      xfbml      : true,                     // Parse social plugins on this webpage.
      version    : '{api-version}'           // Use this Graph API version for this call.
    });


    FB.getLoginStatus(function(response) {   // Called after the JS SDK has been initialized.
      statusChangeCallback(response);        // Returns the login status.
    });
  };

  
  (function(d, s, id) {                      // Load the SDK asynchronously
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = "https://connect.facebook.net/en_US/sdk.js";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));

 
  function testAPI() {                      // Testing Graph API after login.  See statusChangeCallback() for when this call is made.
    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>


//  The JS SDK Login Button 

<fb:login-button scope="public_profile,email" onlogin="checkLoginState();">
</fb:login-button>

<div id="status">
</div>

</body>
</html>

Sumber Daya Tambahan

• Dokumentasi Tombol Login
• Referensi FB.login()
• Referensi FB.getLoginStatus()
• Referensi SDK JavaScript