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.
Menghubungkan aplikasi ke Firebase
Instal Firebase SDK. Pastikan untuk menempelkan kode konfigurasi ke halaman web Anda seperti yang dijelaskan.
(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:
- Menambahkan satu baris kode ke konfigurasi pengujian aplikasi untuk menghubungkannya ke emulator.
- Menjalankan
firebase emulators:start
dari root direktori project lokal Anda. - Menggunakan UI Local Emulator Suite untuk pembuatan prototipe interaktif, atau REST API emulator Authentication untuk pengujian noninteraktif.
Panduan terperinci tersedia di bagian Menghubungkan aplikasi 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 versi 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 versi 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 versi 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 versi 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 versi 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 versi 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:
- Login dengan Google
- Login dengan Facebook
- Login dengan Twitter
- Login dengan GitHub
- Login secara anonim