Memulai dengan Firebase Authentication di Situs Web

Anda dapat menggunakan Firebase Authentication untuk mengizinkan pengguna masuk ke aplikasi Anda menggunakan satu atau beberapa metode masuk, termasuk masuk dengan alamat email dan kata sandi, dan penyedia identitas gabungan seperti Masuk dengan Google dan Masuk dengan Facebook. Tutorial ini membantu Anda memulai dengan Firebase Authentication dengan menunjukkan kepada Anda cara menambahkan alamat email dan login kata sandi ke aplikasi Anda.

Tambahkan dan inisialisasi SDK Otentikasi

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

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

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);

import firebase from "firebase/app";
import "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
firebase.initializeApp(firebaseConfig);


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

(Opsional) Membuat prototipe dan menguji dengan Firebase Local Emulator Suite

Sebelum berbicara tentang bagaimana aplikasi Anda mengautentikasi pengguna, mari perkenalkan seperangkat alat yang dapat Anda gunakan untuk membuat prototipe dan menguji fungsi Otentikasi: Firebase Local Emulator Suite. Jika Anda memutuskan di antara teknik dan penyedia autentikasi, mencoba berbagai model data dengan data publik dan pribadi menggunakan Aturan Keamanan Otentikasi dan Firebase, atau membuat prototipe desain UI masuk, bisa bekerja secara lokal tanpa menerapkan layanan langsung bisa menjadi ide bagus .

Emulator Autentikasi adalah bagian dari Local Emulator Suite, yang memungkinkan aplikasi Anda berinteraksi dengan konten dan konfigurasi database yang diemulasi, serta secara opsional sumber daya proyek yang diemulasi (fungsi, database lain, dan aturan keamanan).

Menggunakan emulator Otentikasi hanya melibatkan beberapa langkah:

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

Panduan mendetail tersedia di Hubungkan aplikasi Anda ke emulator Autentikasi . Untuk informasi selengkapnya, lihat pengenalan Local Emulator Suite .

Sekarang mari kita lanjutkan dengan cara mengautentikasi pengguna.

Mendaftar pengguna baru

Buat formulir yang memungkinkan pengguna baru untuk mendaftar ke aplikasi Anda menggunakan alamat email dan kata sandi mereka. Saat pengguna melengkapi formulir, validasi alamat email dan kata sandi yang diberikan oleh pengguna, lalu teruskan ke metode createUserWithEmailAndPassword :

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

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

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

Login pengguna yang sudah ada

Buat formulir yang memungkinkan pengguna yang ada untuk masuk menggunakan alamat email dan kata sandi mereka. Saat pengguna melengkapi formulir, panggil metode signInWithEmailAndPassword :

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

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

Tetapkan pengamat status autentikasi dan dapatkan data pengguna

Untuk setiap halaman aplikasi Anda yang memerlukan informasi tentang pengguna yang masuk, lampirkan pengamat ke objek autentikasi global. Pengamat ini dipanggil setiap kali status masuk pengguna berubah.

Lampirkan pengamat menggunakan metode onAuthStateChanged . Saat pengguna berhasil masuk, Anda bisa mendapatkan informasi tentang pengguna di pengamat.

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

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
    // ...
  }
});
index.js

Langkah selanjutnya

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

• Masuk dengan Google
• Masuk Facebook
• Masuk ke Twitter
• Login GitHub
• Login anonim