Cloud Firestore Web Codelab'i

1. Genel Bakış

Hedefler

Bu codelab'de Cloud Firestore tarafından desteklenen bir restoran önerisi web uygulaması oluşturacaksınız.

img5.png

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

  1. Firebase konsolunda Proje ekle'yi tıklayın ve ardından Firebase projesine FriendlyEats adını verin.

Firebase projenizin Proje Kimliğini unutmayın.

  1. 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.

  1. Firebase konsolunda sol gezinme bölmesindeki Derleme bölümünü bulun.
  2. 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 ).
  3. Anonim Oturum Açma Sağlayıcısını etkinleştirin ve ardından Kaydet'i tıklayın.

img7.png

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.

  1. Aşağıdaki npm komutunu çalıştırarak CLI'yi yükleyin:
npm -g install firebase-tools
  1. 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.

  1. 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.

  1. Komut satırınızın uygulamanızın yerel dizinine eriştiğinden emin olun.
  2. Aşağıdaki komutu çalıştırarak uygulamanızı Firebase projenizle ilişkilendirin:
firebase use --add
  1. İ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.

  1. 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!

  1. Aşağıdaki Firebase CLI komutunu çalıştırın:
firebase emulators:start --only hosting
  1. 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.

  1. 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ı.

img2.png

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.

img3.png

Daha sonra her yorumu, her restoranın altında ratings adı verilen bir alt koleksiyonda saklayacağız.

img4.png

Firestore'a restoran ekleme

Uygulamamızdaki ana model nesnesi bir restorandır. restaurants koleksiyonuna restoran belgesi ekleyen bir kod yazalım.

  1. İndirdiğiniz dosyalar arasında scripts/FriendlyEats.Data.js açın.
  2. FriendlyEats.prototype.addRestaurant fonksiyonunu bulun.
  3. 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!

  1. Tarayıcınızda FriendlyEats uygulamanıza geri dönün ve uygulamayı yenileyin.
  2. 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!

img6.png

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.

  1. scripts/FriendlyEats.Data.js dosyasına geri dönün.
  2. FriendlyEats.prototype.getAllRestaurants fonksiyonunu bulun.
  3. 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.

  1. scripts/FriendlyEats.Data.js dosyasına geri dönün.
  2. FriendlyEats.prototype.getDocumentsInQuery işlevini bulun.
  3. 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 belgeleri renderer.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!

img5.png

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.

  1. scripts/FriendlyEats.Data.js geri dönün.
  2. FriendlyEats.prototype.getRestaurant fonksiyonunu bulun.
  3. 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:

img1.png

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.

  1. scripts/FriendlyEats.Data.js geri dönün.
  2. FriendlyEats.prototype.getFilteredRestaurants fonksiyonunu bulun.
  3. 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.

  1. 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" }
     ]
   },

   ...

 ]
}
  1. 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.

  1. scripts/FriendlyEats.Data.js geri dönün.
  2. FriendlyEats.prototype.addRating fonksiyonunu bulun.
  3. 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.

  1. Firebase konsolunun Derleme bölümünde Firestore Veritabanı'na tıklayın.
  2. Cloud Firestore bölümünde Kurallar sekmesine tıklayın (veya doğrudan oraya gitmek için burayı tıklayın ).
  3. 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

  1. Bulut konsolunda Güvenlik altında reCaptcha Enterprise'ı bulun ve seçin.
  2. Hizmeti istendiği gibi etkinleştirin ve Anahtar Oluştur'u tıklayın.
  3. İstendiğinde bir görünen ad girin ve platform türünüz olarak Web sitesi'ni seçin.
  4. Dağıtılan URL'lerinizi Etki Alanı listesine ekleyin ve "Onay kutusu sorgulamasını kullan" seçeneğinin işaretli olmadığından emin olun.
  5. 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

  1. Firebase konsolunda sol paneldeki Derleme bölümünü bulun.
  2. Uygulama Kontrolü'nü ve ardından Başlayın düğmesini tıklayın (veya doğrudan konsola yönlendirin).
  3. Kaydol'a tıklayın ve istendiğinde reCaptcha Enterprise anahtarınızı girin, ardından Kaydet'e tıklayın.
  4. 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.