Codelab Web App Check

1. Pengantar

Terakhir Diperbarui: 23-02-2023

Bagaimana cara mencegah akses tidak sah ke resource Firebase Anda?

Anda dapat menggunakan Firebase App Check untuk mencegah klien yang tidak sah mengakses resource backend Anda dengan mewajibkan permintaan masuk disertai dengan pengesahan bahwa permintaan berasal dari aplikasi asli Anda dan dengan memblokir traffic yang tidak memiliki pengesahan yang tepat. Firebase App Check mengandalkan penyedia pengesahan khusus platform untuk memverifikasi keaslian klien: untuk aplikasi web, App Check mendukung reCAPTCHA v3 dan reCAPTCHA Enterprise sebagai penyedia pengesahan.

App Check dapat digunakan untuk melindungi permintaan ke Cloud Firestore, Realtime Database, Cloud Functions, Firebase Authentication dengan Identity Platform, dan di backend yang Anda hosting sendiri.

Hal yang akan Anda build

Dalam codelab ini, Anda akan mengamankan aplikasi chat dengan menambahkan dan kemudian menerapkan App Check.

Hal yang akan Anda pelajari

• Cara memantau backend Anda untuk mendeteksi akses yang tidak sah
• Cara menambahkan penerapan ke Firestore dan Cloud Storage
• Cara menjalankan aplikasi dengan token debug untuk pengembangan lokal

Hal yang akan Anda perlukan

• IDE/editor teks pilihan Anda
• Pengelola paket npm, yang biasanya disertakan dengan Node.js
• Firebase CLI diinstal dan dikonfigurasi untuk bekerja dengan akun Anda
• Terminal/konsol
• Browser pilihan Anda, seperti Chrome
• Kode contoh codelab (Lihat langkah berikutnya dalam codelab untuk mengetahui cara mendapatkan kode.)

2. Mendapatkan kode contoh

Clone repositori GitHub codelab dari command line:

git clone https://github.com/firebase/codelab-friendlychat-web

Atau, jika Anda belum menginstal Git, Anda dapat mendownload repositori sebagai file ZIP.

Repositori friendlychat-web berisi project contoh untuk beberapa platform.

Codelab ini hanya menggunakan dua folder berikut:

• 📁 appcheck-start: Kode awal yang akan Anda kerjakan selama codelab ini.
• 📁 appcheck: Kode lengkap untuk contoh aplikasi yang sudah selesai.

Catatan: Jika ingin menjalankan aplikasi yang sudah selesai, Anda harus membuat project Firebase di Firebase console (lihat bagian Buat dan siapkan project Firebase di codelab ini untuk mengetahui petunjuknya).

Mengimpor aplikasi awal

Menggunakan IDE, buka atau impor direktori 📁 appcheck-start dari repositori yang di-clone. Direktori 📁 appcheck-start ini berisi kode awal untuk codelab, yang akan menjadi aplikasi web chat yang berfungsi penuh. Direktori 📁 appcheck akan memiliki kode yang sudah selesai untuk codelab.

3. Membuat dan menyiapkan project Firebase

Membuat project Firebase

1. Login ke Firebase console menggunakan Akun Google Anda.
2. Klik tombol untuk membuat project baru, lalu masukkan nama project (misalnya, FriendlyChat).
   

   Nama project ini digunakan sebagai nama tampilan di antarmuka Firebase, dan Firebase akan otomatis membuat project ID unik berdasarkan nama project ini. Perhatikan bahwa Anda dapat mengklik ikon Edit sekarang untuk menetapkan project ID pilihan Anda, tetapi Anda tidak dapat mengubah ID ini setelah project dibuat.

   Ingat project ID Anda karena Anda akan memerlukannya nanti untuk mengidentifikasi project Firebase Anda di Firebase CLI. Jika lupa ID, Anda dapat menemukannya nanti di Setelan Project.

3. Klik Lanjutkan.
4. Jika diminta, tinjau dan setujui persyaratan Firebase, lalu klik Continue.
5. (Opsional) Aktifkan bantuan AI di Firebase console (disebut "Gemini di Firebase").
6. Untuk codelab ini, Anda tidak memerlukan Google Analytics, jadi nonaktifkan opsi Google Analytics.
7. Klik Buat project, tunggu hingga project Anda disediakan, lalu klik Lanjutkan.

