Google berkomitmen untuk mendorong terwujudnya keadilan ras bagi komunitas Kulit Hitam. Lihat caranya.

Otentikasi Menggunakan Facebook Login dengan JavaScript

Tetap teratur dengan koleksi Simpan dan kategorikan konten berdasarkan preferensi Anda.

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

Sebelum kamu memulai

  1. Tambahkan Firebase ke proyek JavaScript Anda .
  2. Di situs Facebook untuk Pengembang , dapatkan ID Aplikasi dan Rahasia Aplikasi untuk aplikasi Anda.
  3. Aktifkan Masuk Facebook:
    1. Di konsol Firebase , buka bagian Auth .
    2. Pada tab Metode masuk , aktifkan metode masuk Facebook dan tentukan ID Aplikasi dan Rahasia Aplikasi yang Anda dapatkan dari Facebook.
    3. Kemudian, pastikan URI pengalihan OAuth Anda (misalnya my-app-12345.firebaseapp.com/__/auth/handler ) terdaftar sebagai salah satu URI pengalihan OAuth Anda di halaman pengaturan aplikasi Facebook Anda di situs Facebook untuk Pengembang di Produk Pengaturan > Konfigurasi Login Facebook .

Tangani alur masuk dengan Firebase SDK

Jika Anda membuat aplikasi web, cara termudah untuk mengautentikasi pengguna Anda dengan Firebase menggunakan akun Facebook mereka adalah menangani alur masuk dengan Firebase JavaScript SDK. (Jika Anda ingin mengautentikasi pengguna di Node.js atau lingkungan non-browser lainnya, Anda harus menangani alur masuk secara manual.)

Untuk menangani alur masuk dengan Firebase JavaScript SDK, ikuti langkah berikut:

  1. Buat instance objek penyedia Facebook:

    Web version 9

    import { FacebookAuthProvider } from "firebase/auth";
    
    const provider = new FacebookAuthProvider();

    Web version 8

    var provider = new firebase.auth.FacebookAuthProvider();
  2. Opsional : Tentukan cakupan OAuth 2.0 tambahan yang ingin Anda minta dari penyedia autentikasi. Untuk menambahkan cakupan, panggil addScope . Sebagai contoh:

    Web version 9

    provider.addScope('user_birthday');

    Web version 8

    provider.addScope('user_birthday');
    Lihat dokumentasi penyedia autentikasi .
  3. Opsional : Untuk melokalkan alur OAuth penyedia ke bahasa pilihan pengguna tanpa meneruskan parameter OAuth khusus yang relevan secara eksplisit, perbarui kode bahasa pada instance Auth sebelum memulai alur OAuth. Sebagai contoh:

    Web version 9

    import { getAuth } from "firebase/auth";
    
    const auth = getAuth();
    auth.languageCode = 'it';
    // To apply the default browser preference instead of explicitly setting it.
    // firebase.auth().useDeviceLanguage();

    Web version 8

    firebase.auth().languageCode = 'it';
    // To apply the default browser preference instead of explicitly setting it.
    // firebase.auth().useDeviceLanguage();
  4. Opsional : Tentukan parameter penyedia OAuth khusus tambahan yang ingin Anda kirim dengan permintaan OAuth. Untuk menambahkan parameter khusus, panggil setCustomParameters pada penyedia yang diinisialisasi dengan objek berisi kunci seperti yang ditentukan oleh dokumentasi penyedia OAuth dan nilai yang sesuai. Sebagai contoh:

    Web version 9

    provider.setCustomParameters({
      'display': 'popup'
    });

    Web version 8

    provider.setCustomParameters({
      'display': 'popup'
    });
    Parameter OAuth wajib yang dicadangkan tidak diizinkan dan akan diabaikan. Lihat referensi penyedia autentikasi untuk detail lebih lanjut.
  5. Autentikasi dengan Firebase menggunakan objek penyedia Facebook. Anda dapat meminta pengguna untuk masuk dengan akun Facebook mereka baik dengan membuka jendela pop-up atau dengan mengalihkan ke halaman masuk. Metode pengalihan lebih disukai di perangkat seluler.
    • Untuk masuk dengan jendela pop-up, panggil signInWithPopup :

      Web version 9

      import { getAuth, signInWithPopup, FacebookAuthProvider } from "firebase/auth";
      
      const auth = getAuth();
      signInWithPopup(auth, provider)
        .then((result) => {
          // The signed-in user info.
          const user = result.user;
      
          // This gives you a Facebook Access Token. You can use it to access the Facebook API.
          const credential = FacebookAuthProvider.credentialFromResult(result);
          const accessToken = credential.accessToken;
      
          // ...
        })
        .catch((error) => {
          // Handle Errors here.
          const errorCode = error.code;
          const errorMessage = error.message;
          // The email of the user's account used.
          const email = error.customData.email;
          // The AuthCredential type that was used.
          const credential = FacebookAuthProvider.credentialFromError(error);
      
          // ...
        });

      Web version 8

      firebase
        .auth()
        .signInWithPopup(provider)
        .then((result) => {
          /** @type {firebase.auth.OAuthCredential} */
          var credential = result.credential;
      
          // The signed-in user info.
          var user = result.user;
      
          // This gives you a Facebook Access Token. You can use it to access the Facebook API.
          var accessToken = credential.accessToken;
      
          // ...
        })
        .catch((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;
      
          // ...
        });
      Perhatikan juga bahwa Anda dapat mengambil token OAuth penyedia Facebook yang dapat digunakan untuk mengambil data tambahan menggunakan API Facebook.

      Ini juga tempat Anda dapat menangkap dan menangani kesalahan. Untuk daftar kode kesalahan, lihat Auth Reference Docs .

    • Untuk masuk dengan mengalihkan ke laman masuk, panggil signInWithRedirect : Ikuti praktik terbaik saat menggunakan `signInWithRedirect`.

      Web version 9

      import { getAuth, signInWithRedirect } from "firebase/auth";
      
      const auth = getAuth();
      signInWithRedirect(auth, provider);

      Web version 8

      firebase.auth().signInWithRedirect(provider);
      Kemudian, Anda juga bisa mengambil token OAuth penyedia Facebook dengan memanggil getRedirectResult saat halaman Anda dimuat:

      Web version 9

      import { getAuth, getRedirectResult, FacebookAuthProvider } from "firebase/auth";
      
      const auth = getAuth();
      getRedirectResult(auth)
        .then((result) => {
          // This gives you a Facebook Access Token. You can use it to access the Facebook API.
          const credential = FacebookAuthProvider.credentialFromResult(result);
          const token = credential.accessToken;
      
          const user = result.user;
        }).catch((error) => {
          // Handle Errors here.
          const errorCode = error.code;
          const errorMessage = error.message;
          // The email of the user's account used.
          const email = error.customData.email;
          // AuthCredential type that was used.
          const credential = FacebookAuthProvider.credentialFromError(error);
          // ...
        });

      Web version 8

      firebase.auth()
        .getRedirectResult()
        .then((result) => {
          if (result.credential) {
            /** @type {firebase.auth.OAuthCredential} */
            var credential = result.credential;
      
            // This gives you a Facebook Access Token. You can use it to access the Facebook API.
            var token = credential.accessToken;
            // ...
          }
          // The signed-in user info.
          var user = result.user;
        }).catch((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;
          // ...
        });
      Ini juga tempat Anda dapat menangkap dan menangani kesalahan. Untuk daftar kode kesalahan, lihat Auth Reference Docs .

Autentikasi dengan Firebase di ekstensi Chrome

Jika Anda membuat aplikasi ekstensi Chrome, Anda harus menambahkan ID ekstensi Chrome Anda:

  1. Buka proyek Anda di konsol Firebase .
  2. Di bagian Autentikasi , buka halaman Metode masuk .
  3. Tambahkan URI seperti berikut ke daftar Authorized Domains:
    chrome-extension://CHROME_EXTENSION_ID

Hanya operasi popup ( signInWithPopup , linkWithPopup , dan reauthenticateWithPopup ) yang tersedia untuk ekstensi Chrome, karena ekstensi Chrome tidak dapat menggunakan pengalihan HTTP. Anda harus memanggil metode ini dari skrip halaman latar belakang daripada popup tindakan browser, karena popup autentikasi akan membatalkan popup tindakan browser. Metode sembulan hanya dapat digunakan dalam ekstensi yang menggunakan Manifest V2 . Manifest V3 yang lebih baru hanya mengizinkan skrip latar belakang dalam bentuk pekerja layanan, yang tidak dapat melakukan operasi sembulan sama sekali.

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

Langkah selanjutnya

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

  • Di aplikasi Anda, cara yang disarankan untuk mengetahui status autentikasi pengguna Anda adalah dengan menyetel pengamat pada objek Auth . Anda kemudian bisa mendapatkan informasi profil dasar pengguna dari objek User . Lihat Kelola Pengguna .

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

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

Untuk mengeluarkan pengguna, panggil signOut :

