Cloud Firestore Web Codelab'i

1. Genel Bakış

Gol sayısı

Bu codelab'de Cloud Firestore tarafından desteklenen bir restoran önerisi web uygulaması geliştireceksiniz.

Neler öğreneceksiniz?

• Bir web uygulamasından Cloud Firestore'a veri okuma ve yazma
• Cloud Firestore verilerindeki değişiklikleri anlık olarak dinleyin
• Cloud Firestore verilerinin güvenliğini sağlamak için Firebase Authentication ve güvenlik kurallarını kullanın
• Karmaşık Cloud Firestore sorgularını yazma

Gerekenler

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

• Genellikle Node.js ile gelen npm (Düğüm 16+ önerilir)
• Tercih ettiğiniz WebStorm, VS Code veya Sublime gibi IDE/metin düzenleyici

2. Firebase projesi oluşturma ve ayarlama

Firebase projesi oluşturma

1. Firebase konsolunda Proje ekle'yi tıklayın ve ardından Firebase projesini FriendlyEats olarak adlandırın.

Firebase projenizin proje kimliğini unutmayın.

2. Create project (Proje oluştur) seçeneğini tıklayın.

Derleeceğimiz uygulama, web'de bulunan birkaç Firebase hizmetini kullanır:

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

Bu 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 adımlarında size yol göstereceğiz.

Anonim Yetkilendirmeyi Etkinleştir

Kimlik doğrulama bu codelab'in odak noktası olmasa da uygulamamızda bir kimlik doğrulama yöntemi kullanmak önemlidir. Anonim giriş kullanılacaktır. Bu, kullanıcının herhangi bir soru sorulmadan, sessizce oturum açacağı anlamına gelir.

Anonim girişi etkinleştirmeniz gerekir.

1. Firebase konsolunda sol gezinme bölmesindeki Derleme bölümünü bulun.
2. Kimlik doğrulama'yı, ardından Oturum açma yöntemi sekmesini tıklayın (veya doğrudan bu sayfaya gitmek için burayı tıklayın).
3. Anonim Oturum Açma Sağlayıcısı'nı etkinleştirip Kaydet'i tıklayın.

Bu seçenek, uygulamanın, web uygulamasına erişen kullanıcılarınız için sessizce oturum açmasına olanak tanır. Daha fazla bilgi edinmek için Anonim Kimlik Doğrulama belgelerini okuyabilirsiniz.

Cloud Firestore'u etkinleştirin

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

Cloud Firestore'u etkinleştirmeniz gerekir. Firebase konsolunun Derleme bölümünde Firestore Veritabanı'nı tıklayın. Cloud Firestore bölmesinde Create database'i (Veritabanı oluştur) tıklayın.

Cloud Firestore'daki verilere erişim, Güvenlik Kuralları tarafından kontrol edilir. Bu codelab'in ilerleyen bölümlerinde kurallardan daha ayrıntılı olarak bahsedeceğiz. Ancak başlamak için önce verilerimiz üzerinde bazı temel kurallar belirlememiz gerekir. 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, veri erişimini oturum açmış kullanıcılarla kısıtlar. Bu da, kimliği doğrulanmamış kullanıcıların okumasını veya yazmasını engeller. Bu, herkese açık erişime izin vermekten daha iyidir ancak yine de güvenli değildir. Bu kuralları daha sonra codelab'de iyileştireceğiz.

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ı. Şu andan itibaren, 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 öneri uygulamasından oluşan codelab'in başlangıç kodunu içerir. Dizini bu codelab'de işlevsel hale getireceğiz. Bu nedenle, yakın zamanda ilgili dizindeki kodu düzenlemeniz gerekecektir.

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

Firebase Komut Satırı Arayüzü (KSA), web uygulamanızı yerel olarak sunmanızı ve web uygulamanızı Firebase Hosting'e dağıtmanızı sağlar.

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 düzgün şekilde yüklendiğini doğrulayın:

firebase --version

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

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

firebase login

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

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, ardından Firebase projenize bir takma ad verin.

Takma ad, birden fazla ortamınız varsa (üretim, hazırlık vb.) kullanışlıdır. Ancak bu codelab için default takma adını kullanalım.

7. Komut satırınızdaki kalan talimatları uygulayın.

5. Yerel sunucuyu çalıştırma

Uygulamamız üzerinde çalışmaya tam anlamıyla hazırız! Şimdi 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ı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ının artık http://localhost:5000 adresinden kullanılabilir durumda olması gerekir.

3. http://localhost:5000 adresinden uygulamanızı açın.

Firebase projenize bağlı FriendlyEats kopyanızı göreceksiniz.

Uygulama otomatik olarak Firebase projenize bağlanır ve sessizce anonim bir kullanıcı olarak oturum açmanızı sağlar.

6. Cloud Firestore'a veri yazma

Bu bölümde, uygulamanın kullanıcı arayüzünü doldurabilmek için bazı verileri Cloud Firestore'a yazacağız. Bu işlem, Firebase konsolu üzerinden manuel olarak yapılabilir. Ancak temel bir Cloud Firestore yazma işlemini göstermek için bu işlemi uygulamanın içinde gerçekleştireceğiz.

Veri Modeli

Firestore verileri koleksiyonlar, belgeler, alanlar ve alt koleksiyonlara ayrılır. Her bir 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 saklarız.

Firestore'a restoran ekleyin

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

1. İndirdiğiniz dosyalardan scripts/FriendlyEats.Data.js uygulamasını açın.
2. FriendlyEats.prototype.addRestaurant fonksiyonunu bulun.
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 doküman ekler. Belge verileri düz bir JavaScript nesnesinden gelir. Bunu önce bir Cloud Firestore koleksiyonuna referans vererek restaurants ve ardından verileri addalarak yaparız.

Restoran ekleyelim!

1. Tarayıcınızda FriendlyEats uygulamasına geri dönün ve uygulamayı yenileyin.
2. Örnek Veri Ekle'yi tıklayın.

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

Ancak Firebase konsolunda Cloud Firestore sekmesine giderseniz artık yeni dokümanları restaurants koleksiyonunda görebilirsiniz.

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

Sonraki bölümde, Cloud Firestore'dan veri almayı ve uygulamanızda görüntülemeyi öğreneceksiniz.

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

Bu bölümde Cloud Firestore'dan veri almayı ve uygulamanızda görüntülemeyi öğreneceksiniz. İki temel adım, sorgu oluşturma ve anlık görüntü işleyici eklemedir. Bu dinleyici, sorguyla eşleşen mevcut tüm veriler hakkında bilgilendirilir ve güncellemeleri gerçek zamanlı olarak alı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. İş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, ortalama puana (şu anda tümü sıfır) göre sıralanmış restaurants adlı üst düzey koleksiyondan 50 adede kadar restoran getirecek bir sorgu oluştururuz. Bu sorguyu beyan ettikten sonra, verileri yükleyip oluşturmaktan sorumlu getDocumentsInQuery() yöntemine iletiriz.

Bunu bir anlık görüntü işleyici ekleyerek yapacağız.

1. scripts/FriendlyEats.Data.js dosyasına geri dönün.
2. FriendlyEats.prototype.getDocumentsInQuery fonksiyonunu bulun.
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 query.onSnapshot, sorgunun sonucunda her değişiklik olduğunda geri çağırma işlemini tetikler.

• İlk kez geri çağırma, sorgunun tüm sonuç kümesiyle, yani Cloud Firestore'daki tüm restaurants koleksiyonuyla tetiklenir. Daha sonra, tüm dokümanları renderer.display işlevine iletir.
• Bir doküman silindiğinde change.type değeri removed olur. Bu örnekte, 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 daha önce Firebase konsolunda gördüğümüz restoranların artık uygulamada göründüğünü 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. Yapılan değişiklikler sitenizde hemen gösterilir.

8. Get() verileri

Şimdiye kadar, güncellemeleri gerçek zamanlı olarak almak için onSnapshot özelliğinin nasıl kullanılacağını gösterdik; Ama her zaman istediğimiz de bu olmayabilir. Bazen verileri yalnızca bir kez getirmek daha anlamlı olur.

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

1. scripts/FriendlyEats.Data.js adlı dosyanıza geri dönün.
2. FriendlyEats.prototype.getRestaurant fonksiyonunu bulun.
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 bir restoranın sayfalarını görüntüleyebilirsiniz. Listedeki bir restoranı tıkladığınızda restoranın ayrıntılar sayfasını göreceksiniz:

Şu anda, codelab'de puan eklemeyi daha sonra uygulamamız gerektiğinden puan ekleyemezsiniz.

9. Verileri sıralama ve filtreleme

Şu anda uygulamamızda bir restoran listesi görüntülenmektedir, ancak kullanıcının ihtiyaçlarına göre filtreleme yapması mümkün değildir. Bu bölümde, filtrelemeyi etkinleştirmek için Cloud Firestore'un gelişmiş sorgulama özelliğini kullanacaksınız.

Aşağıda, tüm Dim Sum restoranlarını getiren basit bir sorgu örneği verilmiştir:

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 koleksiyon üyelerini indirmesini sağlar. Bu durumda yalnızca category öğesinin Dim Sum olduğu restoranlar indirilir.

Kullanıcı, uygulamamızda "İstanbul'da pizza" gibi belirli sorgular oluşturmak için birden çok filtre zinciri oluşturabilir. veya "Los Angeles'taki popülerlik derecesine göre sıralanmış deniz ürünleri".

Kullanıcılarımız tarafından seçilen birden çok ölçüte göre restoranlarımızı filtreleyen bir sorgu oluşturan bir yöntem oluşturacağız.

1. scripts/FriendlyEats.Data.js adlı dosyanıza geri dönün.
2. FriendlyEats.prototype.getFilteredRestaurants fonksiyonunu bulun.
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 göre birleşik bir sorgu oluşturmak için birden fazla where filtresi ve tek bir orderBy ifadesi ekler. Sorgumuz artık yalnızca kullanıcının koşullarıyla eşleşen restoranları döndürür.

Tarayıcınızda FriendlyEats uygulamanızı yenileyip fiyata, şehre ve kategoriye göre filtreleme yapabildiğinizi doğrulayın. Test sırasında tarayıcınızın JavaScript Konsolu'nda şuna benzer 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, Cloud Firestore'un çoğu bileşik sorgu için dizin gerektirmesinden kaynaklanır. Sorgularda dizin gerekliliği, 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ü, 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 incelemek ve dizin oluşturma bağlantılarını izlemek istemiyorsak Firebase CLI kullanarak tek seferde çok sayıda dizini 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" }
     ]
   },

   ...

 ]
}

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

firebase deploy --only firestore:indexes

Birkaç dakika sonra dizinleriniz etkin hale gelir ve hata mesajları kaybolur.

11. İşlemde veri yazma

Bu bölümde, kullanıcıların restoranlara yorum göndermelerine olanak tanıyacağız. Şu ana kadar tüm yazılarımız atomik ve nispeten daha basitti. Bunlardan herhangi birinde hata oluşursa kullanıcıdan işlemi yeniden denemesini isteyebiliriz veya uygulamamız otomatik olarak yazmayı yeniden dener.

Uygulamamızın bir restorana puan vermek isteyen birçok kullanıcısı olacağından, birden fazla okuma ve yazma işlemini koordine etmemiz gerekecek. Önce yorumun kendisinin gönderilmesi, ardından restoranın count ve average rating puanının güncellenmesi gerekiyor. 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 işlemi yapmamıza olanak tanıyarak verilerimizin tutarlı kalmasını sağlayan işlem işlevi sunar.

1. scripts/FriendlyEats.Data.js adlı dosyanıza geri dönün.
2. FriendlyEats.prototype.addRating fonksiyonunu bulun.
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ğerlerinin güncellenmesi için bir işlem tetikleriz. Aynı zamanda, yeni rating, ratings alt koleksiyonuna eklendi.

12. Verilerinizin güvenliğini sağlayın

