Ikuti semua informasi yang diumumkan di Firebase Summit, dan pelajari bagaimana Firebase dapat membantu Anda mempercepat pengembangan aplikasi dan menjalankan aplikasi dengan percaya diri. Pelajari Lebih Lanjut

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 sandi, dan penyedia identitas gabungan seperti Masuk dengan Google dan Masuk dengan Facebook. Tutorial ini membantu Anda memulai Firebase Authentication dengan menunjukkan cara menambahkan login dengan alamat email dan 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:

Web version 9

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 version 8

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) Prototipe dan uji 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 fungsionalitas Otentikasi: Firebase Local Emulator Suite. Jika Anda memutuskan di antara teknik dan penyedia autentikasi, mencoba model data yang berbeda dengan data publik dan pribadi menggunakan Authentication dan Aturan Keamanan Firebase, atau membuat prototipe desain UI masuk, dapat bekerja secara lokal tanpa menerapkan layanan langsung bisa menjadi ide yang bagus .

Emulator Authentication 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 Suite Emulator Lokal untuk pembuatan prototipe interaktif, atau REST API emulator Otentikasi untuk pengujian non-interaktif.

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

Sekarang mari kita lanjutkan dengan cara mengautentikasi pengguna.

Daftarkan pengguna baru

Buat formulir yang memungkinkan pengguna baru 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 :

Web version 9

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

Web version 8

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

Masuk pengguna yang ada

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

Web version 9

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

Web version 8

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

Setel 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 . Ketika pengguna berhasil masuk, Anda bisa mendapatkan informasi tentang pengguna di pengamat.

Web version 9

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

Web version 8

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 selanjutnya

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