Bergabunglah dengan kami secara langsung dan online di Firebase Summit pada 18 Oktober 2022. Pelajari cara Firebase dapat membantu Anda mempercepat pengembangan aplikasi, merilis aplikasi dengan percaya diri, dan menentukan skala dengan mudah. Daftar sekarang

Memulai Firebase Authentication di Situs

Tetap teratur dengan koleksi Simpan dan kategorikan konten berdasarkan preferensi Anda.

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 JS SDK Firebase Authentication dan lakukan 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) 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 Aturan Keamanan Firebase, 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, jika diinginkan, 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 menghubungkannya ke emulator.
  2. Menjalankan firebase emulators:start dari root direktori project lokal Anda.
  3. Menggunakan UI Local Emulator Suite untuk pembuatan prototipe yang interaktif, atau REST API emulator Authentication untuk pengujian noninteraktif.

Panduan terperinci tersedia di bagian Menghubungkan aplikasi Anda ke emulator Authentication. Untuk 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. Setelah pengguna melengkapi formulir, validasi alamat email dan 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;
    // ..
  });

Memproses login pengguna yang ada

Buat formulir yang dapat dipakai pengguna yang ada untuk login menggunakan alamat email dan sandinya. Setelah 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;
  });

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 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 berikutnya

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