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

Memulai Firebase Authentication di Situs

Anda dapat menggunakan Firebase Authentication untuk mengizinkan pengguna login ke aplikasi Anda menggunakan satu atau beberapa metode login, termasuk login dengan alamat email dan sandi, serta penyedia identitas gabungan seperti Login dengan Google dan Login dengan Facebook. Tutorial ini akan memandu Anda memulai Firebase Authentication dengan menunjukkan cara menambahkan login dengan alamat email dan sandi ke aplikasi Anda.

Menghubungkan aplikasi ke Firebase

Instal Firebase SDK. Pastikan untuk menempelkan kode konfigurasi ke halaman web Anda seperti yang dijelaskan.

(Opsional) Membuat prototipe dan melakukan pengujian dengan Firebase Local Emulator Suite

Sebelum membahas cara aplikasi Anda mengautentikasi pengguna, kami akan memperkenalkan serangkaian alat yang dapat digunakan untuk membuat prototipe dan menguji fungsi Authentication: Firebase Local Emulator Suite. Jika Anda sedang memutuskan antara teknik autentikasi dan penyedia, mencoba berbagai model data dengan data publik dan pribadi menggunakan Authentication dan Aturan Keamanan Firebase, atau membuat prototipe desain UI login, kemampuan untuk bekerja secara lokal tanpa men-deploy layanan aktif bisa jadi ide yang bagus.

Emulator Authentication adalah bagian dari Local Emulator Suite, yang memungkinkan aplikasi Anda berinteraksi dengan konten dan konfigurasi database teremulasi, serta, jika diinginkan, dengan resource project teremulasi (fungsi, database lain, dan aturan keamanan). Perhatikan bahwa Local Emulator Suite belum mendukung Cloud Storage teremulasi.

Menggunakan emulator Authentication hanya memerlukan beberapa langkah:

  1. Menambahkan baris kode ke konfigurasi pengujian aplikasi untuk terhubung ke emulator.
  2. Menjalankan firebase emulators:start dari root direktori project lokal Anda.
  3. Menggunakan UI Local Emulator Suite untuk pembuatan prototipe interaktif, atau REST API emulator Authentication untuk pengujian non-interaktif.

Panduan terperinci tersedia di bagian Menghubungkan aplikasi Anda ke emulator Authentication. Untuk informasi selengkapnya, lihat Pengantar Local Emulator Suite.

Sekarang, mari kita lanjutkan dengan cara mengautentikasi pengguna.

Mendaftarkan pengguna baru

Buat formulir yang dapat digunakan pengguna baru untuk mendaftar ke aplikasi Anda menggunakan alamat email dan sandi. Setelah pengguna melengkapi formulir, validasi alamat email dan sandi yang diberikan oleh pengguna, lalu teruskan ke metode createUserWithEmailAndPassword:

firebase.auth().createUserWithEmailAndPassword(email, password)
  .then((userCredential) => {
    // Signed in
    var user = userCredential.user;
    // ...
  })
  .catch((error) => {
    var errorCode = error.code;
    var errorMessage = error.message;
    // ..
  });

Membuat pengguna yang ada agar login

Buat formulir yang memungkinkan pengguna yang sudah ada untuk login menggunakan alamat email dan sandinya. Setelah pengguna melengkapi formulir, panggil metode signInWithEmailAndPassword:

firebase.auth().signInWithEmailAndPassword(email, password)
  .then((userCredential) => {
    // Signed in
    var user = userCredential.user;
    // ...
  })
  .catch((error) => {
    var errorCode = error.code;
    var errorMessage = error.message;
  });

Menetapkan observer status autentikasi dan mendapatkan data pengguna

Untuk setiap halaman aplikasi yang memerlukan informasi tentang pengguna yang sedang login, tambahkan observer ke objek autentikasi global. Observer ini dipanggil setiap kali status login pengguna berubah.

Tambahkan observer menggunakan metode onAuthStateChanged. Setelah pengguna berhasil login, Anda bisa mendapatkan informasi tentang pengguna di observer.

firebase.auth().onAuthStateChanged((user) => {
  if (user) {
    // User is signed in, see docs for a list of available properties
    // https://firebase.google.com/docs/reference/js/firebase.User
    var uid = user.uid;
    // ...
  } else {
    // User is signed out
    // ...
  }
});

Langkah berikutnya

Pelajari cara menambahkan dukungan untuk penyedia identitas dan akun tamu anonim lainnya: