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 berkepentingan mengakses resource backend Anda dengan mewajibkan permintaan masuk untuk disertakan 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 host sendiri.

Hal yang akan Anda build

Dalam codelab ini, Anda akan mengamankan aplikasi chat dengan menambahkan lalu menerapkan Pemeriksaan Aplikasi terlebih dahulu.

Aplikasi chat awal yang mudah digunakan dan dibuat oleh Anda.

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 agar berfungsi dengan akun Anda
  • Terminal/konsol
  • Browser pilihan Anda, seperti Chrome
  • Kode contoh codelab (Lihat langkah berikutnya di 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 belum menginstal Git, Anda dapat mendownload repositori sebagai file ZIP.

Mengimpor aplikasi awal

Dengan 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.
  2. Di Firebase console, klik Tambahkan Project, lalu beri nama project Firebase Anda FriendlyChat. Ingat project ID untuk project Firebase Anda.
  3. Hapus centang pada Aktifkan Google Analytics untuk project ini
  4. Klik Create Project.

Aplikasi yang akan kita build 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.

Mengupgrade paket harga Firebase Anda

Untuk menggunakan Cloud Storage for Firebase, project Firebase Anda harus menggunakan paket harga bayar sesuai pemakaian (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.

Menambahkan aplikasi web Firebase ke project

  1. Klik ikon web 58d6543a156e56f9.png 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.

Jendela tambahkan Firebase ke aplikasi web

  1. 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.
  2. Kemudian, Anda akan melihat opsi untuk login ke Firebase dan men-deploy ke Firebase Hosting. Login ke Firebase menggunakan perintah firebase login, lalu klik Continue to Console. Anda akan men-deploy ke Firebase Hosting pada langkah berikutnya.

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 dapat dilihat publik ke Friendly Chat dan pilih email dukungan Project dari menu dropdown.
  5. Klik Save

f96888973c3d00cc.png

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 adalah cara menyiapkan Cloud Storage for Firebase di project Firebase Anda:

  1. Di panel kiri Firebase console, luaskan Build, lalu pilih Storage.
  2. Klik Mulai.
  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, 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 konfigurasi, lalu tambahkan ke appcheck-start/hosting/src/firebase-config.js. Bagian codelab lainnya mengasumsikan bahwa variabel tersebut bernama 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",
};

Dari direktori appcheck-start yang sama, lalu panggil:

firebase experiments:enable webframeworks

Hal ini memungkinkan dukungan framework web yang digunakan untuk mem-build project ini.

Sekarang kita siap untuk menjalankan project dan menguji apakah project default berfungsi.

5. Mencoba aplikasi tanpa App Check

Setelah mengonfigurasi aplikasi dan menyiapkan SDK, coba gunakan aplikasi seperti yang awalnya dirancang. Pertama, mulailah 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 berfungsi. Untuk memulai aplikasi dalam status saat ini, Anda dapat menjalankan firebase serve. Aplikasi meminta Anda untuk login dengan Akun Google; lakukan login, lalu coba posting beberapa pesan chat dan beberapa foto ke chat.

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

Semoga Anda mengalami kemampuan default yang disediakan aplikasi. Memposting pesan chat dan hal lainnya yang hanya boleh dilakukan dari aplikasi seperti ini. Kelemahan 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 jika tidak, 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 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 Firebase Console. Setelah mengisi informasi ini, tekan Done dan Create Key.

Layar pembuatan kunci reCAPTCHA

Setelah selesai, Anda akan melihat ID di bagian atas halaman Key Details.

Jendela pendaftaran reCAPTCHA Enterprise

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

Jendela aplikasi App Check tempat Anda mendaftarkan token reCAPTCHA Enterprise

Permintaan yang belum diverifikasi dan tidak diterapkan

Setelah memiliki kunci terdaftar dalam Firebase console, kembali jalankan situs Anda di browser dengan menjalankan firebase serve. Di sini, Anda memiliki aplikasi web yang berjalan secara lokal dan dapat mulai membuat permintaan lagi ke backend Firebase. Karena permintaan bertentangan dengan 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 tampilan seperti ini:

Dasbor App Check yang menampilkan 100% permintaan klien yang belum diverifikasi untuk aplikasi Anda.

Backend memiliki 100% permintaan yang belum terverifikasi. 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 demikian, Anda dapat menerapkan App Check dengan aman tanpa perlu khawatir menonaktifkan akses untuk klien asli aplikasi Anda. Hal lain yang dapat Anda ketahui adalah jumlah upaya untuk mengakses backend yang masuk tanpa berasal dari dalam aplikasi Anda. Hal ini mungkin pengguna yang mengkueri backend Anda secara langsung tanpa sepengetahuan Anda. Karena Anda dapat melihat bahwa permintaan tidak diverifikasi, saatnya untuk melihat apa yang akan terjadi pada pengguna yang mungkin memiliki permintaan yang tidak diverifikasi ke backend Anda sebelum Anda melanjutkan untuk memverifikasi permintaan mereka.

Permintaan yang tidak diverifikasi dan diterapkan

Tekan tombol Terapkan dari layar sebelumnya, lalu tekan Terapkan lagi jika diminta.

Dasbor metrik yang belum diverifikasi dengan tombol Terapkan yang ditandai

Tindakan ini akan mulai menerapkan App Check; sekarang App Check 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 membuka konsol Chrome untuk membaca error, Anda akan melihat tampilan yang mirip dengan berikut:

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

Ini adalah permintaan pemblokiran App Check yang tidak lulus 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 pada 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 pertama-tama akan 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 menginisialisasi App Check agar berfungsi dengan penyedia yang Anda pilih–dalam hal ini, reCAPTCHA Enterprise. Kemudian, Anda juga dapat memuat ulang 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 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 Anda yang dibatasi dari aplikasi yang berjalan secara lokal di komputer mereka. Sebagai gantinya, karena Anda menetapkan self.FIREBASE_APPCHECK_DEBUG_TOKEN = true, sebaiknya periksa baris di konsol JavaScript yang terlihat seperti ini:

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 disediakan (dalam contoh kasus ini adalah : 55183c20-de61-4438-85e6-8065789265be) dan memasukkannya ke konfigurasi App Check di bagian menu tambahan untuk aplikasi Anda.

Dasbor App Check yang menunjukkan lokasi Manage Debug Tokens

Beri token nama unik 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 tersebut tidak sengaja didistribusikan kepada pengguna akhir, dan pengguna akhir tersebut dapat memanfaatkannya dengan mengabaikan pemeriksaan Anda. Jika Anda ingin mendistribusikan token debug, misalnya, di lingkungan CI, baca dokumentasi ini untuk mempelajari lebih lanjut cara mendistribusikannya.

Contoh pengisian token debug dengan alias

Setelah token debug terdaftar di Firebase console, Anda dapat mengaktifkan kembali penerapan App Check dan menguji apakah konten aplikasi dimuat 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.

Mencobanya dalam produksi

Setelah Anda yakin bahwa App Check berfungsi secara lokal, deploy aplikasi web ke produksi. Dari terminal, panggil firebase deploy lagi dan muat ulang halaman. Tindakan ini akan memaketkan aplikasi web Anda untuk dijalankan di Firebase Hosting. Setelah aplikasi 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 diubah menjadi semua diverifikasi.

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 masih dapat mengakses resource Firebase dari klien yang disetujui dan mencegah aktivitas penipuan terjadi dari dalam aplikasi Anda.

Apa selanjutnya?

Lihat dokumentasi berikut untuk menambahkan Firebase App Check ke:

Dokumen referensi