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.

Menambahkan dan melakukan inisialisasi Authentication SDK

  1. Jika Anda belum melakukannya, instal Firebase JS SDK dan inisialisasi Firebase.

  2. Tambahkan Firebase Authentication JS SDK dan lakukan inisialisasi Firebase Authentication:

Web 

import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";

// TODO: Replace the following with your app's Firebase project configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
  // ...
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);


// Initialize Firebase Authentication and get a reference to the service
const auth = getAuth(app);

Web 

import firebase from "firebase/compat/app";
import "firebase/compat/auth";

// TODO: Replace the following with your app's Firebase project configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
  // ...
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);


// Initialize Firebase Authentication and get a reference to the service
const auth = firebase.auth();

(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 fungsionalitas Authentication: Firebase Local Emulator Suite. Jika Anda sedang memilih teknik dan penyedia autentikasi, mencoba berbagai model data dengan data publik dan pribadi menggunakan Authentication dan Firebase Security Rules, atau membuat prototipe desain UI login, akan sangat bermanfaat jika Anda bisa bekerja secara lokal tanpa men-deploy layanan langsung.

Emulator Authentication adalah bagian dari Local Emulator Suite, yang memungkinkan aplikasi Anda berinteraksi dengan konten dan konfigurasi database yang diemulasi, serta dengan resource project yang diemulasi (fungsi, database lain, dan aturan keamanan).

Hanya diperlukan beberapa langkah untuk menggunakan emulator Authentication:

  1. Menambahkan satu 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 noninteraktif.

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

Sekarang, mari kita lanjutkan dengan cara mengautentikasi pengguna.

Mendaftarkan pengguna baru

Buat formulir yang dapat dipakai pengguna baru untuk mendaftar ke aplikasi Anda menggunakan alamat email dan sandi. Saat pengguna selesai mengisi formulir, validasikan alamat email dan sandi yang diberikan oleh pengguna, lalu teruskan ke metode 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

Memasukkan pengguna yang sudah terdaftar

Buat formulir yang dapat dipakai pengguna yang ada untuk login menggunakan alamat email dan sandinya. Saat pengguna selesai mengisi formulir, panggil metode 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

Menetapkan observer status autentikasi dan mendapatkan data pengguna

Untuk setiap halaman aplikasi yang memerlukan informasi tentang pengguna yang telah 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 tersebut di observer.

Web

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

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

Web

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/v8/firebase.User
    var uid = user.uid;
    // ...
  } else {
    // User is signed out
    // ...
  }
});
index.js

Langkah berikutnya

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