Web version 9

import { getAuth, signOut } from "firebase/auth";

const auth = getAuth();
signOut(auth).then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});

Web version 8

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

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

Sebelum kamu memulai

  1. Tambahkan Firebase ke proyek JavaScript Anda .
  2. Di situs Facebook untuk Pengembang , dapatkan ID Aplikasi dan Rahasia Aplikasi untuk aplikasi Anda.
  3. Aktifkan Masuk Facebook:
    1. Di konsol Firebase , buka bagian Auth .
    2. Pada tab Metode masuk , aktifkan metode masuk Facebook dan tentukan ID Aplikasi dan Rahasia Aplikasi yang Anda dapatkan dari Facebook.
    3. Kemudian, pastikan URI pengalihan OAuth Anda (misalnya my-app-12345.firebaseapp.com/__/auth/handler ) terdaftar sebagai salah satu URI pengalihan OAuth Anda di halaman pengaturan aplikasi Facebook Anda di situs Facebook untuk Pengembang di Produk Pengaturan > Konfigurasi Login Facebook .

Tangani alur masuk dengan Firebase SDK

Jika Anda membuat aplikasi web, cara termudah untuk mengautentikasi pengguna Anda dengan Firebase menggunakan akun Facebook mereka adalah menangani alur masuk dengan Firebase JavaScript SDK. (Jika Anda ingin mengautentikasi pengguna di Node.js atau lingkungan non-browser lainnya, Anda harus menangani alur masuk secara manual.)

Untuk menangani alur masuk dengan Firebase JavaScript SDK, ikuti langkah berikut:

  1. Buat instance objek penyedia Facebook:

    Web version 9

    import { FacebookAuthProvider } from "firebase/auth";
    
    const provider = new FacebookAuthProvider();

    Web version 8

    var provider = new firebase.auth.FacebookAuthProvider();
  2. Opsional : Tentukan cakupan OAuth 2.0 tambahan yang ingin Anda minta dari penyedia autentikasi. Untuk menambahkan cakupan, panggil addScope . Sebagai contoh:

    Web version 9

    provider.addScope('user_birthday');

    Web version 8

    provider.addScope('user_birthday');
    Lihat dokumentasi penyedia autentikasi .
  3. Opsional : Untuk melokalkan alur OAuth penyedia ke bahasa pilihan pengguna tanpa meneruskan parameter OAuth khusus yang relevan secara eksplisit, perbarui kode bahasa pada instance Auth sebelum memulai alur OAuth. Sebagai contoh:

    Web version 9

    import { getAuth } from "firebase/auth";
    
    const auth = getAuth();
    auth.languageCode = 'it';
    // To apply the default browser preference instead of explicitly setting it.
    // firebase.auth().useDeviceLanguage();

    Web version 8

    firebase.auth().languageCode = 'it';
    // To apply the default browser preference instead of explicitly setting it.
    // firebase.auth().useDeviceLanguage();
  4. Opsional : Tentukan parameter penyedia OAuth khusus tambahan yang ingin Anda kirim dengan permintaan OAuth. Untuk menambahkan parameter khusus, panggil setCustomParameters pada penyedia yang diinisialisasi dengan objek berisi kunci seperti yang ditentukan oleh dokumentasi penyedia OAuth dan nilai yang sesuai. Sebagai contoh:

    Web version 9

    provider.setCustomParameters({
      'display': 'popup'
    });

    Web version 8

    provider.setCustomParameters({
      'display': 'popup'
    });
    Parameter OAuth wajib yang dicadangkan tidak diizinkan dan akan diabaikan. Lihat referensi penyedia autentikasi untuk detail lebih lanjut.
  5. Autentikasi dengan Firebase menggunakan objek penyedia Facebook. Anda dapat meminta pengguna untuk masuk dengan akun Facebook mereka baik dengan membuka jendela pop-up atau dengan mengalihkan ke halaman masuk. Metode pengalihan lebih disukai di perangkat seluler.
    • Untuk masuk dengan jendela pop-up, panggil signInWithPopup :

      Web version 9

      import { getAuth, signInWithPopup, FacebookAuthProvider } from "firebase/auth";
      
      const auth = getAuth();
      signInWithPopup(auth, provider)
        .then((result) => {
          // The signed-in user info.
          const user = result.user;
      
          // This gives you a Facebook Access Token. You can use it to access the Facebook API.
          const credential = FacebookAuthProvider.credentialFromResult(result);
          const accessToken = credential.accessToken;
      
          // ...
        })
        .catch((error) => {
          // Handle Errors here.
          const errorCode = error.code;
          const errorMessage = error.message;
          // The email of the user's account used.
          const email = error.customData.email;
          // The AuthCredential type that was used.
          const credential = FacebookAuthProvider.credentialFromError(error);
      
          // ...
        });

      Web version 8

      firebase
        .auth()
        .signInWithPopup(provider)
        .then((result) => {
          /** @type {firebase.auth.OAuthCredential} */
          var credential = result.credential;
      
          // The signed-in user info.
          var user = result.user;
      
          // This gives you a Facebook Access Token. You can use it to access the Facebook API.
          var accessToken = credential.accessToken;
      
          // ...
        })
        .catch((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;
      
          // ...
        });
      Perhatikan juga bahwa Anda dapat mengambil token OAuth penyedia Facebook yang dapat digunakan untuk mengambil data tambahan menggunakan API Facebook.

      Ini juga tempat Anda dapat menangkap dan menangani kesalahan. Untuk daftar kode kesalahan, lihat Auth Reference Docs .

    • Untuk masuk dengan mengalihkan ke laman masuk, panggil signInWithRedirect : Ikuti praktik terbaik saat menggunakan `signInWithRedirect`.

      Web version 9

      import { getAuth, signInWithRedirect } from "firebase/auth";
      
      const auth = getAuth();
      signInWithRedirect(auth, provider);

      Web version 8

      firebase.auth().signInWithRedirect(provider);
      Kemudian, Anda juga bisa mengambil token OAuth penyedia Facebook dengan memanggil getRedirectResult saat halaman Anda dimuat:

      Web version 9

      import { getAuth, getRedirectResult, FacebookAuthProvider } from "firebase/auth";
      
      const auth = getAuth();
      getRedirectResult(auth)
        .then((result) => {
          // This gives you a Facebook Access Token. You can use it to access the Facebook API.
          const credential = FacebookAuthProvider.credentialFromResult(result);
          const token = credential.accessToken;
      
          const user = result.user;
        }).catch((error) => {
          // Handle Errors here.
          const errorCode = error.code;
          const errorMessage = error.message;
          // The email of the user's account used.
          const email = error.customData.email;
          // AuthCredential type that was used.
          const credential = FacebookAuthProvider.credentialFromError(error);
          // ...
        });

      Web version 8

      firebase.auth()
        .getRedirectResult()
        .then((result) => {
          if (result.credential) {
            /** @type {firebase.auth.OAuthCredential} */
            var credential = result.credential;
      
            // This gives you a Facebook Access Token. You can use it to access the Facebook API.
            var token = credential.accessToken;
            // ...
          }
          // The signed-in user info.
          var user = result.user;
        }).catch((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;
          // ...
        });
      Ini juga tempat Anda dapat menangkap dan menangani kesalahan. Untuk daftar kode kesalahan, lihat Auth Reference Docs .

