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
Jika Anda belum melakukannya, instal Firebase JS SDK dan inisialisasi Firebase .
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) 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:
- Menambahkan baris kode ke konfigurasi pengujian aplikasi Anda untuk terhubung ke emulator.
- Dari root direktori proyek lokal Anda, jalankan
firebase emulators:start
. - 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
:
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; // .. });
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
:
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; });
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.
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: