Melakukan Autentikasi Menggunakan Login dengan Facebook dengan JavaScript

Anda dapat mengizinkan pengguna melakukan autentikasi dengan Firebase menggunakan akun Facebook mereka dengan mengintegrasikan Login dengan Facebook ke aplikasi Anda. Anda dapat mengintegrasikan Login dengan Facebook menggunakan Firebase SDK untuk melakukan alur login, atau dengan menjalankan alur login Facebook secara manual dan meneruskan token akses yang dihasilkan ke Firebase.

Sebelum memulai

  1. Tambahkan Firebase ke project JavaScript.
  2. Di situs Facebook for Developers, dapatkan App ID dan App Secret untuk aplikasi Anda.
  3. Aktifkan Login dengan Facebook:
    1. Di Firebase console, buka bagian Auth.
    2. Pada tab Metode Login, aktifkan metode login dengan Facebook, lalu masukkan App ID dan App Secret yang Anda dapatkan dari Facebook.
    3. Kemudian, pastikan OAuth redirect URI Anda (misalnya my-app-12345.firebaseapp.com/__/auth/handler), terdaftar sebagai salah satu dari OAuth redirect URI di halaman setelan aplikasi Facebook Anda di situs Facebook for Developers di konfigurasi Product Settings > Facebook Login.

Memproses alur login dengan Firebase SDK

Jika Anda sedang membuat aplikasi web, cara termudah untuk mengautentikasi pengguna Anda dengan Firebase menggunakan akun Facebook-nya adalah dengan memproses alur login melalui Firebase JavaScript SDK. (Jika ingin mengautentikasi pengguna dalam Node.js atau lingkungan non-browser lain, Anda harus memproses alur login secara manual.)

Untuk memproses alur login dengan Firebase JavaScript SDK, ikuti langkah berikut ini:

  1. Buat instance objek penyedia Facebook:
    var provider = new firebase.auth.FacebookAuthProvider();
    
  2. Opsional: Tentukan cakupan OAuth 2.0 tambahan yang ingin diminta dari penyedia autentikasi. Untuk menambahkan cakupan, panggil addScope. Contoh:
    provider.addScope('user_birthday');
    
    Lihat dokumentasi penyedia autentikasi.
  3. Opsional: Untuk melokalkan alur OAuth penyedia ke bahasa yang dipilih pengguna tanpa meneruskan parameter OAuth kustom yang relevan secara eksplisit, perbarui kode bahasa di instance Auth sebelum memulai alur OAuth. Contoh:
    firebase.auth().languageCode = 'fr_FR';
    // To apply the default browser preference instead of explicitly setting it.
    // firebase.auth().useDeviceLanguage();
    
  4. Opsional: Tentukan parameter penyedia OAuth kustom tambahan yang akan dikirim dengan permintaan OAuth. Untuk menambahkan parameter kustom, panggil setCustomParameters di penyedia yang diinisialisasi beserta objek berisi kunci, seperti yang ditentukan oleh dokumentasi penyedia OAuth dan nilainya yang terkait. Sebagai contoh:
    provider.setCustomParameters({
      'display': 'popup'
    });
    
    Parameter OAuth yang mengharuskan cadangan tidak boleh digunakan dan akan diabaikan. Baca referensi penyedia autentikasi untuk mengetahui detail lebih lanjut.
  5. Lakukan autentikasi dengan Firebase menggunakan objek penyedia Facebook. Anda dapat meminta pengguna untuk login dengan akun Facebook, dengan menampilkan jendela pop-up, atau dengan beralih ke halaman login. Metode pengalihan lebih disukai pada perangkat seluler.
    • Untuk login dengan jendela pop-up, panggil signInWithPopup:
      firebase.auth().signInWithPopup(provider).then(function(result) {
        // This gives you a Facebook Access Token. You can use it to access the Facebook API.
        var token = result.credential.accessToken;
        // The signed-in user info.
        var user = result.user;
        // ...
      }).catch(function(error) {
        // Handle Errors here.
        var errorCode = error.code;
        var errorMessage = error.message;
        // The email of the user's account used.
        var email = error.email;
        // The firebase.auth.AuthCredential type that was used.
        var credential = error.credential;
        // ...
      });
      
      Perlu diperhatikan juga bahwa Anda dapat mengambil token OAuth penyedia Facebook yang dapat digunakan untuk mengambil data tambahan menggunakan API Facebook.

      Di sini Anda juga dapat menemukan dan menangani error. Untuk mengetahui daftar kode error, baca Dokumen Referensi Auth.

    • Untuk login dengan beralih ke halaman login, panggil signInWithRedirect:
      firebase.auth().signInWithRedirect(provider);
      
      Selanjutnya, Anda juga bisa mengambil token OAuth penyedia Facebook dengan memanggil getRedirectResult saat halaman dimuat:
      firebase.auth().getRedirectResult().then(function(result) {
        if (result.credential) {
          // This gives you a Facebook Access Token. You can use it to access the Facebook API.
          var token = result.credential.accessToken;
          // ...
        }
        // The signed-in user info.
        var user = result.user;
      }).catch(function(error) {
        // Handle Errors here.
        var errorCode = error.code;
        var errorMessage = error.message;
        // The email of the user's account used.
        var email = error.email;
        // The firebase.auth.AuthCredential type that was used.
        var credential = error.credential;
        // ...
      });
      
      Di sini Anda juga dapat menemukan dan menangani error. Untuk mengetahui daftar kode error, baca Dokumen Referensi Auth.

