Lab Kode Web Cloud Firestore

1. Ikhtisar

Sasaran

Dalam codelab ini, Anda akan membuat aplikasi web rekomendasi restoran yang didukung oleh Cloud Firestore .

img5.png

Apa yang akan Anda pelajari

  • Membaca dan menulis data ke Cloud Firestore dari aplikasi web
  • Dengarkan perubahan pada data Cloud Firestore secara real time
  • Gunakan Firebase Authentication dan aturan keamanan untuk mengamankan data Cloud Firestore
  • Tulis kueri Cloud Firestore yang kompleks

Apa yang Anda perlukan

Sebelum memulai codelab ini, pastikan Anda telah menginstal:

2. Membuat dan menyiapkan proyek Firebase

Buat proyek Firebase

  1. Di Firebase console , klik Tambahkan proyek , lalu beri nama proyek Firebase FriendlyEats .

Ingat ID Proyek untuk proyek Firebase Anda.

  1. Klik Buat proyek .

Aplikasi yang akan kita bangun menggunakan beberapa layanan Firebase yang tersedia di web:

  • Firebase Authentication untuk mengidentifikasi pengguna Anda dengan mudah
  • Cloud Firestore untuk menyimpan data terstruktur di Cloud dan mendapatkan notifikasi instan ketika data diperbarui
  • Firebase Hosting untuk menghosting dan melayani aset statis Anda

Untuk codelab khusus ini, kami telah mengonfigurasi Firebase Hosting. Namun, untuk Firebase Auth dan Cloud Firestore, kami akan memandu Anda melakukan konfigurasi dan pengaktifan layanan menggunakan Firebase console.

Aktifkan Auth Anonim

Meskipun autentikasi bukan fokus codelab ini, penting untuk memiliki beberapa bentuk autentikasi di aplikasi kita. Kami akan menggunakan login Anonim - artinya pengguna akan login secara diam-diam tanpa diminta.

Anda harus mengaktifkan login Anonim.

  1. Di Firebase console, temukan bagian Build di navigasi kiri.
  2. Klik Autentikasi , lalu klik tab Metode masuk (atau klik di sini untuk langsung menuju ke sana).
  3. Aktifkan Penyedia Masuk Anonim , lalu klik Simpan .

img7.png

Ini akan memungkinkan aplikasi untuk memasukkan pengguna Anda secara diam-diam saat mereka mengakses aplikasi web. Silakan membaca dokumentasi Otentikasi Anonim untuk mempelajari lebih lanjut.

Aktifkan Cloud Firestore

Aplikasi ini menggunakan Cloud Firestore untuk menyimpan dan menerima informasi dan peringkat restoran.

Anda harus mengaktifkan Cloud Firestore. Di bagian Build Firebase console, klik Firestore Database . Klik Buat database di panel Cloud Firestore.

Akses ke data di Cloud Firestore dikontrol oleh Aturan Keamanan. Kita akan membahas lebih lanjut tentang aturan nanti di codelab ini, tetapi pertama-tama kita perlu menetapkan beberapa aturan dasar pada data untuk memulai. Di tab Rules di Firebase console, tambahkan aturan berikut, lalu klik Publish .

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;
    }
  }
}

Aturan di atas membatasi akses data kepada pengguna yang masuk, sehingga mencegah pengguna yang tidak diautentikasi untuk membaca atau menulis. Hal ini lebih baik daripada mengizinkan akses publik tetapi masih jauh dari aman. Kami akan menyempurnakan aturan ini nanti di codelab.

3. Dapatkan kode contoh

Kloning repositori GitHub dari baris perintah:

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

Kode contoh seharusnya sudah diklon ke direktori 📁 friendlyeats-web . Mulai sekarang, pastikan untuk menjalankan semua perintah Anda dari direktori ini:

cd friendlyeats-web/vanilla-js

Impor aplikasi awal

Menggunakan IDE Anda (WebStorm, Atom, Sublime, Visual Studio Code...) buka atau impor direktori 📁 friendlyeats-web . Direktori ini berisi kode awal untuk codelab yang terdiri dari aplikasi rekomendasi restoran yang belum berfungsi. Kami akan membuatnya berfungsi di seluruh codelab ini sehingga Anda harus segera mengedit kode di direktori tersebut.

4. Instal Antarmuka Baris Perintah Firebase

Antarmuka Baris Perintah (CLI) Firebase memungkinkan Anda menyajikan aplikasi web secara lokal dan menerapkan aplikasi web ke Firebase Hosting.

  1. Instal CLI dengan menjalankan perintah npm berikut:
npm -g install firebase-tools
  1. Verifikasi bahwa CLI telah diinstal dengan benar dengan menjalankan perintah berikut:
firebase --version

Pastikan versi Firebase CLI adalah v7.4.0 atau lebih baru.

  1. Otorisasi Firebase CLI dengan menjalankan perintah berikut:
firebase login

Kami telah menyiapkan template aplikasi web untuk mengambil konfigurasi aplikasi Anda untuk Firebase Hosting dari direktori dan file lokal aplikasi Anda. Namun untuk melakukan hal ini, kami perlu mengaitkan aplikasi Anda dengan proyek Firebase Anda.

  1. Pastikan baris perintah Anda mengakses direktori lokal aplikasi Anda.
  2. Kaitkan aplikasi Anda dengan proyek Firebase dengan menjalankan perintah berikut:
firebase use --add
  1. Saat diminta, pilih ID Proyek Anda, lalu berikan alias pada proyek Firebase Anda.

Alias ​​berguna jika Anda memiliki beberapa lingkungan (produksi, pementasan, dll). Namun, untuk codelab ini, mari kita gunakan saja alias default .

  1. Ikuti instruksi selanjutnya di baris perintah Anda.

5. Jalankan server lokal

Kami siap untuk mulai mengerjakan aplikasi kami! Ayo jalankan aplikasi kita secara lokal!

  1. Jalankan perintah Firebase CLI berikut:
firebase emulators:start --only hosting
  1. Baris perintah Anda akan menampilkan respons berikut:
hosting: Local server: http://localhost:5000

Kami menggunakan emulator Firebase Hosting untuk melayani aplikasi kami secara lokal. Aplikasi web sekarang seharusnya tersedia dari http://localhost:5000 .

  1. Buka aplikasi Anda di http://localhost:5000 .

Anda akan melihat salinan FriendlyEats yang telah terhubung ke proyek Firebase Anda.

Aplikasi ini secara otomatis terhubung ke proyek Firebase Anda dan secara diam-diam memasukkan Anda sebagai pengguna anonim.

img2.png

6. Tulis data ke Cloud Firestore

Di bagian ini, kita akan menulis beberapa data ke Cloud Firestore sehingga kita dapat mengisi UI aplikasi. Hal ini dapat dilakukan secara manual melalui Firebase console , namun kami akan melakukannya di aplikasi itu sendiri untuk mendemonstrasikan penulisan dasar Cloud Firestore.

Model data

Data Firestore dibagi menjadi koleksi, dokumen, bidang, dan subkoleksi. Kami akan menyimpan setiap restoran sebagai dokumen dalam koleksi tingkat atas yang disebut restaurants .

img3.png

Nantinya, kami akan menyimpan setiap ulasan dalam subkoleksi yang disebut ratings di bawah setiap restoran.

img4.png

Tambahkan restoran ke Firestore

Objek model utama di aplikasi kita adalah restoran. Mari kita tulis beberapa kode yang menambahkan dokumen restoran ke koleksi restaurants .

  1. Dari file yang Anda unduh, buka scripts/FriendlyEats.Data.js .
  2. Temukan fungsinya FriendlyEats.prototype.addRestaurant .
  3. Ganti seluruh fungsi dengan kode berikut.

FriendlyEats.Data.js

FriendlyEats.prototype.addRestaurant = function(data) {
  var collection = firebase.firestore().collection('restaurants');
  return collection.add(data);
};

Kode di atas menambahkan dokumen baru ke koleksi restaurants . Data dokumen berasal dari objek JavaScript biasa. Kami melakukan ini dengan terlebih dahulu mendapatkan referensi ke restaurants koleksi Cloud Firestore, lalu add datanya.

Ayo tambahkan restoran!

  1. Kembali ke aplikasi FriendlyEats di browser Anda dan segarkan.
  2. Klik Tambahkan Data Tiruan .

Aplikasi ini akan secara otomatis menghasilkan sekumpulan objek restoran secara acak, lalu memanggil fungsi addRestaurant Anda. Namun, Anda belum akan melihat datanya di aplikasi web sebenarnya karena kita masih perlu menerapkan pengambilan data (bagian selanjutnya dari codelab).

Namun, jika Anda membuka tab Cloud Firestore di Firebase console, Anda sekarang akan melihat dokumen baru di koleksi restaurants !

img6.png

Selamat, Anda baru saja menulis data ke Cloud Firestore dari aplikasi web!

Di bagian berikutnya, Anda akan mempelajari cara mengambil data dari Cloud Firestore dan menampilkannya di aplikasi Anda.

7. Menampilkan data dari Cloud Firestore

Di bagian ini, Anda akan mempelajari cara mengambil data dari Cloud Firestore dan menampilkannya di aplikasi Anda. Dua langkah utamanya adalah membuat kueri dan menambahkan pemroses snapshot. Listener ini akan diberitahu tentang semua data yang ada yang cocok dengan kueri dan akan menerima pembaruan secara real time.

Pertama, mari buat kueri yang akan menyajikan daftar restoran default tanpa filter.

  1. Kembali ke file scripts/FriendlyEats.Data.js .
  2. Temukan fungsinya FriendlyEats.prototype.getAllRestaurants .
  3. Ganti seluruh fungsi dengan kode berikut.

FriendlyEats.Data.js

FriendlyEats.prototype.getAllRestaurants = function(renderer) {
  var query = firebase.firestore()
      .collection('restaurants')
      .orderBy('avgRating', 'desc')
      .limit(50);

  this.getDocumentsInQuery(query, renderer);
};

Dalam kode di atas, kita membuat kueri yang akan mengambil hingga 50 restoran dari koleksi tingkat atas bernama restaurants , yang diurutkan berdasarkan peringkat rata-rata (saat ini semuanya nol). Setelah mendeklarasikan kueri ini, kami meneruskannya ke metode getDocumentsInQuery() yang bertanggung jawab untuk memuat dan merender data.

Kami akan melakukan ini dengan menambahkan pendengar snapshot.

  1. Kembali ke file scripts/FriendlyEats.Data.js .
  2. Temukan fungsinya FriendlyEats.prototype.getDocumentsInQuery .
  3. Ganti seluruh fungsi dengan kode berikut.

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);
      }
    });
  });
};

Pada kode di atas, query.onSnapshot akan memicu callbacknya setiap kali ada perubahan pada hasil query.

  • Pertama kali, callback dipicu dengan seluruh kumpulan hasil kueri – artinya seluruh koleksi restaurants dari Cloud Firestore. Kemudian meneruskan semua dokumen individual ke fungsi renderer.display .
  • Saat dokumen dihapus, change.type sama dengan removed . Jadi dalam kasus ini, kita akan memanggil fungsi yang menghapus restoran dari UI.

Sekarang setelah kita menerapkan kedua metode tersebut, segarkan aplikasi dan verifikasi bahwa restoran yang kita lihat sebelumnya di Firebase console kini terlihat di aplikasi. Jika Anda berhasil menyelesaikan bagian ini, aplikasi Anda sekarang membaca dan menulis data dengan Cloud Firestore!

Saat daftar restoran Anda berubah, pendengar ini akan terus memperbarui secara otomatis. Coba buka Firebase console dan hapus restoran secara manual atau ubah namanya - Anda akan segera melihat perubahan tersebut muncul di situs Anda!

img5.png

8. Dapatkan() data

Sejauh ini, kami telah menunjukkan cara menggunakan onSnapshot untuk mengambil pembaruan secara real time; namun, hal itu tidak selalu kita inginkan. Terkadang lebih masuk akal jika hanya mengambil data satu kali.

Kami ingin menerapkan metode yang dipicu ketika pengguna mengeklik restoran tertentu di aplikasi Anda.

  1. Kembali ke file Anda scripts/FriendlyEats.Data.js .
  2. Temukan fungsinya FriendlyEats.prototype.getRestaurant .
  3. Ganti seluruh fungsi dengan kode berikut.

FriendlyEats.Data.js

FriendlyEats.prototype.getRestaurant = function(id) {
  return firebase.firestore().collection('restaurants').doc(id).get();
};

Setelah menerapkan metode ini, Anda akan dapat melihat halaman untuk setiap restoran. Cukup klik restoran dalam daftar dan Anda akan melihat halaman detail restoran tersebut:

img1.png

Untuk saat ini, Anda tidak dapat menambahkan rating karena kami masih perlu menerapkan penambahan rating nanti di codelab.

9. Menyortir dan memfilter data

Saat ini, aplikasi kami menampilkan daftar restoran, namun tidak ada cara bagi pengguna untuk memfilter berdasarkan kebutuhan mereka. Di bagian ini, Anda akan menggunakan kueri lanjutan Cloud Firestore untuk mengaktifkan pemfilteran.

Berikut ini contoh query sederhana untuk mengambil semua restoran Dim Sum :

var filteredQuery = query.where('category', '==', 'Dim Sum')

Sesuai dengan namanya, metode where() akan membuat kueri kita hanya mengunduh anggota koleksi yang bidangnya memenuhi batasan yang kita tetapkan. Dalam hal ini, hanya akan mengunduh restoran dengan category Dim Sum .

Di aplikasi kami, pengguna dapat merangkai beberapa filter untuk membuat kueri spesifik, seperti "Pizza di San Francisco" atau "Makanan Laut di Los Angeles yang diurutkan berdasarkan Popularitas".

Kami akan membuat metode yang membangun kueri yang akan memfilter restoran kami berdasarkan beberapa kriteria yang dipilih oleh pengguna kami.

  1. Kembali ke file Anda scripts/FriendlyEats.Data.js .
  2. Temukan fungsinya FriendlyEats.prototype.getFilteredRestaurants .
  3. Ganti seluruh fungsi dengan kode berikut.

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);
};

Kode di atas menambahkan beberapa filter where dan satu klausa orderBy untuk membuat kueri gabungan berdasarkan masukan pengguna. Permintaan kami sekarang hanya akan mengembalikan restoran yang sesuai dengan kebutuhan pengguna.

Segarkan aplikasi FriendlyEats di browser Anda, lalu verifikasi bahwa Anda dapat memfilter berdasarkan harga, kota, dan kategori. Saat pengujian, Anda akan melihat kesalahan di Konsol JavaScript browser Anda yang terlihat seperti ini:

The query requires an index. You can create it here: https://console.firebase.google.com/project/project-id/database/firestore/indexes?create_composite=...

Error ini terjadi karena Cloud Firestore memerlukan indeks untuk sebagian besar kueri gabungan. Mewajibkan indeks pada kueri membuat Cloud Firestore tetap cepat dalam skala besar.

Membuka tautan dari pesan kesalahan akan secara otomatis membuka UI pembuatan indeks di Firebase console dengan parameter yang diisi dengan benar. Di bagian berikutnya, kita akan menulis dan menerapkan indeks yang diperlukan untuk aplikasi ini.

10. Terapkan indeks

Jika kita tidak ingin menjelajahi setiap jalur di aplikasi kita dan mengikuti setiap link pembuatan indeks, kita dapat dengan mudah men-deploy banyak indeks sekaligus menggunakan Firebase CLI.

  1. Di direktori lokal aplikasi yang diunduh, Anda akan menemukan file firestore.indexes.json .

File ini menjelaskan semua indeks yang diperlukan untuk semua kemungkinan kombinasi filter.

firestore.indexes.json

{
 "indexes": [
   {
     "collectionGroup": "restaurants",
     "queryScope": "COLLECTION",
     "fields": [
       { "fieldPath": "city", "order": "ASCENDING" },
       { "fieldPath": "avgRating", "order": "DESCENDING" }
     ]
   },

   ...

 ]
}
  1. Terapkan indeks ini dengan perintah berikut:
firebase deploy --only firestore:indexes

Setelah beberapa menit, indeks Anda akan aktif dan pesan kesalahan akan hilang.

11. Menulis data dalam suatu transaksi

Di bagian ini, kami akan menambahkan kemampuan bagi pengguna untuk mengirimkan ulasan ke restoran. Sejauh ini, semua tulisan kami bersifat atomik dan relatif sederhana. Jika ada yang error, kami mungkin akan meminta pengguna untuk mencobanya lagi atau aplikasi kami akan mencoba ulang penulisan secara otomatis.

Aplikasi kami akan memiliki banyak pengguna yang ingin menambahkan peringkat untuk sebuah restoran, jadi kami perlu mengoordinasikan beberapa pembacaan dan penulisan. Pertama, ulasan itu sendiri harus dikirimkan, kemudian count rating restoran dan average rating perlu diperbarui. Jika salah satu gagal namun yang lain tidak, kita akan berada dalam keadaan tidak konsisten dimana data di satu bagian database kita tidak cocok dengan data di bagian lain.

Untungnya, Cloud Firestore menyediakan fungsionalitas transaksi yang memungkinkan kami melakukan beberapa pembacaan dan penulisan dalam satu operasi atomik, sehingga memastikan data kami tetap konsisten.

  1. Kembali ke file Anda scripts/FriendlyEats.Data.js .
  2. Temukan fungsinya FriendlyEats.prototype.addRating .
  3. Ganti seluruh fungsi dengan kode berikut.

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);
    });
  });
};

Pada blok di atas, kita memicu transaksi untuk memperbarui nilai numerik avgRating dan numRatings di dokumen restoran. Pada saat yang sama, kami menambahkan rating baru ke subkoleksi ratings .

12. Amankan data Anda

Di awal codelab ini, kami menetapkan aturan keamanan aplikasi untuk membuka database sepenuhnya untuk proses baca atau tulis apa pun. Dalam aplikasi nyata, kami ingin menetapkan aturan yang lebih terperinci untuk mencegah akses atau modifikasi data yang tidak diinginkan.

  1. Di bagian Build Firebase console, klik Firestore Database .
  2. Klik tab Rules di bagian Cloud Firestore (atau klik di sini untuk langsung menuju ke sana).
  3. Ganti defaultnya dengan aturan berikut, lalu klik Publikasikan .

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;
      }
    }
  }
}

Aturan ini membatasi akses untuk memastikan bahwa klien hanya melakukan perubahan yang aman. Misalnya:

  • Pembaruan pada dokumen restoran hanya dapat mengubah peringkat, bukan nama atau data lainnya yang tidak dapat diubah.
  • Peringkat hanya dapat dibuat jika ID pengguna cocok dengan pengguna yang login, sehingga mencegah spoofing.

Selain menggunakan Firebase console, Anda dapat menggunakan Firebase CLI untuk menerapkan aturan ke proyek Firebase Anda. File firestore.rules di direktori kerja Anda sudah berisi aturan di atas. Untuk men-deploy aturan ini dari sistem file lokal (daripada menggunakan Firebase console), jalankan perintah berikut:

firebase deploy --only firestore:rules

13. Kesimpulan

Dalam codelab ini, Anda mempelajari cara melakukan pembacaan dan penulisan dasar dan lanjutan dengan Cloud Firestore, serta cara mengamankan akses data dengan aturan keamanan. Anda dapat menemukan solusi lengkapnya di repositori quickstarts-js .

Untuk mempelajari lebih lanjut tentang Cloud Firestore, kunjungi sumber daya berikut:

14. [Opsional] Terapkan dengan App Check

Firebase App Check memberikan perlindungan dengan membantu memvalidasi dan mencegah traffic yang tidak diinginkan ke aplikasi Anda. Pada langkah ini, Anda akan mengamankan akses ke layanan Anda dengan menambahkan App Check dengan reCAPTCHA Enterprise .

Pertama, Anda harus mengaktifkan App Check dan reCaptcha.

Mengaktifkan reCaptcha Enterprise

  1. Di Cloud Console, temukan dan pilih reCaptcha Enterprise di bagian Keamanan.
  2. Aktifkan layanan seperti yang diminta, dan klik Buat Kunci .
  3. Masukkan nama tampilan seperti yang diminta, dan pilih Situs Web sebagai jenis platform Anda.
  4. Tambahkan URL yang Anda terapkan ke daftar Domain , dan pastikan opsi "Gunakan tantangan kotak centang" tidak dipilih .
  5. Klik Buat Kunci , dan simpan kunci yang dihasilkan di suatu tempat untuk diamankan. Anda akan membutuhkannya nanti di langkah ini.

Mengaktifkan Pemeriksaan Aplikasi

  1. Di Firebase console, temukan bagian Build di panel kiri.
  2. Klik App Check , lalu klik tombol Get Started (atau arahkan langsung ke console ).
  3. Klik Daftar dan masukkan kunci reCaptcha Enterprise Anda saat diminta, lalu klik Simpan .
  4. Di Tampilan API, pilih Penyimpanan dan klik Terapkan . Lakukan hal yang sama untuk Cloud Firestore .

Pemeriksaan Aplikasi sekarang harus diterapkan! Segarkan aplikasi Anda dan coba buat/lihat restoran. Anda harus mendapatkan pesan kesalahan:

Uncaught Error in snapshot listener: FirebaseError: [code=permission-denied]: Missing or insufficient permissions.

Ini berarti App Check memblokir permintaan yang tidak divalidasi secara default. Sekarang mari tambahkan validasi ke aplikasi Anda.

Navigasikan ke file FriendlyEats.View.js , dan perbarui fungsi initAppCheck dan tambahkan kunci reCaptcha Anda untuk menginisialisasi App Check.

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.
  );
};

Instance appCheck diinisialisasi dengan ReCaptchaEnterpriseProvider dengan kunci Anda, dan isTokenAutoRefreshEnabled memungkinkan token untuk di-refresh secara otomatis di aplikasi Anda.

Untuk mengaktifkan pengujian lokal, temukan bagian tempat aplikasi diinisialisasi dalam file FriendlyEats.js , dan tambahkan baris berikut ke fungsi FriendlyEats.prototype.initAppCheck :

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

Ini akan mencatat token debug di konsol aplikasi web lokal Anda seperti:

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.

Sekarang, buka Tampilan Aplikasi dari App Check di Firebase console.

Klik menu tambahan, lalu pilih Kelola token debug .

Lalu, klik Tambahkan token debug dan tempelkan token debug dari konsol Anda seperti yang diminta.

Selamat! App Check sekarang seharusnya berfungsi di aplikasi Anda.