Melakukan Autentikasi Menggunakan Login dengan Facebook dengan JavaScript

Anda dapat mengizinkan pengguna melakukan autentikasi dengan Firebase menggunakan akun Facebook-nya dengan mengintegrasikan Login dengan Facebook ke aplikasi. Integrasi Login dengan Facebook dapat dilakukan menggunakan Firebase SDK untuk menjalankan alur login, atau menerapkan alur Login dengan 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 Sign in method, aktifkan metode login dengan Facebook, lalu masukkan App ID dan App Secret yang Anda dapatkan dari Facebook.
   3. Kemudian, pastikan URI pengalihan OAuth Anda (misalnya my-app-12345.firebaseapp.com/__/auth/handler) terdaftar sebagai salah satu dari URI pengalihan OAuth di halaman setelan aplikasi Facebook di situs Facebook for Developers, di konfigurasi Product Settings > Facebook Login.

Menangani alur login dengan Firebase SDK

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

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

1. Buat instance objek penyedia Facebook:

   Web

   Pelajari lebih lanjut Web API modular yang dapat di-tree-shaking dan upgrade dari API namespace.

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

   Web

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

2. Opsional: Tentukan cakupan OAuth 2.0 tambahan yang ingin diminta dari penyedia autentikasi. Untuk menambahkan cakupan, panggil addScope. Contoh:

   Web

   Pelajari lebih lanjut Web API modular yang dapat di-tree-shaking dan upgrade dari API namespace.

   provider.addScope('user_birthday');
   auth_facebook_provider_scopes.js

   Web

   provider.addScope('user_birthday');
   facebook.js

   Lihat dokumentasi penyedia autentikasi.
3. Opsional: Untuk melokalkan alur OAuth penyedia ke bahasa yang dipilih pengguna tanpa secara eksplisit meneruskan parameter OAuth kustom yang relevan, ubah kode bahasa di instance Auth sebelum memulai alur OAuth. Contoh:

   Web

   Pelajari lebih lanjut Web API modular yang dapat di-tree-shaking dan upgrade dari API namespace.

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

   Web

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

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 dalam dokumentasi penyedia OAuth dan nilainya yang terkait. Sebagai contoh:

   Web

   Pelajari lebih lanjut Web API modular yang dapat di-tree-shaking dan upgrade dari API namespace.

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

   Web

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

   Parameter OAuth wajib yang dicadangkan 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, baik dengan menampilkan jendela pop-up maupun dengan mengalihkannya ke halaman login. Untuk perangkat seluler, sebaiknya gunakan metode pengalihan.
   • Untuk login dengan jendela pop-up, panggil signInWithPopup:

     Web

     Pelajari lebih lanjut Web API modular yang dapat di-tree-shaking dan upgrade dari API namespace.

     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;
     
         // IdP data available using getAdditionalUserInfo(result)
         // ...
       })
       .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);
     
         // ...
       });
     auth_facebook_signin_popup.js

     Web

     firebase
       .auth()
       .signInWithPopup(provider)
       .then((result) => {
         /** @type {firebase.auth.OAuthCredential} */
         var credential = result.credential;
     
         // The signed-in user info.
         var user = result.user;
         // IdP data available in result.additionalUserInfo.profile.
           // ...
     
         // 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;
     
         // ...
       });
     facebook.js

     Perlu diperhatikan juga bahwa Anda dapat mengambil token OAuth penyedia Facebook yang dapat digunakan untuk mengambil data tambahan menggunakan Facebook API.

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

   • Untuk login dengan mengalihkan pengguna ke halaman login penyedia, panggil signInWithRedirect: Ikuti praktik terbaik saat menggunakan `signInWithRedirect`.

     Web

     Pelajari lebih lanjut Web API modular yang dapat di-tree-shaking dan upgrade dari API namespace.

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

     Web

     firebase.auth().signInWithRedirect(provider);
     index.js

     Selanjutnya, Anda juga bisa mengambil token OAuth penyedia Facebook dengan memanggil getRedirectResult saat halaman dimuat:

     Web

     Pelajari lebih lanjut Web API modular yang dapat di-tree-shaking dan upgrade dari API namespace.

     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;
         // IdP data available using getAdditionalUserInfo(result)
         // ...
       }).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);
         // ...
       });
     auth_facebook_signin_redirect_result.js

     Web

     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;
         // IdP data available in result.additionalUserInfo.profile.
           // ...
       }).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;
         // ...
       });
     facebook.js

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

