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

  1. Tambahkan Firebase ke project JavaScript.
  2. Jika Anda belum menghubungkan aplikasi ke project Firebase, lakukanlah dari Firebase console.
  3. 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:

  1. 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.
  2. 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, lihat Dokumentasi Referensi Auth.

Memproses login pengguna 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:

  1. 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, lihat Dokumentasi Referensi Auth.

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.

  • Dalam Aturan Keamanan Firebase Realtime Database dan Cloud Storage, Anda dapat memperoleh 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