1. Ne yaratacaksınız?
Bu codelab'de, Angular kitaplığımızdan en son çıkanları içeren, gerçek zamanlı ortak çalışmaya dayalı bir harita içeren gezici bir blog oluşturacaksınız: AngularFire . Son web uygulaması, seyahat ettiğiniz her konuma resim yükleyebileceğiniz bir seyahat blogundan oluşacaktır.
Web uygulamasını oluşturmak için AngularFire, yerel testler için Emulator Suite, kullanıcı verilerini takip etmek için Kimlik Doğrulama, veri ve medyayı kalıcı hale getirmek için Firestore ve Storage, Cloud Functions tarafından desteklenecek ve son olarak uygulamanın dağıtımı için Firebase Hosting kullanılacak.
Ne öğreneceksin
- Emulator Suite ile Firebase ürünleriyle yerel olarak nasıl geliştirme yapılır?
- AngularFire ile web uygulamanızı nasıl geliştirebilirsiniz?
- Verilerinizi Firestore'da nasıl kalıcı hale getirebilirsiniz?
- Medya Depolama Alanında nasıl kalıcı hale getirilir?
- Uygulamanızı Firebase Hosting'e nasıl dağıtırsınız?
- Veritabanlarınız ve API'lerinizle etkileşim kurmak için Bulut İşlevleri nasıl kullanılır?
İhtiyacınız olan şey
- Node.js sürüm 10 veya üzeri
- Firebase Projenizin oluşturulması ve yönetimi için bir Google Hesabı
- Firebase CLI sürüm 11.14.2 veya üzeri
- Chrome gibi seçtiğiniz bir tarayıcı
- Angular ve Javascript'in temel anlayışı
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 deposu birden fazla platform için örnek projeler içerir.
Bu codelab yalnızca web çerçevesi deposunu kullanır:
- 📁 web çerçevesi : Bu codelab sırasında üzerine inşa edeceğiniz başlangıç kodu.
Bağımlılıkları yükle
Klonlamanın ardından web uygulamasını oluşturmadan önce bağımlılıkları kök ve functions
klasörüne yükleyin.
cd webframework && npm install
cd functions && npm install
Firebase CLI'yi yükleyin
Bu komutu kullanarak Firebase CLI'yi bir terminale yükleyin:
npm install -g firebase-tools
Aşağıdakileri kullanarak Firebase CLI sürümünüzün 11.14.2'den büyük olup olmadığını bir kez daha kontrol edin:
firebase --version
Sürümünüz 11.14.2'den düşükse lütfen aşağıdakileri kullanarak güncelleyin:
npm update firebase-tools
3. Firebase projesi oluşturun ve kurun
Firebase projesi oluşturma
- Firebase'de oturum açın.
- Firebase konsolunda Proje Ekle'ye tıklayın ve ardından Firebase projenize <projeniz> adını verin. Firebase projenizin proje kimliğini unutmayın.
- Proje Oluştur'a tıklayın.
Önemli : Firebase projeniz <your-project> olarak adlandırılacaktır, ancak Firebase ona otomatik olarak <your-project>-1234 biçiminde benzersiz bir Proje Kimliği atayacaktır. Bu benzersiz tanımlayıcı, projenizin gerçekte nasıl tanımlandığını gösterir (CLI dahil), oysa <projeniz> yalnızca bir görünen addır.
Oluşturacağımız uygulama, web uygulamaları için kullanılabilen Firebase ürünlerini kullanıyor:
- Kullanıcılarınızın uygulamanızda kolayca oturum açmasına olanak tanıyan Firebase Kimlik Doğrulaması .
- Yapılandırılmış verileri buluta kaydetmek ve veriler değiştiğinde anında bildirim almak için Cloud Firestore .
- Dosyaları buluta kaydetmek için Firebase için Cloud Storage .
- Varlıklarınızı barındırmak ve sunmak için Firebase Hosting .
- Dahili ve harici API'lerle etkileşim kurma işlevleri .
Bu ürünlerden bazıları özel yapılandırmalara veya Firebase konsolu kullanılarak etkinleştirilmeye ihtiyaç duyar.
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öreceksiniz. Bu nesnenin içeriğini
environments/environment.ts
dosyasına kopyalayın.
Firebase Kimlik Doğrulaması için Google ile oturum açmayı etkinleştirin
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çmayı etkinleştirmek için:
- Firebase konsolunda sol paneldeki Derleme bölümünü bulun.
- Kimlik Doğrulama 'yı ve ardından Oturum açma yöntemi sekmesini tıklayın (veya doğrudan oraya gitmek için burayı tıklayın ).
- Google oturum açma sağlayıcısını etkinleştirin ve ardından Kaydet'i tıklayın.
- Uygulamanızın herkese açık adını <projenizin-adı> olarak ayarlayın ve açılır menüden bir Proje destek e-postası seçin.
Cloud Firestore'u etkinleştirin
- Firebase konsolunun Derleme bölümünde Firestore Veritabanı'na tıklayın.
- Cloud Firestore bölmesinde Veritabanı oluştur'a tıklayın.
- Cloud Firestore verilerinizin depolandığı konumu ayarlayın. Bunu varsayılan olarak bırakabilir veya size yakın bir bölgeyi seçebilirsiniz.
Bulut Depolamayı Etkinleştir
Web uygulaması, resimleri depolamak, yüklemek ve paylaşmak için Firebase için Cloud Storage'ı kullanır.
- Firebase konsolunun Derleme bölümünde Depolama'yı tıklayın.
- Başlayın düğmesi yoksa bu, Bulut depolamanın zaten mevcut olduğu anlamına gelir
etkindir ve aşağıdaki adımları uygulamanıza gerek yoktur.
- Başlayın'ı tıklayın.
- Firebase projenizin güvenlik kurallarına ilişkin sorumluluk reddi beyanını okuyun ve ardından İleri'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'ye tıklayın.
Varsayılan güvenlik kurallarıyla, kimliği doğrulanmış herhangi bir kullanıcı Cloud Storage'a her şeyi yazabilir. Bu codelab'in ilerleyen bölümlerinde depolama alanımızı daha güvenli hale getireceğiz.
4. Firebase projenize bağlanın
Firebase komut satırı arayüzü (CLI), web uygulamanızı yerel olarak sunmak ve web uygulamanızı Firebase projenize dağıtmak için Firebase Hosting'i kullanmanızı sağlar.
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ından Firebase CLI'de oturum açın:
firebase login
Daha sonra bir proje takma adı oluşturmak için aşağıdaki komutu çalıştırın. $YOUR_PROJECT_ID
Firebase projenizin kimliğiyle değiştirin.
firebase use $YOUR_PROJECT_ID
AngularFire'ı ekleyin
AngularFire'ı uygulamaya eklemek için şu komutu çalıştırın:
ng add @angular/fire
Ardından komut satırı talimatlarını izleyin ve Firebase projenizde bulunan özellikleri seçin.
Firebase'i başlat
Firebase projesini başlatmak için şunu çalıştırın:
firebase init
Ardından komut satırı istemlerini takip ederek Firebase projenizde kullanılan özellikleri ve emülatörleri seçin.
Emülatörleri başlat
Emülatörleri başlatmak için webframework
dizininden aşağıdaki komutu çalıştırın:
firebase emulators:start
Sonunda şöyle bir şey görmelisiniz:
$ 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ı, emülatörler kullanıma hazır.
Seyahat uygulamanızın (henüz!) çalışmayan kullanıcı arayüzünü görmelisiniz:
Şimdi inşaata başlayalım!
5. Web uygulamasını emülatörlere bağlayın
Emülatör günlüklerindeki tabloya göre, Cloud Firestore emülatörü 8080 numaralı bağlantı noktasını dinliyor ve Kimlik Doğrulama emülatörü 9099 numaralı bağlantı noktasını dinliyor.
EmulatorUI'yi açın
Web tarayıcınızda http://127.0.0.1:4000/ adresine gidin. Emulator Suite kullanıcı arayüzünü görmelisiniz.
Uygulamayı öykünücüleri kullanacak şekilde yönlendirin
src/app/app.module.ts
dosyasında, aşağıdaki kodu AppModule
içe aktarma listesine 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 öykünücüleri kullanacak şekilde yapılandırılmış olup, test ve geliştirmenin yerel olarak yapılmasına olanak tanır.
6. Kimlik Doğrulama Ekleme
Artık uygulama için emülatörler ayarlandığına göre, her kullanıcının mesaj göndermeden önce oturum açtığından emin olmak 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 takip edebiliriz. Sayfanın yüklendiğinde kullanıcı kimlik doğrulama durumunu kontrol etmesi için oturum açma sayfası işlevlerini değiştirin.
AngularFire Auth'u enjekte etme
src/app/pages/login-page/login-page.component.ts
konumunda, Auth
@angular/fire/auth
öğesinden içe aktarın ve bunu LoginPageComponent
öğesine enjekte edin. 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);
})
}
}
Artık giriş sayfası işlevsel! Oturum açmayı 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 blog gönderilerini yayınlamak ve güncellemek için işlevsellik ekleyeceksiniz.
Kimlik Doğrulamaya benzer şekilde, Firestore işlevleri AngularFire'dan önceden paketlenmiş olarak gelir. Her belge bir koleksiyona aittir ve her belge aynı zamanda iç içe geçmiş koleksiyonlara da sahip olabilir. Bir seyahat blog yazısı oluşturmak ve güncellemek için Firestore'daki belgenin path
bilmek gerekir.
TravelService'in Uygulanması
Birçok farklı sayfanın web uygulamasında Firestore belgelerini okuması ve güncellemesi gerekeceğinden, aynı AngularFire işlevlerini her sayfaya tekrar tekrar enjekte etmekten kaçınmak için işlevleri src/app/services/travel.service.ts
dosyasında uygulayabiliriz.
Önceki adıma benzer şekilde Auth
yanı sıra Firestore
da hizmetimize enjekte ederek başlayın. Geçerli kimlik doğrulama durumunu dinleyen gözlemlenebilir bir user$
nesnesinin tanımlanması 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 yazısı ekleme
Seyahat gönderileri, Firestore'da depolanan belgeler olarak mevcut olacak ve koleksiyonların içinde belgelerin bulunması gerektiğinden, tüm seyahat gönderilerini içeren koleksiyon, travels
olarak adlandırılacaktır. Bu nedenle, herhangi bir seyahat noktasının yolu travels/
AngularFire'ın addDoc
işlevini kullanarak bir koleksiyona bir 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 kullanıcı kimliği göz önüne alındığında, Firestore'da saklanan belgenin yolu çıkarılabilir ve bu 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 gözlemlenebilir olarak okumak
Yol boyunca seyahat noktaları ve duraklar oluşturulduktan sonra değiştirilebildiğinden, belge nesnelerini gözlemlenebilir olarak almak ve yapılan değişikliklere abone olmak daha yararlı olacaktır. Bu işlevsellik, @angular/fire/firestore
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
Artık seyahat postası işlemleri ayarlandığına göre, bir seyahat postasının alt koleksiyonu altında şu şekilde yer alacak durakları değerlendirmenin zamanı geldi: travels/ /stops/
travels/ /stops/
Bu, bir seyahat gönderisi oluşturmakla hemen hemen aynıdır; bu nedenle, bunu kendi başınıza uygulamaya çalışın veya aşağıdaki uygulamaya göz atın:
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 uygulanmıştır; artık bunları çalışırken görebilirsiniz.
Uygulamada Firestore işlevlerini kullanma
src/app/pages/my-travels/my-travels.component.ts
gidin ve işlevlerini kullanmak için TravelService
enjekte edin.
travelService = inject(TravelService);
travelsData$: Observable<Travel[]>;
stopsList$!: Observable<Stop[]>;
constructor() {
this.travelsData$ = this.travelService.getCollectionData(`travels`) as Observable<Travel[]>
}
Tüm seyahatlerin Gözlemlenebilir dizisini elde etmek için yapıcıda TravelService
çağrılır.
Yalnızca geçerli kullanıcının seyahatlerinin gerekli olduğu durumda query
işlevini kullanın.
Güvenliği sağlamanın diğer yöntemleri arasında güvenlik kurallarının uygulanması veya aşağıdaki isteğe bağlı adımlarda açıklandığı gibi Cloud Functions'ın Firestore ile kullanılması yer alır.
Daha sonra TravelService
uygulanan işlevleri çağırmanız yeterlidir.
async createTravel(userId: String) {
this.travelService.addEmptyTravel(userId);
}
deleteTravel(travelId: String) {
this.travelService.deleteData(`travels/${travelId}`)
}
Artık Seyahatlerim sayfası işlevsel olmalı! Yeni bir seyahat gönderisi oluşturduğunuzda Firestore emülatörünüzde neler olduğuna göz atın.
Ardından, /src/app/pages/edit-travels/edit-travels.component.ts
dosyasındaki 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. Depolamayı Yapılandırma
Artık görüntüleri ve diğer medya türlerini depolamak için Depolama uygulayacaksınız.
Cloud Firestore, JSON nesneleri gibi yapılandırılmış verileri depolamak için en iyi şekilde kullanılır. Cloud Storage, dosyaları veya blobları depolamak için tasarlanmıştır. Bu uygulamada, kullanıcıların seyahat resimlerini paylaşmalarına izin vermek için kullanacaksınız.
Firestore'da olduğu gibi, Storage ile dosyaları depolamak ve güncellemek için her dosya için benzersiz bir tanımlayıcı gerekir.
TraveService
fonksiyonları uygulayalım:
Dosya yükleme
src/app/services/travel.service.ts
adresine gidin ve AngularFire'dan Storage'ı enjekte edin:
export class TravelService {
firestore: Firestore = inject(Firestore);
auth: Auth = inject(Auth);
storage: Storage = inject(Storage);
Ve 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;
}
Firestore'dan belgelere ve Cloud Storage'dan dosyalara erişim arasındaki temel fark, her ikisinin de klasör yapılandırılmış yolları izlemesine rağmen, temel URL ve yol kombinasyonunun getDownloadURL
aracılığıyla elde edilmesi ve bunun daha sonra saklanıp bir dosyada kullanılmasıdır. dosya.
Uygulamadaki işlevi kullanma
src/app/components/edit-stop/edit-stop.component.ts
adresine gidin ve aşağıdakileri kullanarak yükleme işlevini ç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);
}
Görüntü yüklendiğinde, medya dosyasının kendisi depoya yüklenecek ve URL, buna göre Firestore'daki belgede saklanacaktır.
9. Uygulamayı dağıtma
Artık uygulamayı dağıtmaya hazırız!
firebase
yapılandırmalarını src/environments/environment.ts
src/environments/environment.prod.ts
kopyalayın ve çalıştırın:
firebase deploy
Bunun gibi bir şey görmelisiniz:
✔ 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!
Artık başvurunuz tamamlanmalı ve Firebase Hosting'e dağıtılmalıdır! Artık tüm verilere ve analizlere Firebase Konsolunuzdan erişebileceksiniz.
AngularFire, İşlevler, güvenlik kuralları ile ilgili daha fazla özellik için aşağıdaki isteğe bağlı adımların yanı sıra diğer Firebase Codelab'lere göz atmayı unutmayın!
11. İsteğe bağlı: AngularFire kimlik doğrulama korumaları
AngularFire, Firebase Kimlik Doğrulamanın yanı sıra rotalar üzerinde kimlik doğrulamaya dayalı korumalar da sunar, böylece erişimi yetersiz olan kullanıcılar yeniden yönlendirilebilir. Bu, uygulamanın korunan verilere erişen kullanıcılardan korunmasına yardımcı olur.
src/app/app-routing.module.ts
dosyasında içe aktarın
import {AuthGuard, redirectLoggedInTo, redirectUnauthorizedTo} from '@angular/fire/auth-guard'
Daha sonra, kullanıcıların belirli sayfalarda ne zaman ve nereye yönlendirilmeleri gerektiğine ilişkin işlevleri tanımlayabilirsiniz:
const redirectUnauthorizedToLogin = () => redirectUnauthorizedTo(['signin']);
const redirectLoggedInToTravels = () => redirectLoggedInTo(['my-travels']);
Daha sonra bunları rotalarınıza eklemeniz yeterli:
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 sağlamak 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 verileri okuma ve yazma için açık erişime sahiptir, ancak insanların başkalarının gönderilerini değiştirmesini istemezsiniz! Koleksiyonlarınıza ve belgelerinize 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 şunu 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;
}
}
Verileri doğrulamak için güvenlik kuralları da 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
dosyasındaki depolama veritabanlarına erişimi zorlamak için güvenlik kurallarını kullanabiliriz. Daha karmaşık kontroller için de işlevleri 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;
}
}
}