Melakukan Autentikasi dengan Firebase menggunakan Akun Berbasis Sandi dengan JavaScript

Anda dapat menggunakan Firebase Authentication untuk mengizinkan pengguna melakukan autentikasi dengan Firebase menggunakan alamat email dan sandi, serta mengelola akun berbasis sandi aplikasi.

Sebelum memulai

Tambahkan Firebase ke project JavaScript.
Jika Anda belum menghubungkan aplikasi ke project Firebase, lakukanlah dari Firebase console.
Aktifkan login dengan Email/Sandi:
1. Di Firebase console, buka bagian Auth.
2. Di tab Sign-in method, aktifkan metode login Email/password dan klik Save.

Membuat akun berbasis sandi

Untuk membuat akun pengguna baru dengan sandi, lakukan langkah-langkah berikut di halaman pendaftaran aplikasi Anda:

Ketika pengguna baru mendaftar menggunakan formulir pendaftaran aplikasi, selesaikan langkah-langkah validasi akun baru yang diwajibkan oleh aplikasi, antara lain memverifikasi bahwa sandi akun baru tersebut telah diketik dengan benar dan memenuhi persyaratan kerumitan.

Buat akun baru dengan meneruskan alamat email dan sandi pengguna baru ke createUserWithEmailAndPassword:

Web

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

const auth = getAuth();
createUserWithEmailAndPassword(auth, email, password)
  .then((userCredential) => {
    // Signed up 
    const user = userCredential.user;
    // ...
  })
  .catch((error) => {
    const errorCode = error.code;
    const errorMessage = error.message;
    // ..
  });auth_signup_password.js

Web

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

Jika akun baru telah dibuat, login pengguna tersebut juga akan diproses secara otomatis. Baca bagian Langkah berikutnya di bawah untuk mendapatkan detail pengguna yang login.

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

Membuat agar pengguna login dengan alamat email dan sandi

Langkah-langkah untuk memproses login pengguna dengan sandi mirip dengan langkah-langkah untuk membuat akun baru. Di halaman login aplikasi Anda, lakukan hal berikut:

Ketika pengguna login ke aplikasi, teruskan alamat email dan sandi pengguna ke signInWithEmailAndPassword:

Web

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

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

Web

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

Baca bagian Langkah berikutnya di bawah untuk mendapatkan detail pengguna yang login.

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

Direkomendasikan: Menetapkan kebijakan sandi

Anda dapat meningkatkan keamanan akun dengan menerapkan persyaratan kerumitan sandi.

Untuk mengonfigurasi kebijakan sandi pada project, buka tab Password policy di halaman Authentication Settings pada Firebase console:

Authentication Settings

Kebijakan sandi Firebase Authentication mendukung persyaratan sandi berikut:

Diperlukan karakter huruf kecil
Diperlukan karakter huruf besar
Diperlukan karakter numerik
Diperlukan karakter non-alfanumerik

Karakter berikut memenuhi persyaratan karakter non-alfanumerik: ^ $ * . [ ] { } ( ) ? " ! @ # % & / \ , > < ' : ; | _ ~
Panjang sandi minimum (berkisar antara 6 hingga 30 karakter; defaultnya adalah 6 karakter)
Panjang sandi maksimum (panjang maksimum 4.096 karakter)

Terdapat dua mode untuk mengaktifkan penerapan kebijakan sandi:

Wajib: Upaya login akan gagal sampai pengguna menggunakan sandi yang sesuai dengan kebijakan Anda.
Beri Tahu: Pengguna diizinkan untuk login dengan sandi yang tidak mematuhi kebijakan. Saat menggunakan mode ini, Anda harus memeriksa apakah sandi pengguna mematuhi kebijakan di sisi klien dan meminta pengguna dengan cara tertentu untuk memperbarui sandi mereka jika tidak mematuhinya.

Pengguna baru selalu diwajibkan untuk memilih sandi yang mematuhi kebijakan Anda.

Jika memiliki pengguna aktif, sebaiknya jangan aktifkan fitur upgrade paksa saat login kecuali jika Anda ingin memblokir akses ke pengguna yang sandinya tidak mematuhi kebijakan Anda. Sebagai gantinya, gunakan mode beri tahu, yang memungkinkan pengguna login dengan sandi saat ini, dan memberi tahu tentang persyaratan yang tidak dimiliki oleh sandi mereka.

Memvalidasi sandi pada klien

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

const status = await validatePassword(getAuth(), passwordFromUser);
if (!status.isValid) {
  // Password could not be validated. Use the status to show what
  // requirements are met and which are missing.

  // If a criterion is undefined, it is not required by policy. If the
  // criterion is defined but false, it is required but not fulfilled by
  // the given password. For example:
  const needsLowerCase = status.containsLowercaseLetter !== true;
}

Direkomendasikan: Mengaktifkan perlindungan enumerasi email

Beberapa metode Firebase Authentication yang menggunakan alamat email sebagai parameter akan menampilkan error tertentu jika alamat email dibatalkan pendaftarannya ketika harus didaftarkan (misalnya, saat login dengan alamat email dan sandi), atau didaftarkan saat alamat tidak boleh digunakan (misalnya, saat mengubah alamat email pengguna). Meskipun error ini dapat berguna untuk menyarankan solusi tertentu kepada pengguna, hal ini juga dapat disalahgunakan oleh pelaku kejahatan untuk menemukan alamat email yang didaftarkan oleh pengguna.

Untuk mengurangi risiko ini, sebaiknya aktifkan perlindungan enumerasi email untuk project Anda menggunakan alat gcloud Google Cloud. Perlu diperhatikan bahwa mengaktifkan fitur ini akan mengubah perilaku pelaporan error Firebase Authentication. Jadi, pastikan aplikasi Anda tidak mengandalkan error yang lebih spesifik.

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

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