Bu codelab'in başında uygulamamızın güvenlik kurallarını, veritabanını tüm okuma veya yazma işlemlerine tamamen açacak şekilde ayarladık. Gerçek bir uygulamada, istenmeyen veri erişimini veya veri değişikliğini önlemek için çok daha ayrıntılı kurallar belirlemek isteriz.

1. Firebase konsolunun Derleme bölümünde Firestore Veritabanı'nı tıklayın.
2. Cloud Firestore bölümündeki Kurallar sekmesini tıklayın (veya doğrudan sayfaya 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, müşterilerin 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 derecelendirmeleri değiştirebilir, adı veya diğer sabit verileri değiştiremez.
• Derecelendirmeler yalnızca kullanıcı kimliği oturum açmış kullanıcıyla eşleşirse oluşturulabilir. Bu da adres sahteciliğini önler.

Firebase projenize kural dağıtmak için Firebase CLI'yı kullanmak yerine Firebase konsolunu da kullanabilirsiniz. Çalışma dizininizdeki firestore.rules dosyası zaten yukarıdaki kuralları içeriyor. Bu kuralları Firebase konsolunu 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 ile yazma işlemlerini nasıl yapacağınızı ve güvenlik kurallarıyla veri erişiminin nasıl güvenli hale getirileceğini öğrendiniz. Tam çözümü 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ıl

Firebase Uygulama Kontrolü, uygulamanıza gelen istenmeyen trafiği doğrulamanıza ve önlemenize yardımcı olarak koruma sağlar. Bu adımda, reCAPTCHA Enterprise ile Uygulama Kontrolü'nü ekleyerek hizmetlerinize erişimi güvenli hale getirebilirsiniz.

Öncelikle Uygulama Kontrolü'nü ve reCaptcha'yı etkinleştirmeniz gerekir.

reCaptcha Enterprise'ı etkinleştirme

1. Cloud Console'da, Güvenlik bölümünde reCaptcha Enterprise'ı bulup seçin.
2. İstendiği şekilde hizmeti etkinleştirin ve Anahtar Oluştur'u tıklayın.
3. İstendiği gibi bir görünen ad girin ve platform türü olarak Web sitesi'ni seçin.
4. Dağıtılan URL'lerinizi Alan adı listesine ekleyin ve "Onay kutusu sorgulamasını kullan" seçeneğinin belirlendiğinden emin olun. seçeneğinin işareti kaldırılır.
5. Anahtar Oluştur'u tıklayın ve oluşturulan anahtarı, güvenle saklamak için bir yerde saklayın. Bu adımın ilerleyen bölümlerinde bunlara ihtiyacınız olacaktır.

Uygulama Kontrolü'nü etkinleştirme

1. Firebase konsolunda sol panelden Derleme bölümünü bulun.
2. Uygulama Kontrolü'nü ve ardından Başlayın düğmesini tıklayın (veya doğrudan konsol'a yönlendirin).
3. Register'ı (Kaydol) 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 Uygula'yı tıklayın. Aynı işlemi Cloud Firestore için de yapın.

Uygulama Kontrolü artık zorunlu kılınacak. Uygulamanızı yenileyin ve bir 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 ve 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 bir ReCaptchaEnterpriseProvider ile başlatılır ve isTokenAutoRefreshEnabled, uygulamanızda jetonların otomatik olarak yenilenmesine izin verir.

Yerel testi etkinleştirmek için FriendlyEats.js dosyasında uygulamanın başlatıldığı bölümü bulun ve aşağıdaki satırı FriendlyEats.prototype.initAppCheck işlevine ekleyin:

if(isLocalhost) {
  self.FIREBASE_APPCHECK_DEBUG_TOKEN = true;
}

Bu işlem, yerel web uygulamanızın konsolunda şuna benzer bir hata ayıklama jetonu 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 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 jetonu ekle'yi tıklayın ve konsolunuzdaki hata ayıklama jetonunu, istendiği şekilde yapıştırın.

Tebrikler! Uygulama Kontrolü'nün artık uygulamanızda çalışıyor olması gerekir.