Firebase Authentication'ı kullanarak kullanıcıların uygulamanızda oturum açmak için bir ya da daha fazla e-posta adresi ve şifreyle oturum açma gibi diğer oturum açma yöntemlerini ve Google ile Oturum Açma ve Facebook Girişi gibi birleşik kimlik sağlayıcılar. Bu eğitim, Firebase Authentication'ı kullanmaya başlamanızı sağlar. Bu bilgiler, e-posta adresi ve şifreyle oturum açmanız gerekir.
Authentication SDK'yı ekleme ve başlatma
Henüz yapmadıysanız Firebase JS SDK'yı yükleyin ve Firebase'i başlatın.
Firebase Authentication JS SDK'yı ekleyin ve Firebase Authentication'ı başlatın:
Web
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
import firebase from "firebase/compat/app"; import "firebase/compat/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();
(İsteğe bağlı) Firebase Local Emulator Suite ile prototip oluşturun ve test edin
Uygulamanızın, kullanıcıların kimliğini nasıl doğruladığından bahsetmeden önce, Kimlik doğrulama işlevinin prototipini oluşturmak ve test etmek için kullanabileceğiniz araçlar: Firebase Local Emulator Suite. Kimlik doğrulama teknikleri arasında karar vermeye test ederek herkese açık ve gizli verilerle farklı veri modellerini deniyor, oturum açma kullanıcı arayüzü tasarımlarının prototipini oluşturarak kimlik doğrulama ve güvenlik kurallarını yerel olarak çalışmak sizin için harika bir fikir olabilir.
Kimlik Doğrulama emülatörü, Yerel Emulator Suite'in bir parçasıdır. uygulamanızın emüle edilmiş veritabanı içeriği ve yapılandırmasıyla etkileşimde bulunmasını sağlar. ve isteğe bağlı olarak emüle edilen proje kaynaklarınızın (işlevler, diğer veritabanları ve güvenlik kuralları) ekleyin.
Kimlik Doğrulama emülatörünün kullanımı yalnızca birkaç adımdan oluşur:
- Emülatöre bağlanmak için uygulamanızın test yapılandırmasına bir kod satırı ekleme.
- Yerel proje dizininizin kök dizininden
firebase emulators:start
komutunu çalıştırın. - Etkileşimli prototip oluşturmak için Local Emulator Suite kullanıcı arayüzünü kullanmak veya Etkileşimli olmayan test için kimlik doğrulama emülatörü REST API.
Uygulamanızı Kimlik Doğrulama emülatörüne bağlama başlıklı makalede ayrıntılı bir kılavuz bulabilirsiniz. Daha fazla bilgi için Local Emulator Suite tanıtımı konusuna bakın.
Şimdi kullanıcı kimliğinin nasıl doğrulanacağına geçelim.
Yeni kullanıcılar için kaydolma
Yeni kullanıcıların e-postalarını kullanarak uygulamanıza kaydolmasına olanak tanıyan bir form oluşturun
bir şifre girin. Kullanıcı formu doldurduğunda e-postayı doğrulayın
tarafından sağlanan adresi ve şifreyi kullanıp
createUserWithEmailAndPassword
yöntem:
Web
import { getAuth, createUserWithEmailAndPassword } from "firebase/auth"; const auth = getAuth(); createUserWithEmailAndPassword(auth, email, password) .then((userCredential) => { // Signed up const user = userCredential.user; // ... }) .catch((error) => { const errorCode = error.code; const errorMessage = error.message; // .. });
Web
firebase.auth().createUserWithEmailAndPassword(email, password) .then((userCredential) => { // Signed in var user = userCredential.user; // ... }) .catch((error) => { var errorCode = error.code; var errorMessage = error.message; // .. });
Mevcut kullanıcıların oturumunu açma
Mevcut kullanıcıların e-posta adreslerini kullanarak oturum açmasına olanak tanıyan bir form oluşturun
ve şifre. Bir kullanıcı formu doldurduğunda
signInWithEmailAndPassword
yöntem:
Web
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
firebase.auth().signInWithEmailAndPassword(email, password) .then((userCredential) => { // Signed in var user = userCredential.user; // ... }) .catch((error) => { var errorCode = error.code; var errorMessage = error.message; });
Kimlik doğrulama durumu gözlemleyicisi ayarlama ve kullanıcı verilerini alma
Uygulamanızın, oturum açmış kullanıcıyla ilgili bilgi gerektiren her bir sayfasında global kimlik doğrulama nesnesine bir gözlemci ekler. Bu gözlemci kullanıcının oturum açma durumu değiştiğinde çağrılır.
onAuthStateChanged
yöntemini kullanarak gözlemciyi ekleyin. Kullanıcı
Başarılı bir şekilde oturum açtığında, gözlemcideki kullanıcıyla ilgili bilgi edinebilirsiniz.
Web
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/auth.user const uid = user.uid; // ... } else { // User is signed out // ... } });
Web
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/v8/firebase.User var uid = user.uid; // ... } else { // User is signed out // ... } });
Sonraki adımlar
Diğer kimlik sağlayıcılar ve anonim konuklar için nasıl destek ekleyeceğinizi öğrenin hesaplar: