Kullanıcıların, e-posta adresi ve şifreyle oturum açma dahil bir veya daha fazla oturum açma yöntemini ve Google Oturum Açma ve Facebook Oturum Açma gibi birleştirilmiş kimlik sağlayıcılarını kullanarak uygulamanızda oturum açmasına izin vermek için Firebase Authentication'ı kullanabilirsiniz. Bu eğitim, uygulamanıza e-posta adresi ve parolayla oturum açmayı nasıl ekleyeceğinizi göstererek Firebase Authentication'ı kullanmaya başlamanızı sağlar.
Kimlik Doğrulama SDK'sını ekleyin ve başlatın
Henüz yapmadıysanız Firebase JS SDK'yı yükleyin ve Firebase'i başlatın .
Firebase Authentication JS SDK'sını ekleyin ve Firebase Authentication'ı başlatın:
Web modüler API'si
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 ad alanlı API
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 yapın 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 bir dizi aracı tanıtalım: Firebase Local Emulator Suite. Kimlik doğrulama teknikleri ve sağlayıcılar arasında karar veriyorsanız, Kimlik Doğrulama ve Firebase Güvenlik Kurallarını kullanarak genel ve özel verilerle farklı veri modellerini denemek veya oturum açma kullanıcı arayüzü tasarımlarının prototipini oluşturmak istiyorsanız, canlı hizmetleri dağıtmadan yerel olarak çalışabilmek harika bir fikir olabilir .
Kimlik Doğrulama öykünücüsü, uygulamanızın öykünülmüş veritabanı içeriği ve yapılandırmasının yanı sıra isteğe bağlı olarak öykünülmüş proje kaynaklarınızla (işlevler, diğer veritabanları ve güvenlik kuralları) etkileşim kurmasını sağlayan Yerel Öykünücü Paketinin bir parçasıdır.
Kimlik Doğrulama öykünücüsünü kullanmak yalnızca birkaç adımı içerir:
- Öykünücüye bağlanmak için uygulamanızın test yapılandırmasına bir kod satırı ekleme.
- Yerel proje dizininizin kökünden,
firebase emulators:start
çalıştırılıyor. - Etkileşimli prototip oluşturma için Local Emulator Suite kullanıcı arayüzünü veya etkileşimli olmayan testler için Kimlik Doğrulama öykünücüsü REST API'yi kullanma.
Uygulamanızı Kimlik Doğrulama öykünücüsüne bağlama bölümünde ayrıntılı bir kılavuz mevcuttur. Daha fazla bilgi için Local Emulator Suite'in tanıtımına bakın.
Şimdi kullanıcıların kimliğinin nasıl doğrulanacağına devam edelim.
Yeni kullanıcılar kaydedin
Yeni kullanıcıların e-posta adreslerini ve şifrelerini kullanarak uygulamanıza kaydolmalarına olanak tanıyan bir form oluşturun. Kullanıcı formu doldurduğunda, kullanıcı tarafından sağlanan e-posta adresini ve şifreyi doğrulayın ve ardından bunları createUserWithEmailAndPassword
yöntemine iletin:
Web modular API
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 namespaced API
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ılarda oturum açın
Mevcut kullanıcıların e-posta adreslerini ve şifrelerini kullanarak oturum açmalarına olanak tanıyan bir form oluşturun. Kullanıcı formu signInWithEmailAndPassword
yöntemini çağırın:
Web modular API
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 namespaced API
firebase.auth().signInWithEmailAndPassword(email, password) .then((userCredential) => { // Signed in var user = userCredential.user; // ... }) .catch((error) => { var errorCode = error.code; var errorMessage = error.message; });
Bir kimlik doğrulama durumu gözlemcisi ayarlayın ve kullanıcı verilerini alın
Uygulamanızın oturum açan kullanıcı hakkında bilgiye ihtiyaç duyan sayfalarının her biri için genel kimlik doğrulama nesnesine bir gözlemci ekleyin. 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. Bir kullanıcı başarıyla oturum açtığında gözlemcide kullanıcı hakkında bilgi alabilirsiniz.
Web modular API
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 namespaced API
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 konuk hesapları için nasıl destek ekleyeceğinizi öğrenin: