Cloud Firestore Web Codelab'i

1. Genel Bakış

Gol sayısı

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

Neler öğreneceksiniz?

• Web uygulamasından Cloud Firestore'a veri okuma ve yazma
• Cloud Firestore verilerindeki değişiklikleri gerçek zamanlı olarak dinleme
• Cloud Firestore verilerinin güvenliğini sağlamak için Firebase Authentication ve güvenlik kurallarını kullanma
• Karmaşık Cloud Firestore sorguları yazma

Gerekenler

Bu codelab'e başlamadan önce şunları yüklediğinizden emin olun:

• Genellikle Node.js ile birlikte gelen npm (Node 16 veya daha yeni bir sürüm önerilir)
• WebStorm, VS Code veya Sublime gibi istediğiniz IDE/metin düzenleyici

2. Firebase projesi oluşturma ve ayarlama

Firebase projesi oluşturma

1. Google Hesabınızı kullanarak Firebase konsolunda oturum açın.
2. Yeni bir proje oluşturmak için düğmeyi tıklayın ve ardından bir proje adı girin (örneğin, FriendlyEats).
   
3. Devam'ı tıklayın.
4. İstenirse Firebase şartlarını inceleyip kabul edin ve Devam'ı tıklayın.
5. (İsteğe bağlı) Firebase konsolunda yapay zeka yardımını etkinleştirin ("Firebase'de Gemini" olarak adlandırılır).
6. Bu codelab için Google Analytics'e ihtiyacınız yoktur. Bu nedenle, Google Analytics seçeneğini devre dışı bırakın.
7. Proje oluştur'u tıklayın, projenizin hazırlanmasını bekleyin ve ardından Devam'ı tıklayın.

Firebase ürünlerini ayarlama

Geliştireceğimiz uygulama, web'de kullanılabilen birkaç Firebase hizmetini kullanır:

• Kullanıcılarınızı kolayca tanımlamak için Firebase Authentication
• Bulutta yapılandırılmış verileri kaydetmek ve veriler güncellendiğinde anında bildirim almak için Cloud Firestore
• Statik öğelerinizi barındırmak ve sunmak için Firebase Hosting

Bu codelab'de Firebase Hosting'i önceden 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ştirme

Bu codelab'in odak noktası kimlik doğrulama olmasa da uygulamamızda bir kimlik doğrulama biçimi olması önemlidir. Anonim giriş kullanacağız. Bu, kullanıcının herhangi bir istem olmadan sessizce oturum açacağı anlamına gelir.

Anonim oturum açma'yı etkinleştirmeniz gerekir.

1. Firebase konsolunda, sol gezinme menüsündeki Build (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 gitmek için burayı tıklayın).
3. Anonim oturum açma sağlayıcısını etkinleştirin ve Kaydet'i tıklayın.

Bu işlem, kullanıcılarınız web uygulamasına eriştiğinde uygulamanın kullanıcılarınızın oturumunu sessizce açmasına olanak tanır. Daha fazla bilgi edinmek için Anonim Kimlik Doğrulama dokümanlarını inceleyebilirsiniz.

Cloud Firestore'u etkinleştirin

Uygulama, restoran bilgilerini ve puanlarını kaydetmek ve almak için Cloud Firestore'u kullanır.

Cloud Firestore'u etkinleştirmeniz gerekir. 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'daki verilere erişim, güvenlik kurallarıyla kontrol edilir. Bu codelab'in ilerleyen bölümlerinde kurallar hakkında daha fazla bilgi vereceğiz ancak başlamak için öncelikle verilerimizde bazı temel kurallar belirlememiz gerekiyor. Firebase konsolunun Kurallar sekmesinde aşağıdaki kuralları ekleyin ve Yayınla'yı tıklayın.

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ı ve nasıl çalıştıklarını daha sonra codelab'de ele alacağız.

3. Örnek kodu alın

GitHub deposunu komut satırından klonlayın:

git clone https://github.com/firebase/friendlyeats-web

Örnek kod, 📁friendlyeats-web dizinine klonlanmış olmalıdır. Bundan sonra 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 aktarma

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 önerisi uygulamasından oluşan codelab'in başlangıç kodunu içerir. Bu codelab boyunca uygulamayı işlevsel hale getireceğiz. Bu nedenle, yakında bu dizindeki kodu düzenlemeniz gerekecek.

4. Firebase komut satırı arayüzünü yükleme

Firebase komut satırı arayüzü (KSA), web uygulamanızı yerel olarak sunmanıza ve Firebase Hosting'e dağıtmanıza olanak tanır.

1. Aşağıdaki npm komutunu çalıştırarak CLI'yı yükleyin:

npm -g install firebase-tools

2. Aşağıdaki komutu çalıştırarak CLI'nın doğru şekilde yüklendiğini doğrulayın:

firebase --version

Firebase CLI sürümünün 7.4.0 veya sonraki bir sürüm olduğundan emin olun.

3. Aşağıdaki komutu çalıştırarak Firebase CLI'yı yetkilendirin:

firebase login

Web uygulaması şablonunu, Firebase Hosting için uygulamanızın yapılandırmasını uygulamanızın yerel dizininden ve dosyalarından çekecek şekilde ayarladık. Ancak bunu yapabilmek için uygulamanızı Firebase projenizle ilişkilendirmemiz gerekir.

4. Komut satırınızın uygulamanızın yerel dizinine eriştiğinden emin olun.
5. Aşağıdaki komutu çalıştırarak uygulamanızı Firebase projenizle ilişkilendirin:

firebase use --add

6. İstendiğinde proje kimliğinizi seçin ve Firebase projenize bir takma ad verin.

Birden fazla ortamınız (üretim, hazırlık vb.) varsa takma ad kullanışlıdır. Ancak bu codelab'de yalnızca default takma adını kullanalım.

7. Komut satırınızdaki diğer talimatları uygulayın.

5. Yerel sunucuyu çalıştırma

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

2. Komut satırınızda aşağıdaki yanıt gösterilmelidir:

hosting: Local server: http://localhost:5000

Uygulamamızı yerel olarak sunmak için Firebase Hosting emülatörünü kullanıyoruz. Web uygulaması artık http://localhost:5000 adresinden kullanılabilir.

3. Uygulamanızı http://localhost:5000 adresinde açın.

Firebase projenize bağlanmış olan FriendlyEats kopyanızı görürsünüz.

Uygulama, Firebase projenize otomatik olarak bağlanır ve sizi anonim kullanıcı olarak sessizce kaydeder.

6. Cloud Firestore'a veri yazma

Bu bölümde, uygulamanın kullanıcı arayüzünü doldurabilmek için Cloud Firestore'a bazı veriler yazacağız. Bu işlem Firebase konsolu üzerinden manuel olarak yapılabilir ancak temel bir Cloud Firestore yazma işlemini göstermek için bunu uygulamanın kendisinde yapacağız.

Veri Modeli

Firestore verileri koleksiyonlara, belgelere, alanlara ve alt koleksiyonlara ayrılır. Her restoranı restaurants adlı üst düzey bir koleksiyonda belge olarak saklayacağız.

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

Firestore'a restoran ekleme

Uygulamamızdaki ana model nesnesi restorandır. Şimdi restaurants koleksiyonuna bir restoran dokümanı ekleyen bir kod yazalım.

1. İndirilen dosyalarınızdan scripts/FriendlyEats.Data.js dosyasını açın.
2. İşlevi bulun FriendlyEats.prototype.addRestaurant.
3. İşlevin 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. Doküman verileri, düz bir JavaScript nesnesinden gelir. Bunu yapmak için önce bir Cloud Firestore koleksiyonuna referans alırız restaurants ardından verileri add.

Restoran ekleyelim

1. Tarayıcınızda FriendlyEats uygulamanıza geri dönün ve uygulamayı yenileyin.
2. Add Mock Data'yı (Sahte Veri Ekle) tıklayın.

Uygulama, rastgele bir restoran nesneleri grubu oluşturur ve addRestaurant işlevinizi çağırır. Ancak, verileri alma işlemini (codelab'in bir sonraki bölümü) henüz uygulamamız gerektiğinden verileri henüz gerçek web uygulamanızda görmezsiniz.

Ancak Firebase konsolunda Cloud Firestore sekmesine giderseniz restaurants koleksiyonunda yeni belgeler görmeniz gerekir.

Tebrikler, web uygulamasından Cloud Firestore'a veri yazdınız.

Sonraki bölümde, Cloud Firestore'dan verileri alıp uygulamanızda görüntülemeyi öğreneceksiniz.

7. Cloud Firestore'daki verileri görüntüleme

Bu bölümde, Cloud Firestore'dan verileri alıp uygulamanızda görüntülemeyi öğreneceksiniz. Bu işlemde iki temel adım vardır: sorgu oluşturma ve anlık görüntü dinleyici ekleme. Bu dinleyici, sorguyla eşleşen tüm mevcut veriler hakkında bilgilendirilir ve güncellemeleri anlık olarak alır.

Öncelikle, varsayılan ve filtrelenmemiş restoran listesini sunacak sorguyu oluşturalım.

1. Dosyaya scripts/FriendlyEats.Data.js geri dönün.
2. İşlevi bulun FriendlyEats.prototype.getAllRestaurants.
3. İşlevin 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 puana göre sıralanmış (şu anda hepsi sıfır) en fazla 50 restoranı alacak bir sorgu oluşturuyoruz. Bu sorguyu bildirdikten sonra, verileri yüklemekten ve oluşturmaktan sorumlu olan getDocumentsInQuery() yöntemine iletiriz.

Bunu, anlık görüntü dinleyicisi ekleyerek yapacağız.

1. Dosyaya scripts/FriendlyEats.Data.js geri dönün.
2. İşlevi bulun FriendlyEats.prototype.getDocumentsInQuery.
3. İşlevin 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, sorgu sonucunda her değişiklik olduğunda query.onSnapshot geri çağırma işlevini tetikler.

• İlk seferde geri çağırma, sorgunun tüm sonuç kümesiyle tetiklenir. Yani Cloud Firestore'daki restaurants koleksiyonunun tamamı. Ardından, tüm tek tek belgeleri renderer.display işlevine iletir.
• Bir doküman silindiğinde change.type, removed değerine eşit olur. Bu durumda, restoranı kullanıcı arayüzünden kaldıran bir işlev çağıracağız.

Her iki yöntemi de uyguladığımıza göre uygulamayı yenileyin ve Firebase konsolunda daha önce 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 okuyup yazıyor demektir.

Restoran listeniz değiştikçe bu dinleyici otomatik olarak güncellenmeye devam eder. Firebase konsoluna gidip bir restoranı manuel olarak silmeyi veya adını değiştirmeyi deneyin. Değişikliklerin sitenizde hemen göründüğünü fark edeceksiniz.

8. Get() verileri

Şimdiye kadar, güncellemeleri gerçek zamanlı olarak almak için onSnapshot'ı nasıl kullanacağımızı gösterdik. Ancak bu, her zaman istediğimiz şey olmayabilir. Bazen verileri yalnızca bir kez getirmek daha mantıklı olabilir.

Kullanıcı uygulamanızda belirli bir restoranı tıkladığında tetiklenen bir yöntem uygulamak istiyoruz.

1. Dosyanıza scripts/FriendlyEats.Data.js geri dönün.
2. İşlevi bulun FriendlyEats.prototype.getRestaurant.
3. İşlevin 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 restoranın sayfalarını görüntüleyebilirsiniz. Listede bir restoranı tıkladığınızda restoranın ayrıntılar sayfasını görürsünüz:

Şu an için puan ekleyemezsiniz. Puan ekleme işlevini daha sonra codelab'e eklememiz gerekmektedir.

9. Verileri sıralama ve filtreleme

Uygulamamız şu anda restoranların bir listesini gösteriyor ancak kullanıcının ihtiyaçlarına göre filtreleme yapabileceği bir yol yok. Bu bölümde, filtrelemeyi etkinleştirmek için Cloud Firestore'un gelişmiş sorgu özelliğini kullanacaksınız.

Tüm Dim Sum restoranları 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ıtlamaları karşılayan koleksiyon üyelerini indirmesini sağlar. Bu durumda, yalnızca category değerinin Dim Sum olduğu restoranlar indirilir.

Uygulamamızda kullanıcı, "San Francisco'da pizza" veya "Los Angeles'ta popülerliğe göre sıralanmış deniz ürünleri" gibi belirli sorgular oluşturmak için birden fazla filtreyi birleştirebilir.

Kullanıcılarımız tarafından seçilen birden fazla ölçüte göre restoranlarımızı filtreleyecek bir sorgu oluşturan bir yöntem geliştireceğiz.

1. Dosyanıza scripts/FriendlyEats.Data.js geri dönün.
2. İşlevi bulun FriendlyEats.prototype.getFilteredRestaurants.
3. İşlevin 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 ifadesi ekler. Sorgumuz artık yalnızca kullanıcının şartlarını karşılayan restoranları döndürecek.

Tarayıcınızda FriendlyEats uygulamanızı yenileyin, 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 aşağıdaki gibi hatalar görürsünüz:

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 ölçeklendirme sırasında hızlı kalmasını sağlar.

Bağlantıyı hata mesajından açtığınızda, Firebase konsolunda dizin oluşturma kullanıcı arayüzü doğru parametreler doldurulmuş şekilde otomatik olarak açılır. Sonraki bölümde, bu uygulama için gereken dizinleri yazıp dağıtacağız.

10. Dizinleri dağıtma

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

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

   ...

 ]
}

2. Bu dizinleri aşağıdaki komutla dağıtın:

firebase deploy --only firestore:indexes

Birkaç dakika sonra dizinleriniz yayınlanır ve hata mesajları kaybolur.

11. İşlemde veri yazma

Bu bölüme, kullanıcıların restoranlara yorum gönderebilme özelliğini ekleyeceğiz. Şimdiye kadar tüm yazma işlemlerimiz atomik ve nispeten basitti. Bunlardan herhangi biri hata verirse kullanıcıdan bunları yeniden denemesini isteriz veya uygulamamız yazma işlemini otomatik olarak yeniden dener.

