1. Genel Bakış
Hedefler
Bu codelab'de Cloud Firestore tarafından desteklenen bir restoran önerisi web uygulaması oluşturacaksınız.
Ne öğreneceksin
- Bir web uygulamasından verileri Cloud Firestore'a okuyun ve yazın
- Cloud Firestore verilerindeki değişiklikleri gerçek zamanlı olarak dinleyin
- Cloud Firestore verilerinin güvenliğini sağlamak için Firebase Kimlik Doğrulaması ve güvenlik kurallarını kullanın
- Karmaşık Cloud Firestore sorguları yazın
İhtiyacınız olan şey
Bu codelab'e başlamadan önce aşağıdakileri yüklediğinizden emin olun:
2. Firebase projesi oluşturun ve kurun
Firebase projesi oluşturma
- Firebase konsolunda Proje ekle'yi tıklayın ve ardından Firebase projesine FriendlyEats adını verin.
Firebase projenizin Proje Kimliğini unutmayın.
- Proje oluştur'u tıklayın.
Oluşturacağımız uygulama, web'de bulunan birkaç Firebase hizmetini kullanıyor:
- Kullanıcılarınızı kolayca tanımlamak için Firebase Kimlik Doğrulaması
- Yapılandırılmış verileri Bulut'a kaydetmek ve veriler güncellendiğinde anında bildirim almak için Cloud Firestore
- Statik varlıklarınızı barındırmak ve sunmak için Firebase Hosting
Bu özel codelab için Firebase Hosting'i zaten yapılandırdık. Ancak Firebase Auth ve Cloud Firestore için, Firebase konsolunu kullanarak hizmetlerin yapılandırılması ve etkinleştirilmesi konusunda size yol göstereceğiz.
Anonim Kimlik Doğrulamayı Etkinleştir
Kimlik doğrulama bu codelab'in odak noktası olmasa da uygulamamızda bir tür kimlik doğrulamanın bulunması önemlidir. Anonim oturum açmayı kullanacağız; bu, kullanıcının sorulmadan sessizce oturum açacağı anlamına gelir.
Anonim girişi etkinleştirmeniz gerekecek.
- Firebase konsolunda sol gezinme bölmesindeki 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 ).
- Anonim Oturum Açma Sağlayıcısını etkinleştirin ve ardından Kaydet'i tıklayın.
Bu, uygulamanın kullanıcılarınız web uygulamasına eriştiklerinde sessizce oturum açmasına olanak tanır. Daha fazla bilgi edinmek için Anonim Kimlik Doğrulama belgelerini okumaktan çekinmeyin.
Cloud Firestore'u etkinleştirin
Uygulama, restoran bilgilerini ve derecelendirmelerini kaydetmek ve almak için Cloud Firestore'u kullanıyor.
Cloud Firestore'u etkinleştirmeniz gerekecek. 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'daki verilere erişim Güvenlik Kuralları tarafından kontrol edilir. Bu codelab'in ilerleyen kısımlarında kurallar hakkında daha fazla konuşacağız ancak başlamak için öncelikle verilerimize bazı temel kurallar koymamız gerekiyor. Firebase konsolunun Kurallar sekmesinde aşağıdaki kuralları ekleyin ve ardından Yayınla'yı tıklayın.
service cloud.firestore { match /databases/{database}/documents { match /{document=**} { // // WARNING: These rules are insecure! We will replace them with // more secure rules later in the codelab // allow read, write: if request.auth != null; } } }
Yukarıdaki kurallar, oturum açmış olan kullanıcıların veri erişimini kısıtlayarak, kimliği doğrulanmamış kullanıcıların okuma veya yazma yapmasını engeller. Bu, genel erişime izin vermekten daha iyidir ancak yine de güvenli olmaktan uzaktır; bu kuralları daha sonra codelab'de geliştireceğiz.
3. Örnek kodu alın
GitHub deposunu komut satırından kopyalayın:
git clone https://github.com/firebase/friendlyeats-web
Örnek kodun 📁friendeats friendlyeats-web
dizinine kopyalanmış olması gerekir. Artık tüm komutlarınızı bu dizinden çalıştırdığınızdan emin olun:
cd friendlyeats-web/vanilla-js
Başlangıç uygulamasını içe aktar
IDE'nizi (WebStorm, Atom, Sublime, Visual Studio Code...) kullanarak 📁 friendlyeats-web
dizinini açın veya içe aktarın. Bu dizin, henüz işlevsel olmayan bir restoran öneri uygulamasından oluşan codelab'in başlangıç kodunu içerir. Bu kod laboratuvarı boyunca onu işlevsel hale getireceğiz, dolayısıyla kısa süre içinde bu dizindeki kodu düzenlemeniz gerekecek.
4. Firebase Komut Satırı Arayüzünü Kurun
Firebase Komut Satırı Arayüzü (CLI), web uygulamanızı yerel olarak sunmanıza ve web uygulamanızı Firebase Hosting'e dağıtmanıza olanak tanır.
- Aşağıdaki npm komutunu çalıştırarak CLI'yi yükleyin:
npm -g install firebase-tools
- Aşağıdaki komutu çalıştırarak CLI'nin doğru şekilde kurulduğunu doğrulayın:
firebase --version
Firebase CLI sürümünün v7.4.0 veya üzeri olduğundan emin olun.
- Aşağıdaki komutu çalıştırarak Firebase CLI'yi yetkilendirin:
firebase login
Uygulamanızın Firebase Hosting yapılandırmasını uygulamanızın yerel dizininden ve dosyalarından almak için web uygulaması şablonunu kurduk. Ancak bunu yapabilmek için uygulamanızı Firebase projenizle ilişkilendirmemiz gerekiyor.
- Komut satırınızın uygulamanızın yerel dizinine eriştiğinden emin olun.
- Aşağıdaki komutu çalıştırarak uygulamanızı Firebase projenizle ilişkilendirin:
firebase use --add
- İstendiğinde Proje Kimliğinizi seçin ve Firebase projenize bir takma ad verin.
Birden fazla ortamınız (prodüksiyon, hazırlama vb.) varsa takma ad kullanışlıdır. Ancak bu codelab için sadece default
takma adını kullanalım.
- Komut satırınızdaki kalan talimatları izleyin.
5. Yerel sunucuyu çalıştırın
Aslında uygulamamız üzerinde çalışmaya başlamaya hazırız! Uygulamamızı yerel olarak çalıştıralım!
- Aşağıdaki Firebase CLI komutunu çalıştırın:
firebase emulators:start --only hosting
- Komut satırınız aşağıdaki yanıtı görüntülemelidir:
hosting: Local server: http://localhost:5000
Uygulamamızı yerel olarak sunmak için Firebase Hosting emülatörünü kullanıyoruz. Web uygulamasına artık http://localhost:5000 adresinden ulaşılabilir.
- Uygulamanızı http://localhost:5000 adresinde açın.
Firebase projenize bağlı FriendlyEats kopyanızı görmelisiniz.
Uygulama Firebase projenize otomatik olarak bağlandı ve anonim kullanıcı olarak sessizce oturumunuzu açtı.
6. Cloud Firestore'a veri yazın
Bu bölümde, uygulamanın kullanıcı arayüzünü doldurabilmek için Cloud Firestore'a bazı veriler yazacağız. Bu, Firebase konsolu aracılığıyla manuel olarak yapılabilir, ancak temel bir Cloud Firestore yazımını göstermek için bunu uygulamanın kendisinde yapacağız.
Veri örneği
Firestore verileri koleksiyonlara, belgelere, alanlara ve alt koleksiyonlara bölünmüştür. Her restoranı, restaurants
adı verilen üst düzey bir koleksiyonda bir belge olarak saklayacağız.
Daha sonra her yorumu, her restoranın altında ratings
adı verilen bir alt koleksiyonda saklayacağız.
Firestore'a restoran ekleme
Uygulamamızdaki ana model nesnesi bir restorandır. restaurants
koleksiyonuna restoran belgesi ekleyen bir kod yazalım.
- İndirdiğiniz dosyalar arasında
scripts/FriendlyEats.Data.js
açın. -
FriendlyEats.prototype.addRestaurant
fonksiyonunu bulun. - Fonksiyonun tamamını aşağıdaki kodla değiştirin.
FriendlyEats.Data.js
FriendlyEats.prototype.addRestaurant = function(data) { var collection = firebase.firestore().collection('restaurants'); return collection.add(data); };
Yukarıdaki kod, restaurants
koleksiyonuna yeni bir belge ekler. Belge verileri düz bir JavaScript nesnesinden gelir. Bunu önce Cloud Firestore koleksiyon restaurants
referans alarak, ardından verileri add
yapıyoruz.
Restoran ekleyelim!
- Tarayıcınızda FriendlyEats uygulamanıza geri dönün ve uygulamayı yenileyin.
- Sahte Veri Ekle'yi tıklayın.
Uygulama otomatik olarak rastgele bir dizi restoran nesnesi oluşturacak ve ardından addRestaurant
işlevinizi çağıracaktır. Ancak verileri henüz gerçek web uygulamanızda göremeyeceksiniz çünkü hâlâ verileri almayı uygulamamız gerekiyor (codelab'in bir sonraki bölümü).
Firebase konsolunda Cloud Firestore sekmesine giderseniz artık restaurants
koleksiyonunda yeni belgeler görmelisiniz!
Tebrikler, az önce bir web uygulamasından Cloud Firestore'a veri yazdınız!
Bir sonraki bölümde Cloud Firestore'dan verileri nasıl alacağınızı ve uygulamanızda nasıl görüntüleyeceğinizi öğreneceksiniz.
7. Cloud Firestore'dan verileri görüntüleyin
Bu bölümde Cloud Firestore'dan verileri nasıl alacağınızı ve uygulamanızda nasıl görüntüleyeceğinizi öğreneceksiniz. İki önemli adım, bir sorgu oluşturmak ve bir anlık görüntü dinleyicisi eklemektir. Bu dinleyici, sorguyla eşleşen tüm mevcut verilerden haberdar edilecek ve güncellemeleri gerçek zamanlı olarak alacaktır.
Öncelikle varsayılan, filtrelenmemiş restoran listesini sunacak sorguyu oluşturalım.
-
scripts/FriendlyEats.Data.js
dosyasına geri dönün. -
FriendlyEats.prototype.getAllRestaurants
fonksiyonunu bulun. - Fonksiyonun tamamını aşağıdaki kodla değiştirin.
FriendlyEats.Data.js
FriendlyEats.prototype.getAllRestaurants = function(renderer) { var query = firebase.firestore() .collection('restaurants') .orderBy('avgRating', 'desc') .limit(50); this.getDocumentsInQuery(query, renderer); };
Yukarıdaki kodda, restaurants
adlı üst düzey koleksiyondan ortalama derecelendirmeye göre sıralanan (şu anda tümü sıfır) 50'ye kadar restoranı alacak bir sorgu oluşturuyoruz. Bu sorguyu bildirdikten sonra verinin yüklenmesinden ve görüntülenmesinden sorumlu olan getDocumentsInQuery()
metoduna aktarıyoruz.
Bunu bir anlık görüntü dinleyicisi ekleyerek yapacağız.
-
scripts/FriendlyEats.Data.js
dosyasına geri dönün. -
FriendlyEats.prototype.getDocumentsInQuery
işlevini bulun. - Fonksiyonun tamamını aşağıdaki kodla değiştirin.
FriendlyEats.Data.js
FriendlyEats.prototype.getDocumentsInQuery = function(query, renderer) { query.onSnapshot(function(snapshot) { if (!snapshot.size) return renderer.empty(); // Display "There are no restaurants". snapshot.docChanges().forEach(function(change) { if (change.type === 'removed') { renderer.remove(change.doc); } else { renderer.display(change.doc); } }); }); };
Yukarıdaki kodda, query.onSnapshot
, sorgu sonucunda her değişiklik olduğunda geri çağrısını tetikleyecektir.
- İlk seferde geri arama, sorgunun sonuç kümesinin tamamıyla tetiklenir; bu, Cloud Firestore'daki
restaurants
koleksiyonunun tamamı anlamına gelir. Daha sonra tüm bireysel belgelerirenderer.display
işlevine aktarır. - Bir belge silindiğinde,
change.type
değeri,removed
eşittir. Bu durumda, restoranı kullanıcı arayüzünden kaldıran bir işlevi çağıracağız.
Artık her iki yöntemi de uyguladığımıza göre uygulamayı yenileyin ve daha önce Firebase konsolunda gördüğümüz restoranların artık uygulamada görünür olduğunu doğrulayın. Bu bölümü başarıyla tamamladıysanız uygulamanız artık Cloud Firestore ile veri okuyor ve yazıyor demektir!
Restoran listeniz değiştikçe bu dinleyici otomatik olarak güncellenmeye devam edecektir. Firebase konsoluna gidip bir restoranı manuel olarak silmeyi veya adını değiştirmeyi deneyin; değişikliklerin sitenizde hemen göründüğünü göreceksiniz!
8. Get() verileri
Şimdiye kadar, güncellemeleri gerçek zamanlı olarak almak için onSnapshot
nasıl kullanılacağını gösterdik; ancak her zaman istediğimiz bu değildir. Bazen verileri yalnızca bir kez getirmek daha mantıklı olur.
Bir kullanıcı uygulamanızdaki belirli bir restorana tıkladığında tetiklenen bir yöntemi uygulamak isteyeceğiz.
-
scripts/FriendlyEats.Data.js
geri dönün. -
FriendlyEats.prototype.getRestaurant
fonksiyonunu bulun. - Fonksiyonun tamamını aşağıdaki kodla değiştirin.
FriendlyEats.Data.js
FriendlyEats.prototype.getRestaurant = function(id) { return firebase.firestore().collection('restaurants').doc(id).get(); };
Bu yöntemi uyguladıktan sonra her restorana ait sayfaları görüntüleyebileceksiniz. Listedeki bir restorana tıkladığınızda restoranın ayrıntılar sayfasını görmelisiniz:
Daha sonra codelab'de derecelendirme eklemeyi uygulamamız gerektiğinden şimdilik derecelendirme ekleyemezsiniz.
9. Verileri sıralayın ve filtreleyin
Şu anda uygulamamız restoranların bir listesini gösteriyor ancak kullanıcının ihtiyaçlarına göre filtreleme yapması mümkün değil. Bu bölümde filtrelemeyi etkinleştirmek için Cloud Firestore'un gelişmiş sorgulamasını kullanacaksınız.
Tüm Dim Sum
restoranlarını getirmek için basit bir sorgu örneğini burada bulabilirsiniz:
var filteredQuery = query.where('category', '==', 'Dim Sum')
Adından da anlaşılacağı gibi, where()
yöntemi sorgumuzun yalnızca alanları belirlediğimiz kısıtlamalara uyan koleksiyonun üyelerini indirmesini sağlayacaktır. Bu durumda, yalnızca category
Dim Sum
olduğu restoranlar indirilecektir.
Uygulamamızda kullanıcı, "San Francisco'da Pizza" veya "Los Angeles'ta Popülerliğe Göre Sipariş Edilen Deniz Ürünleri" gibi belirli sorgular oluşturmak için birden fazla filtreyi zincirleyebilir.
Kullanıcılarımızın seçtiği birden fazla kritere göre restoranlarımızı filtreleyecek bir sorgu oluşturan bir yöntem oluşturacağız.
-
scripts/FriendlyEats.Data.js
geri dönün. -
FriendlyEats.prototype.getFilteredRestaurants
fonksiyonunu bulun. - Fonksiyonun tamamını aşağıdaki kodla değiştirin.
FriendlyEats.Data.js
FriendlyEats.prototype.getFilteredRestaurants = function(filters, renderer) { var query = firebase.firestore().collection('restaurants'); if (filters.category !== 'Any') { query = query.where('category', '==', filters.category); } if (filters.city !== 'Any') { query = query.where('city', '==', filters.city); } if (filters.price !== 'Any') { query = query.where('price', '==', filters.price.length); } if (filters.sort === 'Rating') { query = query.orderBy('avgRating', 'desc'); } else if (filters.sort === 'Reviews') { query = query.orderBy('numRatings', 'desc'); } this.getDocumentsInQuery(query, renderer); };
Yukarıdaki kod, kullanıcı girişine dayalı bir bileşik sorgu oluşturmak için birden fazla where
filtresi ve tek bir orderBy
cümlesi ekler. Sorgumuz artık yalnızca kullanıcının gereksinimlerine uygun restoranları döndürecektir.
Tarayıcınızda FriendlyEats uygulamanızı yenileyin ve ardından fiyata, şehre ve kategoriye göre filtreleme yapabildiğinizi doğrulayın. Test sırasında tarayıcınızın JavaScript Konsolunda şuna benzeyen hatalar göreceksiniz:
The query requires an index. You can create it here: https://console.firebase.google.com/project/project-id/database/firestore/indexes?create_composite=...
Bu hataların nedeni Cloud Firestore'un çoğu bileşik sorgu için dizin gerektirmesidir. Sorgularda dizinlerin zorunlu tutulması, Cloud Firestore'un geniş ölçekte hızlı olmasını sağlar.
Hata mesajındaki bağlantıyı açtığınızda, Firebase konsolunda dizin oluşturma kullanıcı arayüzü otomatik olarak doğru parametrelerin girildiği şekilde açılacaktır. Bir sonraki bölümde, bu uygulama için gereken dizinleri yazıp dağıtacağız.
10. Dizinleri dağıtın
Uygulamamızdaki her yolu keşfetmek ve dizin oluşturma bağlantılarının her birini takip etmek istemiyorsak, Firebase CLI'yi kullanarak birçok dizini aynı anda kolayca dağıtabiliriz.
- Uygulamanızın indirilen yerel dizininde bir
firestore.indexes.json
dosyası bulacaksınız.
Bu dosya, olası tüm filtre kombinasyonları için gereken tüm dizinleri açıklar.
firestore.indexes.json
{ "indexes": [ { "collectionGroup": "restaurants", "queryScope": "COLLECTION", "fields": [ { "fieldPath": "city", "order": "ASCENDING" }, { "fieldPath": "avgRating", "order": "DESCENDING" } ] }, ... ] }
- Bu dizinleri aşağıdaki komutla dağıtın:
firebase deploy --only firestore:indexes
Birkaç dakika sonra indeksleriniz yayına girecek ve hata mesajları kaybolacaktır.
11. Bir işleme veri yazın
Bu bölümde kullanıcıların restoranlara yorum gönderme özelliğini ekleyeceğiz. Şu ana kadar tüm yazılarımız atomik ve nispeten basitti. Bunlardan herhangi biri hata yaparsa, muhtemelen kullanıcıdan bunları yeniden denemesini isterdik veya uygulamamız yazmayı otomatik olarak yeniden denerdi.
Uygulamamızın bir restoran için derecelendirme eklemek isteyen birçok kullanıcısı olacak, bu nedenle birden fazla okuma ve yazmayı koordine etmemiz gerekecek. Öncelikle yorumun kendisi gönderilmeli, ardından restoranın puan count
ve average rating
güncellenmelidir. Bunlardan biri başarısız olursa diğeri başarısız olursa, veritabanımızın bir bölümündeki verilerin diğerindeki verilerle eşleşmediği tutarsız bir durumda kalırız.
Neyse ki Cloud Firestore, tek bir atomik işlemde birden fazla okuma ve yazma gerçekleştirmemize olanak tanıyan işlem işlevselliği sağlayarak verilerimizin tutarlı kalmasını sağlar.
-
scripts/FriendlyEats.Data.js
geri dönün. -
FriendlyEats.prototype.addRating
fonksiyonunu bulun. - Fonksiyonun tamamını aşağıdaki kodla değiştirin.
FriendlyEats.Data.js
FriendlyEats.prototype.addRating = function(restaurantID, rating) { var collection = firebase.firestore().collection('restaurants'); var document = collection.doc(restaurantID); var newRatingDocument = document.collection('ratings').doc(); return firebase.firestore().runTransaction(function(transaction) { return transaction.get(document).then(function(doc) { var data = doc.data(); var newAverage = (data.numRatings * data.avgRating + rating.rating) / (data.numRatings + 1); transaction.update(document, { numRatings: data.numRatings + 1, avgRating: newAverage }); return transaction.set(newRatingDocument, rating); }); }); };
Yukarıdaki blokta, restoran belgesindeki avgRating
ve numRatings
sayısal değerlerini güncellemek için bir işlemi tetikliyoruz. Aynı zamanda yeni rating
ratings
alt koleksiyonuna ekliyoruz.
12. Verilerinizi güvence altına alın
Bu codelab'in başlangıcında, uygulamamızın güvenlik kurallarını, veritabanını her türlü okuma veya yazmaya tamamen açacak şekilde ayarladık. Gerçek bir uygulamada, istenmeyen veri erişimini veya değiştirilmesini önlemek için çok daha ayrıntılı kurallar belirlemek isteriz.
- Firebase konsolunun Derleme bölümünde Firestore Veritabanı'na tıklayın.
- Cloud Firestore bölümünde Kurallar sekmesine tıklayın (veya doğrudan oraya gitmek için burayı tıklayın ).
- Varsayılanları aşağıdaki kurallarla değiştirin ve ardından Yayınla'yı tıklayın.
firestore.rules
rules_version = '2'; service cloud.firestore { // Determine if the value of the field "key" is the same // before and after the request. function unchanged(key) { return (key in resource.data) && (key in request.resource.data) && (resource.data[key] == request.resource.data[key]); } match /databases/{database}/documents { // Restaurants: // - Authenticated user can read // - Authenticated user can create/update (for demo purposes only) // - Updates are allowed if no fields are added and name is unchanged // - Deletes are not allowed (default) match /restaurants/{restaurantId} { allow read: if request.auth != null; allow create: if request.auth != null; allow update: if request.auth != null && (request.resource.data.keys() == resource.data.keys()) && unchanged("name"); // Ratings: // - Authenticated user can read // - Authenticated user can create if userId matches // - Deletes and updates are not allowed (default) match /ratings/{ratingId} { allow read: if request.auth != null; allow create: if request.auth != null && request.resource.data.userId == request.auth.uid; } } } }
Bu kurallar, istemcilerin yalnızca güvenli değişiklikler yapmasını sağlamak için erişimi kısıtlar. Örneğin:
- Bir restoran belgesinde yapılan güncellemeler yalnızca derecelendirmeleri değiştirebilir, adı veya diğer değişmez verileri değiştiremez.
- Derecelendirmeler yalnızca kullanıcı kimliğinin oturum açmış kullanıcıyla eşleşmesi durumunda oluşturulabilir; bu da sahteciliği önler.
Firebase konsolunu kullanmaya alternatif olarak Firebase projenize kuralları dağıtmak için Firebase CLI'yi kullanabilirsiniz. Çalışma dizininizdeki firestore.rules dosyası zaten yukarıdaki kuralları içeriyor. Bu kuralları yerel dosya sisteminizden dağıtmak için (Firebase konsolunu kullanmak yerine) aşağıdaki komutu çalıştırırsınız:
firebase deploy --only firestore:rules
13. Sonuç
Bu codelab'de Cloud Firestore ile temel ve gelişmiş okuma ve yazma işlemlerinin nasıl gerçekleştirileceğini ve güvenlik kurallarıyla veri erişiminin nasıl güvence altına alınacağını öğrendiniz. Tam çözümü quickstarts-js deposunda bulabilirsiniz.
Cloud Firestore hakkında daha fazla bilgi edinmek için aşağıdaki kaynakları ziyaret edin:
14. [İsteğe Bağlı] Uygulama Kontrolüyle Zorunlu Hale Getirin
Firebase Uygulama Kontrolü, uygulamanıza gelen istenmeyen trafiğin doğrulanmasına ve önlenmesine yardımcı olarak koruma sağlar. Bu adımda reCAPTCHA Enterprise ile Uygulama Kontrolü ekleyerek hizmetlerinize erişimi güvence altına alacaksınız.
Öncelikle Uygulama Kontrolü ve reCaptcha'yı etkinleştirmeniz gerekir.
reCaptcha Enterprise'ı etkinleştirme
- Bulut konsolunda Güvenlik altında reCaptcha Enterprise'ı bulun ve seçin.
- Hizmeti istendiği gibi etkinleştirin ve Anahtar Oluştur'u tıklayın.
- İstendiğinde bir görünen ad girin ve platform türünüz olarak Web sitesi'ni seçin.
- Dağıtılan URL'lerinizi Etki Alanı listesine ekleyin ve "Onay kutusu sorgulamasını kullan" seçeneğinin işaretli olmadığından emin olun.
- Anahtar Oluştur'a tıklayın ve oluşturulan anahtarı güvenli bir yerde saklayın. Bu adımda daha sonra ihtiyacınız olacak.
Uygulama Kontrolünü Etkinleştirme
- Firebase konsolunda sol paneldeki Derleme bölümünü bulun.
- Uygulama Kontrolü'nü ve ardından Başlayın düğmesini tıklayın (veya doğrudan konsola yönlendirin).
- Kaydol'a tıklayın ve istendiğinde reCaptcha Enterprise anahtarınızı girin, ardından Kaydet'e tıklayın.
- API Görünümünde Depolama'yı seçin ve Zorunlu kıl'a tıklayın. Cloud Firestore için de aynısını yapın.
Uygulama Kontrolü artık zorunlu kılınmalıdır! Uygulamanızı yenileyin ve bir restoran oluşturmayı/görüntülemeyi deneyin. Hata mesajını almalısınız:
Uncaught Error in snapshot listener: FirebaseError: [code=permission-denied]: Missing or insufficient permissions.
Bu, Uygulama Kontrolü'nün doğrulanmamış istekleri varsayılan olarak engellediği anlamına gelir. Şimdi uygulamanıza doğrulama ekleyelim.
FriendlyEats.View.js dosyasına gidin, initAppCheck
işlevini güncelleyin ve Uygulama Kontrolü'nü başlatmak için reCaptcha anahtarınızı ekleyin.
FriendlyEats.prototype.initAppCheck = function() {
var appCheck = firebase.appCheck();
appCheck.activate(
new firebase.appCheck.ReCaptchaEnterpriseProvider(
/* reCAPTCHA Enterprise site key */
),
true // Set to true to allow auto-refresh.
);
};
appCheck
örneği, anahtarınızla birlikte bir ReCaptchaEnterpriseProvider
ile başlatılır ve isTokenAutoRefreshEnabled
, uygulamanızda belirteçlerin otomatik olarak yenilenmesine olanak tanır.
Yerel testi etkinleştirmek için FriendlyEats.js dosyasında uygulamanın başlatıldığı bölümü bulun ve FriendlyEats.prototype.initAppCheck
işlevine aşağıdaki satırı ekleyin:
if(isLocalhost) {
self.FIREBASE_APPCHECK_DEBUG_TOKEN = true;
}
Bu, yerel web uygulamanızın konsoluna aşağıdakine benzer bir hata ayıklama jetonu kaydedecektir:
App Check debug token: 8DBDF614-649D-4D22-B0A3-6D489412838B. You will need to add it to your app's App Check settings in the Firebase console for it to work.
Şimdi Firebase konsolunda Uygulama Kontrolü'nün Uygulama Görünümü'ne gidin.
Taşma menüsünü tıklayın ve Hata ayıklama jetonlarını yönet ' i seçin.
Ardından, Hata ayıklama belirtecini ekle'ye tıklayın ve istendiği gibi hata ayıklama belirtecini konsolunuzdan yapıştırın.
Tebrikler! Uygulama Kontrolü artık uygulamanızda çalışıyor olmalıdır.