1. Oluşturacaklarınız
Bu codelab'de, Angular kitaplığımızdaki en son özelliklerle (AngularFire) gerçek zamanlı ortak çalışmaya dayalı bir harita içeren bir seyahat blogu oluşturacaksınız. Son web uygulaması, seyahat ettiğiniz her yere resim yükleyebileceğiniz bir seyahat blogundan oluşacak.
Web uygulamasını oluşturmak için AngularFire, yerel test için Emulator Suite, kullanıcı verilerini takip etmek için Authentication, verileri ve medyayı kalıcı hale getirmek için Firestore ve Storage (Cloud Functions tarafından desteklenir) ve son olarak uygulamayı dağıtmak için Firebase Hosting kullanılacak.
Neler öğreneceksiniz?
- Emulator Suite ile Firebase ürünlerini yerel olarak geliştirme
- AngularFire ile web uygulamanızı geliştirme
- Verilerinizi Firestore'da kalıcı hale getirme
- Depolama alanında medyayı kalıcı hale getirme
- Uygulamanızı Firebase Hosting'e dağıtma
- Veritabanlarınız ve API'lerinizle etkileşim kurmak için Cloud Functions'ı kullanma
Gerekenler
- Node.js 10 veya sonraki sürümler
- Firebase projenizin oluşturulması ve yönetilmesi için bir Google Hesabı
- Firebase CLI sürüm 11.14.2 veya sonraki sürümler
- Chrome gibi istediğiniz bir tarayıcı
- Angular ve JavaScript hakkında temel bilgi
2. Örnek kodu alın
Codelab'in GitHub deposunu komut satırından kopyalayın:
git clone https://github.com/firebase/codelab-friendlychat-web
Alternatif olarak, git yüklü değilse depoyu ZIP dosyası olarak indirebilirsiniz.
GitHub deposunda birden fazla platform için örnek projeler bulunur.
Bu codelab'de yalnızca webframework deposu kullanılır:
- 📁 webframework: Bu codelab sırasında temel alacağınız başlangıç kodu.
Bağımlıları yükleme
Klonlama işleminden sonra, web uygulamasını oluşturmadan önce kök ve functions klasöründeki bağımlılıkları yükleyin.
cd webframework && npm install
cd functions && npm install
Firebase CLI'yi yükleyin
Terminalde şu komutu kullanarak Firebase CLI'yı yükleyin:
npm install -g firebase-tools
Firebase CLI sürümünüzün 11.14.2'den büyük olduğunu şu komutla tekrar kontrol edin:
firebase --version
Sürümünüz 11.14.2'den eskiyse lütfen aşağıdaki yöntemlerden birini kullanarak güncelleyin:
npm update firebase-tools
3. Firebase projesi oluşturma ve ayarlama
Firebase projesi oluşturma
- Google Hesabınızı kullanarak Firebase konsolunda oturum açın.
- Yeni bir proje oluşturmak için düğmeyi tıklayın ve ardından bir proje adı girin (örneğin,
FriendlyChat).
- Devam'ı tıklayın.
- İstenirse Firebase şartlarını inceleyip kabul edin ve Devam'ı tıklayın.
- (İsteğe bağlı) Firebase konsolunda yapay zeka yardımını etkinleştirin ("Firebase'de Gemini" olarak adlandırılır).
- Bu codelab için Google Analytics'e ihtiyacınız yoktur. Bu nedenle, Google Analytics seçeneğini devre dışı bırakın.
- Proje oluştur'u tıklayın, projenizin hazırlanmasını bekleyin ve ardından Devam'ı tıklayın.
Projeye Firebase web uygulaması ekleme
- Yeni bir Firebase web uygulaması oluşturmak için web simgesini tıklayın.
- Bir sonraki adımda bir yapılandırma nesnesi görürsünüz. Bu nesnenin içeriğini
environments/environment.tsdosyasına kopyalayın.
Firebase ürünlerini ayarlama
Oluşturacağımız uygulama, web uygulamaları için kullanılabilen Firebase ürünlerini kullanır:
- Kullanıcılarınızın uygulamanızda kolayca oturum açmasına olanak tanımak için Firebase Authentication.
- Yapılandırılmış verileri bulutta kaydetmek ve veriler değiştiğinde anında bildirim almak için Cloud Firestore.
- Dosyaları buluta kaydetmek için Cloud Storage for Firebase.
- Öğelerinizi barındırmak ve sunmak için Firebase Hosting.
- Dahili ve harici API'lerle etkileşim kurmak için işlevler.
Bu ürünlerden bazıları özel yapılandırmalar gerektirir veya Firebase konsolu kullanılarak etkinleştirilmesi gerekir.
Firebase Authentication için Google ile oturum açma özelliğini etkinleştirme
Kullanıcıların Google Hesaplarıyla web uygulamasında oturum açmasına izin vermek için Google oturum açma yöntemini kullanacağız.
Google ile oturum açma özelliğini etkinleştirmek için:
- Firebase konsolunda, sol paneldeki Build (Oluştur) bölümünü bulun.
- Kimlik doğrulama'yı ve ardından Oturum açma yöntemi sekmesini tıklayın (veya doğrudan gitmek için burayı tıklayın).
- Google ile oturum açma sağlayıcısını etkinleştirin ve Kaydet'i tıklayın.
- Uygulamanızın herkese açık adını <your-project-name> olarak ayarlayın ve açılır menüden bir Proje destek e-posta adresi seçin.
Cloud Firestore'u etkinleştirme
- Firebase konsolunun Build (Oluştur) bölümünde Firestore Database'i (Firestore veritabanı) tıklayın.
- Cloud Firestore bölmesinde Veritabanı oluştur'u tıklayın.
- Cloud Firestore verilerinizin depolandığı konumu ayarlayın. Bu ayarı varsayılan olarak bırakabilir veya size yakın bir bölge seçebilirsiniz.
Cloud Storage'ı etkinleştirme
Web uygulaması, resimleri depolamak, yüklemek ve paylaşmak için Cloud Storage for Firebase'i kullanır.
- Firebase Console'un Build (Oluştur) bölümünde Storage'ı (Depolama) tıklayın.
- Başlayın düğmesi yoksa Cloud Storage zaten
etkinleştirilmişse aşağıdaki adımları uygulamanız gerekmez.
- Get Started'ı (Başlayın) tıklayın.
- Firebase projenizin güvenlik kurallarıyla ilgili sorumluluk reddi beyanını okuyun ve Sonraki'yi tıklayın.
- Cloud Storage konumu, Cloud Firestore veritabanınız için seçtiğiniz bölgeyle önceden seçilir. Kurulumu tamamlamak için Bitti'yi tıklayın.
Varsayılan güvenlik kurallarıyla, kimliği doğrulanmış tüm kullanıcılar Cloud Storage'a herhangi bir şey yazabilir. Bu codelab'in ilerleyen bölümlerinde depolama alanımızı daha güvenli hale getireceğiz.
4. Firebase projenize bağlanma
Firebase komut satırı arayüzü (CLI), web uygulamanızı yerel olarak sunmak ve Firebase projenize dağıtmak için Firebase Hosting'i kullanmanıza olanak tanır.
Komut satırınızın, uygulamanızın yerel webframework dizinine eriştiğinden emin olun.
Web uygulaması kodunu Firebase projenize bağlayın. Öncelikle komut satırında Firebase CLI'de oturum açın:
firebase login
Ardından, proje takma adı oluşturmak için aşağıdaki komutu çalıştırın. $YOUR_PROJECT_ID yerine Firebase projenizin kimliğini yazın.
firebase use $YOUR_PROJECT_ID
AngularFire'ı ekleme
Uygulamaya AngularFire'ı eklemek için şu komutu çalıştırın:
ng add @angular/fire
Ardından, komut satırı talimatlarını uygulayın ve Firebase projenizde bulunan özellikleri seçin.
Firebase'i başlatma
Firebase projesini başlatmak için şu komutu çalıştırın:
firebase init
Ardından, komut satırı istemlerini izleyerek Firebase projenizde kullanılan özellikleri ve emülatörleri seçin.
Emülatörleri başlatma
Emülatörleri başlatmak için webframework dizininden aşağıdaki komutu çalıştırın:
firebase emulators:start
Sonunda aşağıdakine benzer bir şey görürsünüz:
$ firebase emulators:start
i emulators: Starting emulators: auth, functions, firestore, hosting, functions
i firestore: Firestore Emulator logging to firestore-debug.log
i hosting: Serving hosting files from: public
✔ hosting: Local server: http://localhost:5000
i ui: Emulator UI logging to ui-debug.log
i functions: Watching "/functions" for Cloud Functions...
✔ functions[updateMap]: firestore function initialized.
┌─────────────────────────────────────────────────────────────┐
│ ✔ All emulators ready! It is now safe to connect your app. │
│ i View Emulator UI at http://localhost:4000 │
└─────────────────────────────────────────────────────────────┘
┌────────────────┬────────────────┬─────────────────────────────────┐
│ Emulator │ Host:Port │ View in Emulator UI │
├────────────────┼────────────────┼─────────────────────────────────┤
│ Authentication │ localhost:9099 │ http://localhost:4000/auth │
├────────────────┼────────────────┼─────────────────────────────────┤
│ Functions │ localhost:5001 │ http://localhost:4000/functions │
├────────────────┼────────────────┼─────────────────────────────────┤
│ Firestore │ localhost:8080 │ http://localhost:4000/firestore │
├────────────────┼────────────────┼─────────────────────────────────┤
│ Hosting │ localhost:5000 │ n/a │
└────────────────┴────────────────┴─────────────────────────────────┘
Emulator Hub running at localhost:4400
Other reserved ports: 4500
Issues? Report them at https://github.com/firebase/firebase-tools/issues and attach the *-debug.log files.
✔All emulators ready! mesajını gördüğünüzde emülatörler kullanıma hazırdır.
Seyahat uygulamanızın henüz çalışmayan kullanıcı arayüzünü görürsünüz:
Haydi oluşturmaya başlayalım.
5. Web uygulamasını emülatörlere bağlama
Emülatör günlüklerindeki tabloya göre Cloud Firestore emülatörü 8080 numaralı bağlantı noktasını, Authentication emülatörü ise 9099 numaralı bağlantı noktasını dinliyor.
EmulatorUI'yı açma
Web tarayıcınızda http://127.0.0.1:4000/ adresine gidin. Emulator Suite kullanıcı arayüzünü görmeniz gerekir.
Uygulamayı emülatörleri kullanacak şekilde yönlendirme
src/app/app.module.ts içinde, AppModule'nin içe aktarma listesine aşağıdaki kodu ekleyin:
@NgModule({
declarations: [...],
imports: [
provideFirebaseApp(() => initializeApp(environment.firebase)),
provideAuth(() => {
const auth = getAuth();
if (location.hostname === 'localhost') {
connectAuthEmulator(auth, 'http://127.0.0.1:9099', { disableWarnings: true });
}
return auth;
}),
provideFirestore(() => {
const firestore = getFirestore();
if (location.hostname === 'localhost') {
connectFirestoreEmulator(firestore, '127.0.0.1', 8080);
}
return firestore;
}),
provideFunctions(() => {
const functions = getFunctions();
if (location.hostname === 'localhost') {
connectFunctionsEmulator(functions, '127.0.0.1', 5001);
}
return functions;
}),
provideStorage(() => {
const storage = getStorage();
if (location.hostname === 'localhost') {
connectStorageEmulator(storage, '127.0.0.1', 5001);
}
return storage;
}),
...
]
Uygulama artık yerel emülatörleri kullanacak şekilde yapılandırıldı. Bu sayede test ve geliştirme işlemleri yerel olarak yapılabilecek.
6. Kimlik Doğrulama Ekleme
Uygulama için emülatörler ayarlandığına göre, her kullanıcının mesaj göndermeden önce oturum açmasını sağlamak için kimlik doğrulama özellikleri ekleyebiliriz.
Bunu yapmak için signin işlevlerini doğrudan AngularFire'dan içe aktarabilir ve kullanıcınızın kimlik doğrulama durumunu authState işleviyle izleyebiliriz. Sayfa yüklendiğinde kullanıcı kimlik doğrulama durumunu kontrol edecek şekilde giriş sayfası işlevlerini değiştirin.
AngularFire Auth'u yerleştirme
src/app/pages/login-page/login-page.component.ts içinde @angular/fire/auth hizmetinden Auth öğesini içe aktarın ve LoginPageComponent öğesine yerleştirin. Google gibi kimlik doğrulama sağlayıcılar ve signin, signout gibi işlevler de doğrudan aynı paketten içe aktarılabilir ve uygulamada kullanılabilir.
import { Auth, GoogleAuthProvider, signInWithPopup, signOut, user } from '@angular/fire/auth';
export class LoginPageComponent implements OnInit {
private auth: Auth = inject(Auth);
private provider = new GoogleAuthProvider();
user$ = user(this.auth);
constructor() {}
ngOnInit(): void {}
login() {
signInWithPopup(this.auth, this.provider).then((result) => {
const credential = GoogleAuthProvider.credentialFromResult(result);
return credential;
})
}
logout() {
signOut(this.auth).then(() => {
console.log('signed out');}).catch((error) => {
console.log('sign out error: ' + error);
})
}
}
Giriş sayfası artık işlevsel. Giriş yapmayı deneyin ve kimlik doğrulama emülatöründeki sonuçlara göz atın.
7. Firestore'u yapılandırma
Bu adımda, Firestore'da depolanan seyahat blogu yayınlarını yayınlama ve güncelleme işlevini ekleyeceksiniz.
Kimlik doğrulama işlevlerine benzer şekilde, Firestore işlevleri de AngularFire'da önceden paketlenmiş olarak gelir. Her doküman bir koleksiyona aittir ve her doküman iç içe yerleştirilmiş koleksiyonlar da içerebilir. Seyahat blogu gönderisi oluşturmak ve güncellemek için Firestore'daki dokümanın path bilinmesi gerekir.
TravelService'i uygulama
Web uygulamasında Firestore belgelerinin okunması ve güncellenmesi gereken birçok farklı sayfa olacağından, her sayfaya aynı AngularFire işlevlerini tekrar tekrar eklememek için işlevleri src/app/services/travel.service.ts içinde uygulayabiliriz.
Önceki adıma benzer şekilde, hizmetimize Auth ve Firestore ekleyerek başlayın. Mevcut kimlik doğrulama durumunu dinleyen bir gözlemlenebilir user$ nesnesi tanımlamak da faydalıdır.
import { doc, docData, DocumentReference, Firestore, getDoc, setDoc, updateDoc, collection, addDoc, deleteDoc, collectionData, Timestamp } from "@angular/fire/firestore";
export class TravelService {
firestore: Firestore = inject(Firestore);
auth: Auth = inject(Auth);
user$ = authState(this.auth).pipe(filter(user => user !== null), map(user => user!));
router: Router = inject(Router);
Seyahat yayını ekleme
Seyahat gönderileri, Firestore'da depolanan belgeler olarak bulunur. Belgeler koleksiyonlarda yer alması gerektiğinden tüm seyahat gönderilerini içeren koleksiyona travels adı verilir. Bu nedenle, tüm seyahat yayınlarının yolu travels/ olur.
AngularFire'daki addDoc işlevi kullanılarak bir koleksiyona nesne eklenebilir:
async addEmptyTravel(userId: String) {
...
addDoc(collection(this.firestore, 'travels'), travelData).then((travelRef) => {
collection(this.firestore, `travels/${travelRef.id}/stops`);
setDoc(travelRef, {... travelData, id: travelRef.id})
this.router.navigate(['edit', `${travelRef.id}`]);
return travelRef;
})
}
Verileri güncelleme ve silme
Herhangi bir seyahat gönderisinin uid'si verildiğinde, Firestore'da depolanan belgenin yolu çıkarılabilir. Bu yol daha sonra AngularFire'ın updateFoc ve deleteDoc işlevleri kullanılarak okunabilir, güncellenebilir veya silinebilir:
async updateData(path: string, data: Partial<Travel | Stop>) {
await updateDoc(doc(this.firestore, path), data)
}
async deleteData(path: string) {
const ref = doc(this.firestore, path);
await deleteDoc(ref)
}
Verileri observable olarak okuma
Seyahat gönderileri ve yol üzerindeki duraklar oluşturulduktan sonra değiştirilebildiğinden, yapılan değişikliklere abone olmak için doküman nesnelerini gözlemlenebilir olarak almak daha faydalı olacaktır. Bu işlev, @angular/fire/firestore'daki docData ve collectionData işlevleri tarafından sunulur.
getDocData(path: string) {
return docData(doc(this.firestore, path), {idField: 'id'}) as Observable<Travel | Stop>
}
getCollectionData(path: string) {
return collectionData(collection(this.firestore, path), {idField: 'id'}) as Observable<Travel[] | Stop[]>
}
Seyahat gönderisine durak ekleme
Seyahat gönderisi işlemleri ayarlandığına göre artık durakları ele almanın zamanı geldi. Duraklar, seyahat gönderisinin alt koleksiyonu olarak şu şekilde yer alır: travels/
Bu işlem, seyahat gönderisi oluşturmaya neredeyse tamamen benzer. Bu nedenle, kendinize meydan okuyarak bu işlemi kendi başınıza uygulamayı deneyin veya aşağıdaki uygulamayı inceleyin:
async addStop(travelId: string) {
...
const ref = await addDoc(collection(this.firestore, `travels/${travelId}/stops`), stopData)
setDoc(ref, {...stopData, id: ref.id})
}
Güzel! Firestore işlevleri Seyahat hizmetinde kullanıma sunuldu. Artık bu işlevlerin nasıl çalıştığını görebilirsiniz.
Uygulamada Firestore işlevlerini kullanma
src/app/pages/my-travels/my-travels.component.ts'ya gidin ve işlevlerini kullanmak için TravelService'u ekleyin.
travelService = inject(TravelService);
travelsData$: Observable<Travel[]>;
stopsList$!: Observable<Stop[]>;
constructor() {
this.travelsData$ = this.travelService.getCollectionData(`travels`) as Observable<Travel[]>
}
TravelService, tüm seyahatlerin Observable dizisini almak için oluşturucuda çağrılır.
Yalnızca mevcut kullanıcının seyahatlerinin gerektiği durumlarda query işlevini kullanın.
Güvenliği sağlamak için diğer yöntemler arasında güvenlik kurallarını uygulama veya Firestore ile Cloud Functions'ı kullanma (aşağıdaki isteğe bağlı adımlarda açıklanmıştır) yer alır.
Ardından, TravelService içinde uygulanan işlevleri çağırmanız yeterlidir.
async createTravel(userId: String) {
this.travelService.addEmptyTravel(userId);
}
deleteTravel(travelId: String) {
this.travelService.deleteData(`travels/${travelId}`)
}
Seyahatlerim sayfası artık çalışır durumda olmalıdır. Yeni bir seyahat yayını oluşturduğunuzda Firestore emülatörünüzde neler olduğunu inceleyin.
Ardından, /src/app/pages/edit-travels/edit-travels.component.ts içindeki güncelleme işlevleri için tekrarlayın :
travelService: TravelService = inject(TravelService)
travelId = this.activatedRoute.snapshot.paramMap.get('travelId');
travelData$: Observable<Travel>;
stopsData$: Observable<Stop[]>;
constructor() {
this.travelData$ = this.travelService.getDocData(`travels/${this.travelId}`) as Observable<Travel>
this.stopsData$ = this.travelService.getCollectionData(`travels/${this.travelId}/stops`) as Observable<Stop[]>
}
updateCurrentTravel(travel: Partial<Travel>) {
this.travelService.updateData(`travels${this.travelId}`, travel)
}
updateCurrentStop(stop: Partial<Stop>) {
stop.type = stop.type?.toString();
this.travelService.updateData(`travels${this.travelId}/stops/${stop.id}`, stop)
}
addStop() {
if (!this.travelId) return;
this.travelService.addStop(this.travelId);
}
deleteStop(stopId: string) {
if (!this.travelId || !stopId) {
return;
}
this.travelService.deleteData(`travels${this.travelId}/stops/${stopId}`)
this.stopsData$ = this.travelService.getCollectionData(`travels${this.travelId}/stops`) as Observable<Stop[]>
}
8. Depolama alanını yapılandırma
Artık resimleri ve diğer medya türlerini depolamak için Storage'ı uygulayacaksınız.
Cloud Firestore, JSON nesneleri gibi yapılandırılmış verileri depolamak için en iyi seçenektir. Cloud Storage, dosyaları veya blob'ları depolamak için tasarlanmıştır. Bu uygulamada, kullanıcıların seyahat fotoğraflarını paylaşmasına izin vermek için bu API'yi kullanacaksınız.
Aynı şekilde, Storage ile dosyaları depolamak ve güncellemek için her dosyanın benzersiz bir tanımlayıcısı olması gerekir.
TraveService içindeki işlevleri uygulayalım:
Dosya yükleme
src/app/services/travel.service.ts konumuna gidin ve AngularFire'dan Storage'ı ekleyin:
export class TravelService {
firestore: Firestore = inject(Firestore);
auth: Auth = inject(Auth);
storage: Storage = inject(Storage);
Yükleme işlevini uygulayın:
async uploadToStorage(path: string, input: HTMLInputElement, contentType: any) {
if (!input.files) return null
const files: FileList = input.files;
for (let i = 0; i < files.length; i++) {
const file = files.item(i);
if (file) {
const imagePath = `${path}/${file.name}`
const storageRef = ref(this.storage, imagePath);
await uploadBytesResumable(storageRef, file, contentType);
return await getDownloadURL(storageRef);
}
}
return null;
}
Belgelere Firestore'dan, dosyalara ise Cloud Storage'dan erişme arasındaki temel fark, her ikisi de klasör yapılı yolları izlese de temel URL ve yol kombinasyonunun getDownloadURL aracılığıyla elde edilmesidir. Bu kombinasyon daha sonra depolanabilir ve
İşlevi uygulamada kullanma
src/app/components/edit-stop/edit-stop.component.ts konumuna gidin ve yükleme işlevini şu şekilde çağırın:
async uploadFile(file: HTMLInputElement, stop: Partial<Stop>) {
const path = `/travels/${this.travelId}/stops/${stop.id}`
const url = await this.travelService.uploadToStorage(path, file, {contentType: 'image/png'});
stop.image = url ? url : '';
this.travelService.updateData(path, stop);
}
Resim yüklendiğinde medya dosyası depolama alanına yüklenir ve URL, Firestore'daki belgede buna göre depolanır.
9. Uygulamanın dağıtılması
Artık uygulamayı dağıtmaya hazırız.
firebase yapılandırmalarını src/environments/environment.ts'den src/environments/environment.prod.ts'ye kopyalayın ve şu komutu çalıştırın:
firebase deploy
Aşağıdakine benzer bir tablo görürsünüz:
✔ Browser application bundle generation complete.
✔ Copying assets complete.
✔ Index html generation complete.
=== Deploying to 'friendly-travels-b6a4b'...
i deploying storage, firestore, hosting
i firebase.storage: checking storage.rules for compilation errors...
✔ firebase.storage: rules file storage.rules compiled successfully
i firestore: reading indexes from firestore.indexes.json...
i cloud.firestore: checking firestore.rules for compilation errors...
✔ cloud.firestore: rules file firestore.rules compiled successfully
i storage: latest version of storage.rules already up to date, skipping upload...
i firestore: deploying indexes...
i firestore: latest version of firestore.rules already up to date, skipping upload...
✔ firestore: deployed indexes in firestore.indexes.json successfully for (default) database
i hosting[friendly-travels-b6a4b]: beginning deploy...
i hosting[friendly-travels-b6a4b]: found 6 files in .firebase/friendly-travels-b6a4b/hosting
✔ hosting[friendly-travels-b6a4b]: file upload complete
✔ storage: released rules storage.rules to firebase.storage
✔ firestore: released rules firestore.rules to cloud.firestore
i hosting[friendly-travels-b6a4b]: finalizing version...
✔ hosting[friendly-travels-b6a4b]: version finalized
i hosting[friendly-travels-b6a4b]: releasing new version...
✔ hosting[friendly-travels-b6a4b]: release complete
✔ Deploy complete!
Project Console: https://console.firebase.google.com/project/friendly-travels-b6a4b/overview
Hosting URL: https://friendly-travels-b6a4b.web.app
10. Tebrikler!
Uygulamanız artık tamamlanmış ve Firebase Hosting'e dağıtılmış olmalıdır. Tüm verilere ve analizlere artık Firebase konsolunuzdan erişebilirsiniz.
AngularFire, Functions ve güvenlik kurallarıyla ilgili daha fazla özellik için aşağıdaki isteğe bağlı adımlara ve diğer Firebase Codelab'lerine göz atmayı unutmayın.
11. İsteğe bağlı: AngularFire kimlik doğrulama korumaları
AngularFire, Firebase Authentication'ın yanı sıra rotalarda kimlik doğrulamaya dayalı korumalar da sunar. Böylece, yeterli erişimi olmayan kullanıcılar yönlendirilebilir. Bu, uygulamanın korunan verilere erişen kullanıcılardan korunmasına yardımcı olur.
src/app/app-routing.module.ts içinde içe aktarma
import {AuthGuard, redirectLoggedInTo, redirectUnauthorizedTo} from '@angular/fire/auth-guard'
Ardından, kullanıcıların belirli sayfalarda ne zaman ve nereye yönlendirileceğine dair işlevler tanımlayabilirsiniz:
const redirectUnauthorizedToLogin = () => redirectUnauthorizedTo(['signin']);
const redirectLoggedInToTravels = () => redirectLoggedInTo(['my-travels']);
Ardından bunları rotalarınıza eklemeniz yeterlidir:
const routes: Routes = [
{path: '', component: LoginPageComponent, canActivate: [AuthGuard], data: {authGuardPipe: redirectLoggedInToTravels}},
{path: 'signin', component: LoginPageComponent, canActivate: [AuthGuard], data: {authGuardPipe: redirectLoggedInToTravels}},
{path: 'my-travels', component: MyTravelsComponent, canActivate: [AuthGuard], data: {authGuardPipe: redirectUnauthorizedToLogin}},
{path: 'edit/:travelId', component: EditTravelsComponent, canActivate: [AuthGuard], data: {authGuardPipe: redirectUnauthorizedToLogin}},
];
12. İsteğe bağlı: Güvenlik kuralları
Hem Firestore hem de Cloud Storage, güvenliği zorunlu kılmak ve verileri doğrulamak için güvenlik kurallarını (sırasıyla firestore.rules ve security.rules) kullanır.
Şu anda Firestore ve Storage verilerine okuma ve yazma için açık erişim var ancak kullanıcıların diğer kişilerin yayınlarını değiştirmesini istemiyorsunuz. Koleksiyonlarınıza ve dokümanlarınıza erişimi kısıtlamak için güvenlik kurallarını kullanabilirsiniz.
Firestore kuralları
Yalnızca kimliği doğrulanmış kullanıcıların seyahat gönderilerini görüntülemesine izin vermek için firestore.rules dosyasına gidin ve şunları ekleyin:
rules_version = '2';
service cloud.firestore {
match /databases/{database}/travels {
allow read: if request.auth.uid != null;
allow write:
if request.auth.uid == request.resource.data.userId;
}
}
Güvenlik kuralları, verileri doğrulamak için de kullanılabilir:
rules_version = '2';
service cloud.firestore {
match /databases/{database}/posts {
allow read: if request.auth.uid != null;
allow write:
if request.auth.uid == request.resource.data.userId;
&& "author" in request.resource.data
&& "text" in request.resource.data
&& "timestamp" in request.resource.data;
}
}
Depolama kuralları
Benzer şekilde, storage.rules'daki depolama veritabanlarına erişimi zorunlu kılmak için güvenlik kurallarını kullanabiliriz. Daha karmaşık kontroller için işlevleri de kullanabileceğimizi unutmayın:
rules_version = '2';
function isImageBelowMaxSize(maxSizeMB) {
return request.resource.size < maxSizeMB * 1024 * 1024
&& request.resource.contentType.matches('image/.*');
}
service firebase.storage {
match /b/{bucket}/o {
match /{userId}/{postId}/{filename} {
allow write: if request.auth != null
&& request.auth.uid == userId && isImageBelowMaxSize(5);
allow read;
}
}
}