Uygulamamızda bir restorana puan vermek isteyen birçok kullanıcı olacak. Bu nedenle, birden fazla okuma ve yazma işlemini koordine etmemiz gerekecek. Önce yorumun kendisi gönderilmeli, ardından restoranın puanı count ve average rating güncellenmelidir. Bunlardan biri başarısız olursa ancak diğeri başarısız olmazsa veritabanımızın bir bölümündeki verilerin başka bir bölümündeki 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 işlemi gerçekleştirmemize olanak tanıyan ve verilerimizin tutarlı kalmasını sağlayan işlem işlevselliği sunuyor.

1. Dosyanıza scripts/FriendlyEats.Data.js geri dönün.
2. İşlevi bulun FriendlyEats.prototype.addRating.
3. İşlevin 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 dokümanındaki avgRating ve numRatings sayısal değerlerini güncellemek için bir işlem tetiklenir. Aynı zamanda, yeni rating öğesini ratings alt koleksiyonuna ekleriz.

12. Verilerinizi güvence altına alma

Bu codelab'in başında, uygulamamıza erişimi kısıtlamak için uygulamamızın güvenlik kurallarını belirledik.

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 dokümanında yapılan güncellemeler yalnızca puanları değiştirebilir. Adı veya diğer değişmez verileri değiştiremez.
• Yalnızca kullanıcı kimliği, oturum açmış kullanıcıyla eşleşiyorsa derecelendirme oluşturulabilir. Bu sayede kimlik sahteciliği önlenir.

Firebase konsolunu kullanmak yerine kuralları Firebase projenize dağıtmak için Firebase CLI'yı kullanabilirsiniz. Çalışma dizininizdeki firestore.rules dosyası yukarıdaki kuralları zaten içeriyor. Bu kuralları Firebase Console'u kullanmak yerine yerel dosya sisteminizden dağıtmak için 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şlemlerini nasıl yapacağınızı ve güvenlik kurallarıyla veri erişimini nasıl güvenli hale getireceğinizi öğrendiniz. Çözümün tamamını quickstarts-js deposunda bulabilirsiniz.

Cloud Firestore hakkında daha fazla bilgi edinmek için aşağıdaki kaynakları ziyaret edin:

• Cloud Firestore'a giriş
• Veri Yapısı Seçme
• Cloud Firestore Web Örnekleri

14. [İsteğe bağlı] Uygulama Kontrolü ile zorunlu kılma

Firebase Uygulama Kontrolü, uygulamanıza gelen istenmeyen trafiği doğrulayıp önleyerek koruma sağlar. Bu adımda, reCAPTCHA Enterprise ile Uygulama Kontrolü'nü ekleyerek hizmetlerinize erişimi güvenli hale getireceksiniz.

Öncelikle App Check ve reCaptcha'yı etkinleştirmeniz gerekir.

reCAPTCHA Enterprise'ı etkinleştirme

1. Cloud Console'da Güvenlik bölümünde reCaptcha Enterprise'ı bulun ve seçin.
2. İstendiği şekilde hizmeti etkinleştirin ve Anahtar Oluştur'u tıklayın.
3. İstendiği şekilde bir görünen ad girin ve platform türü olarak Web sitesi'ni seçin.
4. Dağıtılan URL'lerinizi Alan listesi'ne ekleyin ve "Onay kutusu zorluğunu kullan" seçeneğinin işaretlenmediğinden emin olun.
5. Anahtar Oluştur'u tıklayın ve oluşturulan anahtarı güvenli bir yerde saklayın. Bu bilgiye bu adımın ilerleyen aşamalarında ihtiyacınız olacaktır.

Uygulama Kontrolü'nü etkinleştirme

1. Firebase konsolunda, sol paneldeki Build (Oluştur) 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'u tıklayın ve istendiğinde reCaptcha Enterprise anahtarınızı girin, ardından Kaydet'i tıklayın.
4. API'ler görünümünde Depolama'yı seçin ve Zorunlu kıl'ı tıklayın. Aynı işlemi Cloud Firestore için de yapın.

Uygulama Kontrolü artık zorunlu olmalıdır. Uygulamanızı yenileyin ve restoran oluşturmayı/görüntülemeyi deneyin. Şu hata mesajını alırsı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 App Check'i 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 ReCaptchaEnterpriseProvider ile başlatılır ve isTokenAutoRefreshEnabled, jetonların uygulamanızda 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 işlem, yerel web uygulamanızın konsolunda aşağıdakine benzer bir hata ayıklama jetonu günlüğe kaydeder:

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 App Check'in 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 jetonu ekle'yi tıklayın ve istendiğinde konsolunuzdaki hata ayıklama jetonunu yapıştırın.

Tebrikler! Uygulama Denetimi artık uygulamanızda çalışıyor olmalıdır.