Facebook Login

Facebook Login untuk Web dengan JavaScript SDK

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

Sebelum Memulai

Anda akan memerlukan hal-hal berikut:

Contoh Login Otomatis Dasar

Contoh kode berikut menunjukkan kepada Anda cara menambahkan Facebook SDK untuk JavaScript ke halaman web Anda, menginisialisasi SDK, dan jika Anda login ke Facebook, akan menampilkan nama dan email Anda. Jika Anda tidak login ke Facebook, jendela pop-up dialog log login akan ditampilkan secara otomatis.

Izin public_profile , yang memungkinkan Anda untuk mendapatkan informasi yang tersedia untuk publik seperti nama dan foto profil, dan izin email tidak memerlukan tinjauan aplikasi dan secara otomatis diberikan kepada semua aplikasi yang menggunakan Facebook Login. 

<!DOCTYPE html>
<html lang="en">
  <head></head>
  <body>

    <h2>Add Facebook Login to your webpage</h2>

      <!-- Set the element id for the JSON response -->
    
      <p id="profile"></p>

      <script>
  
        <!-- Add the Facebook SDK for Javascript -->
  
        (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 = "https://connect.facebook.net/en_US/sdk.js";
                              fjs.parentNode.insertBefore(js, fjs);
                            }(document, 'script', 'facebook-jssdk')
        );


        window.fbAsyncInit = function() {
            <!-- Initialize the SDK with your app and the Graph API version for your app -->
            FB.init({
                      appId            : '{your-facebook-app-id}',
                      xfbml            : true,
                      version          : '{the-graph-api-version-for-your-app}'
                    });
            <!-- If you are logged in, automatically get your name and email adress, your public profile information -->
            FB.login(function(response) {
                      if (response.authResponse) {
                           console.log('Welcome!  Fetching your information.... ');
                           FB.api('/me', {fields: 'name, email'}, function(response) {
                               document.getElementById("profile").innerHTML = "Good to see you, " + response.name + ". i see your email address is " + response.email
                           });
                      } else { 
                           <!-- If you are not logged in, the login dialog will open for you to login asking for permission to get your public profile and email -->
                           console.log('User cancelled login or did not fully authorize.'); }
            });
        };

      </script>

  </body>
</html>

1. Mengaktifkan JavaScript SDK untuk Facebook Login

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

Tunjukkan bahwa Anda menggunakan JavaScript SDK untuk login dengan mengatur tombol beralih Login dengan JavaScript SDK ke "ya", dan masukkan domain halaman Anda yang meng-hosting SDK di daftar Domain yang Diizinkan untuk JavaScript SDK. Hal ini untuk memastikan bahwa token akses hanya dikembalikan ke panggilan balik dalam domain yang diotorisasi. Hanya halaman https yang didukung untuk tindakan autentikasi dengan Facebook SDK untuk JavaScript.

2. Memeriksa 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 panggilan balik Anda dengan hasilnya.

Contoh 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 bisa berupa salah satu dari berikut ini:

Jenis StatusDeskripsi

connected

Orang tersebut login ke Facebook, dan sudah login ke halaman web Anda.

not_authorized

Orang tersebut login ke Facebook, tetapi belum login ke halaman web Anda.

unknown

Orang tersebut tidak login ke Facebook, jadi Anda tidak tahu apakah mereka sudah login ke halaman web Anda atau belum. Atau FB.logout() telah dipanggil sebelumnya, sehingga tidak bisa terhubung ke Facebook.

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

Parameter authResponseNilai

accessToken

Token akses untuk orang yang menggunakan halaman web.

expiresIn

Cap waktu UNIX saat token kedaluwarsa. Setelah token kedaluwarsa, orang tersebut harus login lagi.

reauthorize_required_in

Jumlah waktu sebelum login kedaluwarsa, dalam satuan detik, dan orang tersebut akan harus login lagi.

signedRequest

Parameter yang ditandatangani, yang berisi informasi tentang orang yang menggunakan halaman web Anda.

userID

ID orang yang menggunakan halaman web Anda.

JavaScript SDK otomatis mendeteksi status login, jadi Anda tidak perlu 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 bisa menggunakan dialog Login untuk mendorong mereka login ke keduanya. Jika tidak login ke Facebook, dia akan diminta login ke Facebook terlebih dahulu, kemudian diminta untuk login ke halaman web Anda.

Ada dua cara untuk membuat seseorang login:

A. Login dengan Tombol Login

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

Konfigurator Plugin

Width
Ukuran Tombol
Teks Tombol
Bentuk Tata Letak Tombol
[?]
Dapatkan Kode

B. Login dengan Dialog Login JavaScript SDK

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 bisa diteruskan 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. Facebook Login memerlukan izin publik_profile lanjutan yang bisa digunakan oleh pengguna eksternal.

Contoh 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 panggilan balik yang ditetapkan saat Anda memanggil FB.login(). Tanggapan ini bisa dideteksi dan ditangani di dalam panggilan FB.login().

Contoh 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 FB.logout() JavaScript SDK ke tombol atau tautan.

Contoh Panggilan

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

Catatan: Panggilan fungsi ini juga bisa membuat orang itu logout 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. Buat 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 JavaScript SDK dalam halaman HTML Anda. Ganti {app-id} dengan ID aplikasi Anda dan {api-version} dengan versi Graph API yang akan digunakan. Kecuali Anda memiliki alasan spesifik untuk menggunakan versi yang lebih lama, masukkan versi yang paling baru: v21.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 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>

<!-- Load the JS SDK asynchronously -->
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js"></script>
</body>
</html>

Sumber Informasi Tambahan