Mengautentikasi dengan Firebase di ekstensi Chrome

Jika Anda membuat aplikasi ekstensi Chrome, Anda harus memberi akses untuk ID ekstensi Chrome:

  1. Buka project Anda di Firebase console.
  2. Di bagian Authentication, buka halaman Metode login.
  3. Tambahkan URI seperti berikut ke daftar Domain yang Diotorisasi:
    chrome-extension://CHROME_EXTENSION_ID

Hanya operasi pop-up (signInWithPopup dan linkWithPopup) yang tersedia untuk ekstensi Chrome, karena ekstensi Chrome tidak dapat menggunakan pengalihan HTTP. Anda harus memanggil metode ini dari skrip background, bukan dari pop-up tindakan browser karena pop-up autentikasi akan membatalkan pop-up tindakan browser.

Dalam file manifes ekstensi Chrome, pastikan Anda menambahkan URL https://apis.google.com ke content_security_policy yang diizinkan.

Langkah berikutnya

Setelah pengguna login untuk pertama kalinya, akun pengguna baru akan dibuat dan ditautkan ke kredensial, yaitu nama pengguna dan sandi, nomor telepon, atau informasi penyedia autentikasi, yang digunakan pengguna tersebut untuk login. Akun baru ini disimpan sebagai bagian dari project Firebase Anda, dan dapat digunakan untuk mengidentifikasi pengguna di setiap aplikasi dalam project, terlepas dari cara pengguna login.

  • Di aplikasi Anda, cara yang direkomendasikan untuk mengetahui status autentikasi pengguna adalah dengan menyetel observer pada objek Auth. Selanjutnya, Anda dapat memperoleh informasi profil dasar pengguna dari objek User. Baca artikel mengenai Mengelola Pengguna.

  • Di Aturan Keamanan Firebase Realtime Database dan Cloud Storage, Anda bisa mendapatkan ID pengguna unik yang login dari variabel auth, dan menggunakannya untuk mengontrol data yang dapat diakses oleh pengguna.

Anda dapat mengizinkan pengguna untuk login ke aplikasi menggunakan beberapa penyedia autentikasi dengan menautkan kredensial penyedia autentikasi ke akun pengguna yang ada.

Agar pengguna logout, panggil signOut:

firebase.auth().signOut().then(function() {
  // Sign-out successful.
}).catch(function(error) {
  // An error happened.
});