Catatan: Facebook memberlakukan HTTPS dan tidak mengizinkan login dengan host yang tidak aman. Jika menggunakan Facebook dalam mode pengembangan dengan asal http://localhost, Anda perlu memastikan bahwa mode pengembangan diaktifkan untuk Aplikasi Facebook ini. Selain itu, login hanya akan diizinkan dengan akun pengujian Facebook.

Menangani Error account-exists-with-different-credential

Jika Anda mengaktifkan setelan One account per email address di Firebase console, saat pengguna mencoba login ke penyedia (seperti Facebook) dengan email yang sudah ada untuk penyedia pengguna Firebase lain (seperti Google), error auth/account-exists-with-different-credential akan ditampilkan beserta objek AuthCredential (token akses Facebook). Untuk menyelesaikan proses login ke penyedia yang dimaksud, pengguna harus login terlebih dahulu ke penyedia saat ini (Google) lalu menghubungkan akunnya ke AuthCredential sebelumnya (token akses Facebook).

Mode pop-up

Jika menggunakan signInWithPopup, Anda dapat menangani error auth/account-exists-with-different-credential dengan kode seperti pada contoh berikut:

import {
  getAuth,
  linkWithCredential,
  signInWithPopup,
  FacebookAuthProvider,
} from "firebase/auth";

try {
  // Step 1: User tries to sign in using Facebook.
  let result = await signInWithPopup(getAuth(), new FacebookAuthProvider());
} catch (error) {
  // Step 2: User's email already exists.
  if (error.code === "auth/account-exists-with-different-credential") {
    // The pending Facebook credential.
    let pendingCred = error.credential;

    // Step 3: Save the pending credential in temporary storage,

    // Step 4: Let the user know that they already have an account
    // but with a different provider, and let them choose another
    // sign-in method.
  }
}

// ...

try {
  // Step 5: Sign the user in using their chosen method.
  let result = await signInWithPopup(getAuth(), userSelectedProvider);

  // Step 6: Link to the Facebook credential.
  // TODO: implement `retrievePendingCred` for your app.
  let pendingCred = retrievePendingCred();

  if (pendingCred !== null) {
    // As you have access to the pending credential, you can directly call the
    // link method.
    let user = await linkWithCredential(result.user, pendingCred);
  }

  // Step 7: Continue to app.
} catch (error) {
  // ...
}

Mode pengalihan

Error ini ditangani dengan cara yang mirip di mode pengalihan, tetapi perbedaannya, kredensial yang tertunda harus dimasukkan ke cache di antara pengalihan halaman (misalnya, menggunakan penyimpanan sesi).

Lanjutan: Menangani alur login secara manual

Anda juga dapat melakukan autentikasi dengan Firebase menggunakan akun Facebook, dengan cara menangani alur login dengan Facebook Login JavaScript SDK:

1. Integrasikan Login dengan Facebook ke dalam aplikasi Anda dengan mengikuti dokumentasi developer. Pastikan untuk mengonfigurasi Login dengan Facebook dengan ID aplikasi Facebook Anda:

   <script src="//connect.facebook.net/en_US/sdk.js"></script>
   <script>
     FB.init({
       /**********************************************************************
        * TODO(Developer): Change the value below with your Facebook app ID. *
        **********************************************************************/
       appId: '<YOUR_FACEBOOK_APP_ID>',
       status: true,
       xfbml: true,
       version: 'v2.6',
     });
   </script>

2. Kami juga menyiapkan pemroses di status autentikasi Facebook:

   FB.Event.subscribe('auth.authResponseChange', checkLoginState);

3. Setelah mengintegrasikan Login dengan Facebook, tambahkan tombol Login dengan Facebook pada halaman web Anda:

   <fb:login-button
     data-auto-logout-link="true"
     scope="public_profile,email"
     size="large"
   ></fb:login-button>

4. Dalam callback status autentikasi Facebook, tukar token autentikasi dari respons autentikasi Facebook dengan kredensial Firebase lalu login ke Firebase:

   Web

   Pelajari lebih lanjut Web API modular yang dapat di-tree-shaking dan upgrade dari API namespace.

   import { getAuth, onAuthStateChanged, signInWithCredential, signOut, FacebookAuthProvider } from "firebase/auth";
   const auth = getAuth();
   
   function checkLoginState(response) {
     if (response.authResponse) {
       // User is signed-in Facebook.
       const unsubscribe = onAuthStateChanged(auth, (firebaseUser) => {
         unsubscribe();
         // Check if we are already signed-in Firebase with the correct user.
         if (!isUserEqual(response.authResponse, firebaseUser)) {
           // Build Firebase credential with the Facebook auth token.
           const credential = FacebookAuthProvider.credential(
               response.authResponse.accessToken);
   
           // Sign in with the credential from the Facebook user.
           signInWithCredential(auth, credential)
             .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);
               // ...
             });
         } else {
           // User is already signed-in Firebase with the correct user.
         }
       });
     } else {
       // User is signed-out of Facebook.
       signOut(auth);
     }
   }
   auth_facebook_callback.js

   Web

   function checkLoginState(response) {
     if (response.authResponse) {
       // User is signed-in Facebook.
       var unsubscribe = firebase.auth().onAuthStateChanged((firebaseUser) => {
         unsubscribe();
         // Check if we are already signed-in Firebase with the correct user.
         if (!isUserEqual(response.authResponse, firebaseUser)) {
           // Build Firebase credential with the Facebook auth token.
           var credential = firebase.auth.FacebookAuthProvider.credential(
               response.authResponse.accessToken);
   
           // Sign in with the credential from the Facebook user.
           firebase.auth().signInWithCredential(credential)
             .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;
               // ...
             });
         } else {
           // User is already signed-in Firebase with the correct user.
         }
       });
     } else {
       // User is signed-out of Facebook.
       firebase.auth().signOut();
     }
   }
   facebook.js

   Di sini juga Anda dapat menemukan dan menangani error. Untuk mengetahui daftar kode error, baca Dokumentasi Referensi Auth.
5. Anda juga harus memeriksa bahwa pengguna Facebook belum login ke Firebase untuk menghindari autentikasi ulang yang tidak diperlukan:

   Web

   Pelajari lebih lanjut Web API modular yang dapat di-tree-shaking dan upgrade dari API namespace.

   import { FacebookAuthProvider } from "firebase/auth";
   
   function isUserEqual(facebookAuthResponse, firebaseUser) {
     if (firebaseUser) {
       const providerData = firebaseUser.providerData;
       for (let i = 0; i < providerData.length; i++) {
         if (providerData[i].providerId === FacebookAuthProvider.PROVIDER_ID &&
             providerData[i].uid === facebookAuthResponse.userID) {
           // We don't need to re-auth the Firebase connection.
           return true;
         }
       }
     }
     return false;
   }
   auth_facebook_checksameuser.js

   Web

   function isUserEqual(facebookAuthResponse, firebaseUser) {
     if (firebaseUser) {
       var providerData = firebaseUser.providerData;
       for (var i = 0; i < providerData.length; i++) {
         if (providerData[i].providerId === firebase.auth.FacebookAuthProvider.PROVIDER_ID &&
             providerData[i].uid === facebookAuthResponse.userID) {
           // We don't need to re-auth the Firebase connection.
           return true;
         }
       }
     }
     return false;
   }
   facebook.js

Lanjutan: Melakukan autentikasi dengan Firebase di Node.js

Untuk melakukan autentikasi dengan Firebase pada aplikasi Node.js:

1. Proses login pengguna dengan Akun Facebook dan dapatkan token akses Facebook pengguna tersebut. Misalnya, proses login pengguna di browser sebagaimana dijelaskan di bagian Menangani alur login secara manual, tetapi kirim token akses ke aplikasi Node.js, dan bukan menggunakannya dalam aplikasi klien.
2. Setelah Anda mendapatkan token akses Facebook pengguna, gunakan token tersebut untuk mem-build objek Credential, lalu buat pengguna login dengan kredensial tersebut:

   Web

   Pelajari lebih lanjut Web API modular yang dapat di-tree-shaking dan upgrade dari API namespace.

   import { getAuth, signInWithCredential, FacebookAuthProvider } from "firebase/auth";
   
   // Sign in with the credential from the Facebook user.
   const auth = getAuth();
   signInWithCredential(auth, credential)
     .then((result) => {
       // Signed in 
       const credential = FacebookAuthProvider.credentialFromResult(result);
     })
     .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);
       // ...
     });
   auth_facebook_signin_credential.js

   Web

   // Sign in with the credential from the Facebook user.
   firebase.auth().signInWithCredential(credential)
     .then((result) => {
       // Signed in       
       var credential = result.credential;
       // ...
     })
     .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;
       // ...
     });
   facebook.js

Melakukan autentikasi dengan Firebase di ekstensi Chrome

Jika Anda membuat aplikasi ekstensi Chrome, baca artikel panduan Dokumen Di Balik Layar.

Menyesuaikan domain pengalihan untuk login dengan Facebook

Saat pembuatan project, Firebase akan menyediakan subdomain unik untuk project Anda: https://my-app-12345.firebaseapp.com.

Domain ini juga akan digunakan sebagai mekanisme pengalihan untuk login dengan OAuth. Domain tersebut harus diizinkan untuk semua penyedia OAuth yang didukung. Namun, hal ini berarti pengguna mungkin akan melihat domain tersebut saat login ke Facebook sebelum dialihkan kembali ke aplikasi: Lanjutkan ke: https://my-app-12345.firebaseapp.com.

Agar subdomain tidak ditampilkan, Anda dapat menyiapkan domain kustom dengan Firebase Hosting:

1. Ikuti langkah 1 sampai 3 seperti yang tertera di artikel Menyiapkan domain Anda untuk Hosting. Saat Anda memverifikasi kepemilikan domain, Hosting akan menyediakan sertifikat SSL untuk domain kustom Anda.
2. Tambahkan domain kustom ke daftar domain yang diizinkan di Firebase console: auth.custom.domain.com.
3. Pada konsol developer Facebook atau halaman penyiapan OAuth, berikan izin pada URL halaman pengalihan, yang akan dapat diakses di domain kustom Anda: https://auth.custom.domain.com/__/auth/handler.
4. Saat menginisialisasi library JavaScript, tentukan domain kustom Anda dengan kolom authDomain:

   var config = {
     apiKey: '...',
     // Changed from 'my-app-12345.firebaseapp.com'.
     authDomain: 'auth.custom.domain.com',
     databaseURL: 'https://my-app-12345.firebaseio.com',
     projectId: 'my-app-12345',
     storageBucket: 'my-app-12345.appspot.com',
     messagingSenderId: '1234567890'
   };
   firebase.initializeApp(config);

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 menetapkan observer pada objek Auth. Selanjutnya, Anda bisa mendapatkan informasi profil dasar pengguna dari objek User. Baca bagian Mengelola Pengguna.

• Di Aturan Keamanan Firebase Realtime Database dan Cloud Storage, Anda bisa mendapatkan ID pengguna unik milik pengguna 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.

Untuk memproses logout pengguna, panggil signOut:

Web

Pelajari lebih lanjut Web API modular yang dapat di-tree-shaking dan upgrade dari API namespace.

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

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

Web

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