Memproses login pengguna dengan Facebook

Dokumen ini menunjukkan cara menggunakan Identity Platform untuk memproses login pengguna dengan Facebook.

Sebelum memulai

Tutorial ini mengasumsikan bahwa Anda telah mengaktifkan Identity Platform, dan memiliki aplikasi web dasar yang ditulis menggunakan HTML dan JavaScript. Lihat Panduan Memulai untuk mempelajari caranya.

Mengonfigurasi Facebook sebagai penyedia

Untuk mengonfigurasi Facebook sebagai penyedia identitas:

  1. Buka halaman Identity Provider di Konsol Google Cloud.

    Buka halaman Penyedia Identitas

  2. Klik Tambahkan Penyedia.

  3. Pilih Facebook dari daftar.

  4. Masukkan App ID dan App Secret Facebook Anda. Jika belum memiliki ID dan rahasia, Anda bisa mendapatkannya dari halaman Facebook for Developers.

  5. Konfigurasikan URI yang tercantum di bagian Configure Facebook sebagai URI pengalihan OAuth yang valid untuk aplikasi Facebook Anda. Jika Anda mengonfigurasi domain kustom di Identity Platform, perbarui URI pengalihan di konfigurasi aplikasi Facebook agar menggunakan domain kustom, bukan domain default. Misalnya, ubah https://myproject.firebaseapp.com/__/auth/handler menjadi https://auth.myownpersonaldomain.com/__/auth/handler.

  6. Daftarkan domain aplikasi Anda dengan mengklik Add Domain di bagian Authorized Domains. Untuk tujuan pengembangan, localhost sudah diaktifkan secara default.

  7. Di bagian bawah Konfigurasi aplikasi Anda, klik Detail Penyiapan. Salin cuplikan tersebut ke kode aplikasi Anda untuk menginisialisasi Client SDK Identity Platform.

  8. Klik Save.

Memproses login pengguna dengan SDK Klien

  1. Buat instance objek penyedia Facebook:

    JavaScript 

    var provider = new firebase.auth.FacebookAuthProvider();

  2. Opsional: Tambahkan cakupan OAuth. Ruang lingkup menentukan data apa yang Anda minta dari Facebook. Data yang lebih sensitif mungkin memerlukan cakupan tertentu. Baca dokumentasi penyedia untuk menentukan cakupan yang diperlukan aplikasi Anda.

    JavaScript 

    provider.addScope('user_birthday');

  3. Opsional: Lokalkan alur autentikasi. Anda dapat menentukan bahasa, atau menggunakan bahasa default perangkat:

    JavaScript 

    firebase.auth().languageCode = 'it';
// To apply the default browser preference instead of explicitly setting it.
// firebase.auth().useDeviceLanguage();

  4. Opsional: Tentukan parameter OAuth kustom tambahan. Metode ini khusus untuk Facebook, dan biasanya digunakan untuk menyesuaikan pengalaman autentikasi. Anda tidak dapat meneruskan parameter yang dicadangkan oleh OAuth atau Identity Platform.

    JavaScript 

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

  5. Gunakan objek penyedia Facebook untuk memproses login pengguna. Anda dapat membuka jendela pop-up, atau mengalihkan halaman saat ini. Pengalihan lebih mudah bagi pengguna di perangkat seluler.

    Untuk menampilkan pop-up, panggil signInWithPopup():

    JavaScript 

    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;

    // ...
  });

    Untuk mengalihkan halaman, panggil signInWithRedirect() terlebih dahulu.

    Ikuti praktik terbaik saat menggunakan signInWithRedirect, linkWithRedirect, atau reauthenticateWithRedirect.

    JavaScript 

    firebase.auth().signInWithRedirect(provider);

    Kemudian, ambil token Facebook dengan memanggil getRedirectResult() saat halaman Anda dimuat:

    JavaScript 

    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;
    // ...
  });

Setelah memiliki token akses, Anda dapat menggunakannya untuk memanggil Facebook API. Contoh:

REST

curl "https://graph.facebook.com/me?fields=id,name&access_token=[TOKEN]"

Memproses login pengguna secara manual

Jika tidak ingin menggunakan Client SDK, Anda juga dapat menangani alur login secara manual.

Metode login ini juga mendukung Login dengan Facebook untuk Game sebagai IdP. Identity Platform tidak mendukung penerapan Login dengan Facebook untuk Game secara manual. Klien ini hanya menerima token untuk bertukar kredensial Identity Platform.

  1. Integrasikan autentikasi Login dengan Facebook atau Facebook untuk Game ke dalam aplikasi Anda dengan mengikuti langkah-langkah dalam dokumentasi developer:

  2. Buat pengguna login dengan Facebook atau Facebook Login untuk Game menggunakan alur yang Anda terapkan pada langkah sebelumnya.

  3. Tukarkan token yang Anda terima dari Login dengan Facebook atau Facebook untuk Game dengan kredensial Identity Platform:

    JavaScript 

    var credential = firebase.auth.FacebookAuthProvider.credential(accessToken);

  4. Gunakan kredensial untuk memproses login pengguna dengan Identity Platform:

    JavaScript 

    // Sign in with the credential from the user.
firebase.auth()
  .signInWithCredential(credential)
  .then((result) => {
    // Signed in
    // ...
  })
  .catch((error) => {
    // Handle Errors here.
    const errorCode = error.code;
    const errorMessage = error.message;
    // The email of the user's account used.
    const email = error.email;
    // ...
  });

Langkah selanjutnya