Mengupgrade paket harga Firebase Anda

Untuk menggunakan Cloud Storage for Firebase, project Firebase Anda harus menggunakan paket harga bayar sesuai penggunaan (Blaze), yang berarti project tersebut ditautkan ke akun Penagihan Cloud.

• Akun Penagihan Cloud memerlukan metode pembayaran, seperti kartu kredit.
• Jika Anda baru menggunakan Firebase dan Google Cloud, periksa apakah Anda memenuhi syarat untuk mendapatkan kredit sebesar$300 dan akun Penagihan Cloud Uji Coba Gratis.
• Jika Anda melakukan codelab ini sebagai bagian dari acara, tanyakan kepada penyelenggara apakah ada kredit Cloud yang tersedia.

Untuk mengupgrade project Anda ke paket Blaze, ikuti langkah-langkah berikut:

1. Di Firebase console, pilih upgrade your plan.
2. Pilih paket Blaze. Ikuti petunjuk di layar untuk menautkan akun Penagihan Cloud ke project Anda.
   Jika perlu membuat akun Penagihan Cloud sebagai bagian dari upgrade ini, Anda mungkin perlu kembali ke alur upgrade di Firebase console untuk menyelesaikan upgrade.

Catatan: Anda dapat mendowngrade project ke paket harga tanpa biaya (Spark) setelah menyelesaikan codelab ini.

Menambahkan aplikasi web Firebase ke project

1. Klik ikon web untuk membuat aplikasi web Firebase baru.
2. Daftarkan aplikasi dengan nama panggilan Friendly Chat, lalu centang kotak di samping Also set up Firebase Hosting for this app. Klik Register app.
3. Pada langkah berikutnya, Anda akan melihat perintah untuk menginstal Firebase menggunakan npm dan objek konfigurasi. Anda akan menyalin objek ini nanti di codelab, jadi untuk saat ini, tekan Berikutnya.

4. Kemudian, Anda akan melihat opsi untuk menginstal Firebase CLI. Jika Anda belum menginstalnya, lakukan sekarang menggunakan perintah npm install -g firebase-tools. Kemudian klik Berikutnya.
5. Kemudian, Anda akan melihat opsi untuk login ke Firebase dan men-deploy ke Firebase Hosting. Lanjutkan dan login ke Firebase menggunakan perintah firebase login, lalu klik Continue to Console. Anda akan men-deploy ke Firebase Hosting pada langkah berikutnya.

Menyiapkan produk Firebase

Aplikasi yang akan kita buat menggunakan produk Firebase yang tersedia untuk aplikasi web:

• Firebase Authentication memudahkan pengguna untuk login ke aplikasi Anda.
• Cloud Firestore untuk menyimpan data terstruktur di cloud dan mendapatkan notifikasi instan saat data berubah.
• Cloud Storage for Firebase untuk menyimpan file di cloud.
• Firebase Hosting untuk menghosting dan menayangkan aset Anda.
• Firebase Cloud Messaging untuk mengirim notifikasi push dan menampilkan notifikasi pop-up browser.
• Firebase Performance Monitoring untuk mengumpulkan data performa pengguna untuk aplikasi Anda.

Beberapa produk ini memerlukan konfigurasi khusus atau perlu diaktifkan menggunakan Firebase console.

Mengaktifkan Login dengan Google untuk Firebase Authentication

Untuk mengizinkan pengguna login ke aplikasi web dengan Akun Google mereka, kita akan menggunakan metode login dengan Google.

Anda harus mengaktifkan Login dengan Google:

1. Di Firebase console, temukan bagian Build di panel kiri.
2. Klik Authentication, klik Get Started jika berlaku, lalu klik tab Sign-in method (atau klik di sini untuk langsung membukanya).
3. Mengaktifkan penyedia login dengan Google
4. Tetapkan nama aplikasi yang terlihat oleh publik menjadi Friendly Chat dan pilih Email dukungan project dari menu dropdown.
5. Klik Save

Menyiapkan Cloud Firestore

Aplikasi web menggunakan Cloud Firestore untuk menyimpan pesan chat dan menerima pesan chat baru.

Berikut cara menyiapkan Cloud Firestore di project Firebase Anda:

1. Di panel kiri Firebase console, luaskan Build, lalu pilih Firestore database.
2. Klik Create database.
3. Biarkan Database ID ditetapkan ke (default).
4. Pilih lokasi untuk database Anda, lalu klik Berikutnya.
   Untuk aplikasi yang sebenarnya, Anda harus memilih lokasi yang dekat dengan pengguna.
5. Klik Mulai dalam mode pengujian. Baca pernyataan penyangkalan tentang aturan keamanan.
   Di codelab ini, Anda akan menambahkan Aturan Keamanan untuk mengamankan data. Jangan mendistribusikan atau mengekspos aplikasi ke publik tanpa menambahkan Aturan Keamanan untuk database Anda.
6. Klik Buat.

Menyiapkan Cloud Storage for Firebase

Aplikasi web menggunakan Cloud Storage for Firebase untuk menyimpan, mengupload, dan membagikan gambar.

Berikut cara menyiapkan Cloud Storage for Firebase di project Firebase Anda:

1. Di panel kiri Firebase console, luaskan Build, lalu pilih Storage.
2. Klik Get started.
3. Pilih lokasi untuk bucket Storage default Anda.
   Bucket di US-WEST1, US-CENTRAL1, dan US-EAST1 dapat memanfaatkan paket"Selalu Gratis" untuk Google Cloud Storage. Bucket di semua lokasi lainnya mengikuti harga dan penggunaan Google Cloud Storage.
4. Klik Mulai dalam mode pengujian. Baca pernyataan penyangkalan tentang aturan keamanan.
   Di codelab ini, Anda akan menambahkan aturan keamanan untuk mengamankan data. Jangan mendistribusikan atau mengekspos aplikasi ke publik tanpa menambahkan Aturan Keamanan untuk bucket Storage Anda.
5. Klik Buat.

4. Mengonfigurasi Firebase

Dari direktori appcheck-start, panggil:

firebase use --add

Jika diminta, pilih Project ID Anda, lalu berikan alias untuk project Firebase Anda. Untuk project ini, Anda cukup memberikan alias default. Selanjutnya, Anda harus mengonfigurasi project lokal agar berfungsi dengan Firebase.

1. Buka Project settings di Firebase console
2. Di kartu "Aplikasi Anda", pilih nama panggilan aplikasi yang memerlukan objek konfigurasi.
3. Pilih Config dari panel cuplikan Firebase SDK.
4. Salin cuplikan objek config, lalu tambahkan ke appcheck-start/hosting/src/firebase-config.js. Bagian codelab lainnya mengasumsikan variabel diberi nama config.

firebase-config.js

const config = {
  apiKey: "API_KEY",
  authDomain: "PROJECT_ID.firebaseapp.com",
  databaseURL: "https://PROJECT_ID.firebaseio.com",
  projectId: "PROJECT_ID",
  storageBucket: "PROJECT_ID.firebasestorage.app",
  messagingSenderId: "SENDER_ID",
  appId: "APP_ID",
  measurementId: "G-MEASUREMENT_ID",
};

Kode di atas harus berisi objek konfigurasi Firebase khusus aplikasi Anda, bukan nilai placeholder.

Dari direktori appcheck-start yang sama, lalu panggil:

firebase experiments:enable webframeworks

Hal ini memungkinkan dukungan framework web yang digunakan untuk membangun project ini.

Kita sudah siap untuk menjalankan project dan menguji apakah project default berfungsi.

5. Mencoba aplikasi tanpa App Check

Setelah aplikasi dikonfigurasi dan SDK disiapkan, coba gunakan aplikasi seperti yang dirancang semula. Pertama, mulai dengan menginstal semua dependensi. Dari terminal, buka direktori appcheck-start/hosting. Saat berada di dalam direktori tersebut, jalankan npm install. Tindakan ini akan mengambil semua dependensi agar project Anda dapat berfungsi. Untuk memulai aplikasi dalam statusnya saat ini, Anda dapat menjalankan firebase serve. Aplikasi meminta Anda untuk login dengan Akun Google; lakukan, lalu coba posting beberapa pesan chat dan beberapa foto ke chat.

Setelah Anda mengujinya secara lokal, saatnya melihatnya dalam produksi. Jalankan firebase deploy untuk men-deploy aplikasi web ke web. Bagian ini merupakan langkah penting dalam mendemonstrasikan cara kerja App Check di dunia nyata karena memerlukan konfigurasi domain untuk penyedia pengesahan reCAPTCHA Enterprise.

Semoga Anda dapat merasakan kemampuan default yang disediakan aplikasi. Memposting pesan chat dan semua hal lainnya yang hanya boleh dilakukan dari aplikasi seperti ini. Kekurangan dari status saat ini adalah siapa pun yang memiliki konfigurasi aplikasi Anda dari langkah sebelumnya dapat mengakses resource backend Anda. Mereka tetap harus mematuhi aturan keamanan yang diterapkan oleh sistem Firestore dan Cloud Storage Anda, tetapi selain itu, mereka tetap dapat membuat kueri, menyimpan, dan mengakses data yang disimpan di sana.

Dalam beberapa langkah berikutnya, Anda akan:

• Mendaftar ke App Check
• Memvalidasi penegakan
• Mulai menerapkan aturan

6. Mengaktifkan App Check dan penerapan

Mari kita mulai dengan mengambil Kunci reCAPTCHA Enterprise untuk project Anda dan menambahkannya ke App Check. Anda dapat memulai dengan membuka bagian reCAPTCHA Enterprise di Google Cloud Console. Pilih project Anda, lalu Anda akan diminta untuk mengaktifkan reCAPTCHA Enterprise API. Aktifkan API dan tunggu beberapa menit hingga selesai. Kemudian, klik Create Key di samping Enterprise keys. Kemudian, di bagian ini, tentukan nama tampilan dan pilih kunci jenis Situs. Anda harus menentukan domain tempat aplikasi Anda dihosting. Karena Anda berencana menghostingnya di Firebase Hosting, Anda menggunakan nama hosting default yang umumnya adalah ${YOUR_PROJECT_ID}.web.app. Anda dapat menemukan domain hosting di bagian Hosting di Firebase Console. Setelah mengisi informasi ini, tekan Selesai dan Buat Kunci.

Setelah selesai, Anda akan melihat ID di bagian atas halaman Detail Utama.

Lanjutkan dan salin ID ini ke papan klip Anda. Ini adalah kunci yang Anda gunakan untuk App Check. Selanjutnya, buka bagian App Check di Firebase console, lalu klik Mulai. Kemudian, klik Daftar, lalu klik reCAPTCHA Enterprise dan masukkan ID yang disalin ke dalam kotak teks untuk Kunci Situs reCAPTCHA Enterprise. Biarkan setelan lainnya sebagai default. Halaman Pemeriksaan Aplikasi Anda akan terlihat seperti ini:

Permintaan yang belum diverifikasi dan tidak diterapkan

Setelah Anda memiliki kunci terdaftar dalam Firebase console, kembali jalankan situs Anda di browser dengan menjalankan firebase serve. Di sini, Anda menjalankan aplikasi web secara lokal dan dapat mulai membuat permintaan terhadap backend Firebase lagi. Saat permintaan dikirim ke backend Firebase, permintaan ini dipantau oleh App Check, tetapi tidak diterapkan. Jika ingin melihat status permintaan yang masuk, Anda dapat membuka bagian Cloud Firestore di tab API pada halaman App Check di Firebase console. Karena Anda belum mengonfigurasi klien untuk menggunakan App Check, Anda akan melihat sesuatu yang mirip dengan ini:

Backend memiliki 100% permintaan belum terverifikasi yang masuk. Layar ini berguna karena menunjukkan bahwa hampir semua permintaan klien berasal dari klien yang tidak mengintegrasikan App Check.

Dasbor ini dapat menunjukkan beberapa hal. Hal pertama yang dapat ditunjukkan adalah apakah semua aplikasi klien Anda menjalankan klien versi terbaru. Jika ya, Anda dapat menerapkan App Check dengan aman tanpa khawatir menonaktifkan akses untuk klien asli aplikasi Anda. Hal lain yang dapat Anda ketahui adalah berapa banyak upaya untuk mengakses backend Anda yang tidak berasal dari dalam aplikasi Anda. Hal ini mungkin merupakan pengguna yang membuat kueri backend Anda secara langsung tanpa sepengetahuan Anda. Karena Anda dapat melihat bahwa permintaan tidak terverifikasi, sekarang saatnya melihat apa yang akan terjadi pada pengguna yang mungkin memiliki permintaan yang tidak terverifikasi ke backend Anda sebelum Anda melanjutkan untuk memverifikasi permintaan mereka.

Permintaan yang tidak terverifikasi dan diterapkan

Lanjutkan dengan menekan tombol Terapkan dari layar sebelumnya, lalu tekan Terapkan lagi jika diminta.

Tindakan ini akan mulai menerapkan App Check; App Check kini akan memblokir permintaan ke layanan backend Anda yang tidak diverifikasi melalui penyedia pengesahan yang Anda pilih (dalam hal ini reCAPTCHA Enterprise). Kembali ke aplikasi web yang sedang berjalan dan seharusnya berjalan di http://localhost:5000. Saat Anda memuat ulang halaman, dan mencoba mendapatkan data dari database, tidak ada yang terjadi. Jika Anda membuka konsol Chrome untuk membaca error, Anda akan melihat sesuatu yang mirip dengan berikut ini:

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

Hal ini terjadi karena App Check memblokir permintaan yang tidak meneruskan token pengesahan yang valid dalam permintaannya ke resource Firebase Anda. Untuk saat ini, Anda dapat menonaktifkan penerapan App Check dan di bagian berikutnya, Anda akan mempelajari cara menambahkan App Check reCAPTCHA Enterprise ke contoh Friendly Chat.

7. Menambahkan kunci reCAPTCHA Enterprise ke situs

Kami akan menambahkan kunci perusahaan ke aplikasi Anda. Pertama, buka hosting/src/firebase-config.js dan tambahkan Kunci reCAPTCHA Enterprise Anda ke cuplikan kode berikut:

const reCAPTCHAEnterpriseKey = {
  // Replace with your recaptcha enterprise site key
  key: "Replace with your recaptcha enterprise site key"
};

Setelah selesai, buka hosting/src/index.js dan di baris 51, Anda akan menambahkan impor dari firebase-config.js untuk mengambil kunci reCAPTCHA dan juga mengimpor library App Check sehingga Anda dapat menggunakan penyedia reCAPTCHA Enterprise.

// add from here
 import {
   initializeAppCheck,
   ReCaptchaEnterpriseProvider,
 } from 'firebase/app-check';
// to here

// replace this line
import { getFirebaseConfig } from './firebase-config.js';
// with this line
import { getFirebaseConfig, getReCaptchaKey } from './firebase-config.js';

Kemudian, pada baris berikutnya, Anda akan membuat fungsi untuk menyiapkan App Check. Fungsi ini akan terlebih dahulu memeriksa apakah Anda berada di lingkungan pengembangan dan jika ya, mencetak token debug yang dapat Anda gunakan untuk pengembangan lokal.

import { getFirebaseConfig, getReCaptchaKey } from './firebase-config.js';
// add from here
 function setupAppCheck(app) {
   if(import.meta.env.MODE === 'development') {
     self.FIREBASE_APPCHECK_DEBUG_TOKEN = true;
   }
 }
// to here

Sekarang saatnya melakukan inisialisasi App Check agar berfungsi dengan penyedia yang Anda pilih–dalam hal ini, reCAPTCHA Enterprise. Kemudian, Anda juga ingin memperbarui token App Check secara otomatis di latar belakang, yang akan mencegah jenis penundaan apa pun dari pengguna yang berinteraksi dengan layanan Anda jika token App Check mereka sudah tidak berlaku.

function setupAppCheck(app) {
   if(import.meta.env.MODE === 'development') {
     self.FIREBASE_APPCHECK_DEBUG_TOKEN = true;
   }
// add from here
   // Create a ReCaptchaEnterpriseProvider instance using your reCAPTCHA Enterprise
   // site key and pass it to initializeAppCheck().
   initializeAppCheck(app, {
     provider: new ReCaptchaEnterpriseProvider(getReCaptchaKey()),
     isTokenAutoRefreshEnabled: true // Set to true to allow auto-refresh.
   });
// to here
 }

Terakhir, setelah memastikan bahwa aplikasi diinisialisasi, Anda harus memanggil fungsi setupAppCheck yang baru saja dibuat. Di bagian bawah file hosting/src/index.js, tambahkan panggilan ke metode yang baru saja Anda tambahkan.

const firebaseApp = initializeApp(getFirebaseConfig());
// add from here
setupAppCheck(firebaseApp);
// to here
getPerformance();
initFirebaseAuth();
loadMessages();

Uji secara lokal terlebih dahulu

Uji aplikasi Anda secara lokal terlebih dahulu. Jika Anda belum menayangkan aplikasi secara lokal, jalankan firebase serve. Anda akan melihat bahwa aplikasi masih gagal dimuat secara lokal. Hal ini karena Anda hanya mendaftarkan domain Firebase dengan penyedia pengesahan reCAPTCHA, bukan domain localhost. Anda tidak boleh mendaftarkan localhost sebagai domain yang disetujui karena hal ini memungkinkan pengguna mengakses backend terbatas Anda dari aplikasi yang berjalan secara lokal di komputer mereka. Sebagai gantinya, karena Anda menetapkan self.FIREBASE_APPCHECK_DEBUG_TOKEN = true, Anda harus memeriksa baris yang terlihat seperti ini di konsol JavaScript:

App Check debug token: 55183c20-de61-4438-85e6-8065789265be. You will need to add it to your app's App Check settings in the Firebase console for it to work.

Anda harus mengambil token debug yang diberikan (dalam contoh ini adalah : 55183c20-de61-4438-85e6-8065789265be) dan memasukkannya ke konfigurasi App Check di menu tambahan untuk aplikasi Anda.

Beri nama unik untuk token yang akan Anda ingat, lalu klik Simpan. Opsi ini memungkinkan Anda menggunakan token yang dibuat klien dengan aplikasi Anda, yang merupakan alternatif yang lebih aman daripada membuat token debug dan menyematkannya dalam aplikasi Anda. Menyematkan token dalam aplikasi dapat menyebabkan token didistribusikan secara tidak sengaja kepada pengguna akhir, dan pengguna akhir tersebut dapat mengeksploitasinya dengan melewati pemeriksaan Anda. Jika Anda ingin mendistribusikan token debug, misalnya, di lingkungan CI, baca dokumentasi ini untuk mempelajari lebih lanjut cara mendistribusikannya.

Setelah mendaftarkan token debug di Firebase console, Anda dapat mengaktifkan kembali penerapan App Check dan menguji pemuatan konten aplikasi secara lokal dengan memanggil firebase serve dari terminal. Anda akan melihat data yang sebelumnya dimasukkan ditayangkan ke aplikasi web versi lokal. Anda akan tetap melihat pesan dengan token debug yang dicetak ke konsol.

Coba di produksi

Setelah Anda yakin bahwa App Check berfungsi secara lokal, deploy aplikasi web ke produksi. Dari terminal Anda, panggil firebase deploy lagi dan muat ulang halaman. Tindakan ini akan mengemas aplikasi web Anda agar dapat berjalan di Firebase Hosting. Setelah aplikasi Anda dihosting di Firebase Hosting, coba buka aplikasi Anda di ${YOUR_PROJECT_ID}.web.app. Anda dapat membuka konsol JavaScript, dan tidak akan lagi melihat token debug yang dicetak di sana dan akan melihat chat dimuat di project Anda. Selain itu, setelah berinteraksi dengan aplikasi selama beberapa saat, Anda dapat membuka bagian App Check di Firebase console dan memvalidasi bahwa permintaan ke aplikasi Anda telah beralih menjadi semua terverifikasi.

8. Selamat!

Selamat, Anda berhasil menambahkan Firebase App Check ke Aplikasi Web.

Anda menyiapkan Firebase console untuk menangani token reCAPTCHA Enterprise untuk lingkungan produksi dan bahkan menyiapkan token debug untuk pengembangan lokal. Hal ini memastikan bahwa aplikasi Anda tetap dapat mengakses resource Firebase dari klien yang disetujui dan mencegah terjadinya aktivitas penipuan dari dalam aplikasi Anda.

Apa selanjutnya?

Lihat dokumentasi berikut untuk menambahkan Firebase App Check ke:

• Mengaktifkan Penerapan di Cloud Functions
• Memverifikasi token App Check di backend kustom

Dokumen referensi

• Mulai Menggunakan App Check dengan reCAPTCHA Enterprise di aplikasi web
• Menggunakan penyedia debug di aplikasi web