Autentikasi dengan Firebase di ekstensi Chrome

Jika Anda membuat aplikasi ekstensi Chrome, Anda harus menambahkan ID ekstensi Chrome Anda:

  1. Buka proyek Anda di konsol Firebase .
  2. Di bagian Autentikasi , buka halaman Metode masuk .
  3. Tambahkan URI seperti berikut ke daftar Authorized Domains:
    chrome-extension://CHROME_EXTENSION_ID

Hanya operasi popup ( signInWithPopup , linkWithPopup , dan reauthenticateWithPopup ) yang tersedia untuk ekstensi Chrome, karena ekstensi Chrome tidak dapat menggunakan pengalihan HTTP. Anda harus memanggil metode ini dari skrip halaman latar belakang daripada popup tindakan browser, karena popup autentikasi akan membatalkan popup tindakan browser. Metode sembulan hanya dapat digunakan dalam ekstensi yang menggunakan Manifest V2 . Manifest V3 yang lebih baru hanya mengizinkan skrip latar belakang dalam bentuk pekerja layanan, yang tidak dapat melakukan operasi sembulan sama sekali.

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

Langkah selanjutnya

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

  • Di aplikasi Anda, cara yang disarankan untuk mengetahui status autentikasi pengguna Anda adalah dengan menyetel pengamat pada objek Auth . Anda kemudian bisa mendapatkan informasi profil dasar pengguna dari objek User . Lihat Kelola Pengguna .

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

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

Untuk mengeluarkan pengguna, panggil signOut :

Web version 9

import { getAuth, signOut } from "firebase/auth";

const auth = getAuth();
signOut(auth).then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});

Web version 8

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