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 untuk dilampirkan dengan pengesahan bahwa permintaan tersebut 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 pada backend yang Anda hosting sendiri.
Hal yang akan Anda build
Dalam codelab ini, Anda akan mengamankan aplikasi chat dengan menambahkan terlebih dahulu, lalu menerapkan App Check.
Yang akan Anda pelajari
- Cara memantau backend Anda untuk mengetahui akses yang tidak sah
- Cara menambahkan penerapan ke Firestore dan Cloud Storage
- Cara menjalankan aplikasi dengan token debug untuk pengembangan lokal
Yang Anda butuhkan
- IDE/editor teks pilihan Anda
- npm pengelola paket, yang biasanya disertai dengan Node.js
- Firebase CLI yang diinstal dan dikonfigurasi agar berfungsi dengan akun Anda
- Terminal/konsol
- Browser pilihan Anda, seperti Chrome
- Kode contoh codelab (Lihat langkah codelab berikutnya 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 menggunakan IDE, buka atau impor direktori 🏏 appcheck-start dari repositori yang di-clone. Direktori \r appcheck-start berisi kode awal untuk codelab, yang akan menjadi aplikasi web chat yang berfungsi penuh. Direktori Backspace appcheck akan memiliki kode yang sudah selesai untuk codelab.
3. Membuat dan menyiapkan project Firebase
Membuat project Firebase
- Login ke Firebase.
- Di Firebase console, klik Tambahkan Project, lalu beri nama project Firebase Anda FriendlyChat. Ingat project ID untuk project Firebase Anda.
- Hapus centang Aktifkan Google Analytics untuk project ini
- Klik Create Project.
Aplikasi yang akan kita bangun menggunakan produk Firebase yang tersedia untuk aplikasi web:
- Firebase Authentication untuk memudahkan pengguna login ke aplikasi Anda.
- Cloud Firestore akan 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 aplikasi Anda.
Beberapa produk ini memerlukan konfigurasi khusus atau perlu diaktifkan menggunakan Firebase console.
Menambahkan aplikasi web Firebase ke project
- Klik ikon web
untuk membuat aplikasi web Firebase baru. - Daftarkan aplikasi dengan nama panggilan Friendly Chat, lalu centang kotak di samping Siapkan juga Firebase Hosting untuk aplikasi ini. Klik Register app.
- Pada langkah selanjutnya, Anda akan melihat perintah untuk menginstal Firebase menggunakan npm dan objek konfigurasi. Anda menyalin objek ini nanti di codelab, jadi untuk saat ini, tekan Next.
- 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. - Kemudian Anda 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 men-deploy ke Firebase hosting di langkah mendatang.
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:
- Di Firebase console, cari bagian Build di panel kiri.
- Klik Authentication, klik Mulai jika berlaku, lalu klik tab Metode login (atau klik di sini untuk langsung membukanya).
- Mengaktifkan penyedia login dengan Google
- Setel nama aplikasi Anda yang dapat dilihat publik menjadi Friendly Chat dan pilih email Dukungan project dari menu dropdown.
- Klik Save
Aktifkan Cloud Firestore
Aplikasi web menggunakan Cloud Firestore untuk menyimpan pesan chat dan menerima pesan chat baru.
Anda harus mengaktifkan Cloud Firestore:
- Di bagian Build Firebase console, klik Firestore Database.
- Klik Create database di panel Cloud Firestore.
- Pilih opsi Mulai dalam mode pengujian, lalu klik Berikutnya setelah membaca pernyataan penyangkalan tentang aturan keamanan.
Mode pengujian memastikan bahwa Anda dapat menulis ke database dengan bebas selama pengembangan. Anda memiliki aturan keamanan yang sudah ditulis untuk Anda di kode awal. Anda akan menggunakannya untuk codelab ini.
- Tetapkan lokasi penyimpanan data Cloud Firestore. Anda dapat membiarkannya sebagai default atau memilih region yang dekat dengan Anda. Klik Enable untuk menyediakan Firestore.
Mengaktifkan Cloud Storage
Aplikasi web menggunakan Cloud Storage for Firebase untuk menyimpan, mengupload, dan membagikan gambar.
Anda harus mengaktifkan Cloud Storage:
- Di bagian Build Firebase console, klik Storage.
- Jika tidak ada tombol Mulai, artinya Cloud Storage sudah diaktifkan, dan Anda tidak perlu mengikuti langkah-langkah di bawah.
- Klik Mulai.
- Pilih opsi Mulai dalam mode pengujian, lalu klik Berikutnya setelah membaca pernyataan penyangkalan tentang aturan keamanan.
Dengan aturan keamanan default, setiap pengguna terautentikasi dapat menulis apa pun ke Cloud Storage. Kita akan men-deploy aturan keamanan yang sudah ditulis untuk kita nanti dalam codelab ini.
- Lokasi Cloud Storage telah dipilih sebelumnya dengan region yang sama dengan yang Anda pilih untuk database Cloud Firestore. Klik Selesai untuk menyelesaikan penyiapan.
4. Mengonfigurasi Firebase
Dari direktori appcheck-start, panggil:
firebase use --add
Saat diminta, pilih Project ID Anda, lalu berikan alias untuk project Firebase Anda. Untuk project ini, Anda cukup memberikan alias default. Berikutnya, Anda harus mengonfigurasi project lokal agar dapat digunakan dengan Firebase.
- Buka Project settings di Firebase console
- Di kartu "Aplikasi Anda", pilih nama panggilan aplikasi yang memerlukan objek konfigurasi.
- Pilih Config dari panel cuplikan Firebase SDK.
- Salin cuplikan objek konfigurasi, lalu tambahkan ke
appcheck-start/hosting/src/firebase-config.js. Bagian codelab lainnya mengasumsikan bahwa 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.appspot.com",
messagingSenderId: "SENDER_ID",
appId: "APP_ID",
measurementId: "G-MEASUREMENT_ID",
};
Dari direktori appcheck-start yang sama, panggil:
firebase experiments:enable webframeworks
Tindakan ini akan mengaktifkan dukungan framework web yang digunakan untuk membuat project ini.
Kita harus siap sekarang untuk menjalankan project Anda dan menguji apakah project default berfungsi.
5. Coba aplikasi tanpa App Check
Setelah aplikasi Anda dikonfigurasi dan SDK disiapkan, coba gunakan aplikasi seperti yang awalnya dirancang. Pertama, mulailah dengan menginstal semua dependensi. Dari terminal Anda, 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 status saat ini, Anda dapat menjalankan firebase serve. Aplikasi meminta Anda untuk masuk dengan akun Google. Lakukan, lalu coba posting beberapa pesan chat dan beberapa foto ke chat.
Setelah Anda mengujinya secara lokal, saatnya untuk melihatnya dalam produksi. Jalankan firebase deploy untuk men-deploy aplikasi web ke web. Bagian ini merupakan langkah penting dalam menunjukkan cara kerja App Check di dunia nyata karena memerlukan konfigurasi domain untuk penyedia pengesahan reCAPTCHA Enterprise.
Mudah-mudahan, Anda sedang menggunakan kemampuan default yang disediakan aplikasi. Memposting pesan chat dan hal-hal lain yang seharusnya hanya dilakukan dari aplikasi seperti ini. Kelemahan 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. Namun, mereka masih dapat mengkueri, menyimpan, dan mengakses data yang disimpan di sana.
Dalam beberapa langkah berikutnya, Anda akan:
- Mendaftar ke App Check
- Validasi penerapan
- Mulai menerapkan aturan
6. Mengaktifkan App Check dan penerapan
Mari mulai dengan mengambil Kunci reCAPTCHA Enterprise untuk project Anda dan menambahkannya ke App Check. Mulailah 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 sampai selesai. Kemudian, klik Buat Kunci di samping Kunci perusahaan. Kemudian, di bagian ini, tentukan nama tampilan dan pilih kunci jenis Website. Anda perlu menentukan domain tempat aplikasi Anda dihosting. Karena Anda berencana menghosting hal ini di Firebase Hosting, Anda menggunakan nama hosting default yang umumnya ${YOUR_PROJECT_ID}.web.app. Anda dapat menemukan domain hosting di bagian bagian Hosting di Firebase Console. Setelah mengisi informasi ini, tekan Selesai dan Buat Kunci.
Setelah selesai, Anda akan melihat ID di bagian atas halaman Key Details.
Lanjutkan dan salin ID ini ke papan klip. Ini adalah kunci yang Anda gunakan untuk App Check. Selanjutnya, buka bagian App Check di Firebase console, lalu klik Mulai. Kemudian, klik Register, lalu klik reCAPTCHA Enterprise dan masukkan ID yang disalin ke kotak teks untuk reCAPTCHA Enterprise Site Key. Biarkan setelan lainnya sesuai default. Halaman App Check Anda akan terlihat seperti ini:
Permintaan belum diverifikasi dan tidak diterapkan
Setelah memiliki kunci yang terdaftar di Firebase console, kembali jalankan situs Anda di browser dengan menjalankan firebase serve. Di sini, Anda memiliki aplikasi web yang berjalan secara lokal dan Anda dapat mulai membuat permintaan terhadap backend Firebase lagi. 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 sesuatu yang mirip seperti ini:
Backend memiliki 100% permintaan belum terverifikasi yang masuk. Layar ini berguna karena menunjukkan bahwa hampir semua permintaan klien berasal dari klien yang tidak terintegrasi dengan App Check.
Dasbor ini dapat menunjukkan beberapa hal. Hal pertama yang bisa ditunjukkan adalah apakah semua aplikasi klien Anda menjalankan versi terbaru klien Anda. Jika ya, Anda dapat menerapkan App Check dengan aman tanpa perlu khawatir harus menonaktifkan akses untuk klien asli aplikasi Anda. Hal lain yang mungkin Anda ketahui dari data ini adalah jumlah upaya yang masuk untuk mengakses backend tanpa datang dari dalam aplikasi. Ini mungkin berupa pengguna yang mengajukan kueri backend secara langsung tanpa sepengetahuan Anda. Karena Anda dapat melihat bahwa permintaan tidak diverifikasi, saatnya untuk melihat apa yang akan terjadi pada pengguna tersebut yang mungkin memiliki permintaan yang belum diverifikasi ke backend Anda sebelum Anda melanjutkan ke verifikasi permintaan mereka.
Permintaan yang Belum Diverifikasi dan diterapkan
Lanjutkan dan tekan tombol Enforce dari layar sebelumnya, kemudian tekan Enforce lagi jika diminta.
Tindakan ini akan mulai menerapkan App Check dan sekarang 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 sudah berjalan di http://localhost:5000. Tidak ada yang terjadi saat Anda memuat ulang halaman dan mencoba mendapatkan data dari database. Jika Anda membuka konsol Chrome untuk membaca error, Anda akan melihat sesuatu yang mirip seperti berikut:
Uncaught Error in snapshot listener: FirebaseError: [code=permission-denied]: Missing or insufficient permissions.
Ini adalah permintaan pemblokiran App Check 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 reCAPTCHA Enterprise App Check ke contoh Chat yang Ramah.
7. Tambahkan kunci reCAPTCHA Enterprise ke situs
Kita 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 bekerja dengan 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. Pertama-tama, fungsi ini akan memeriksa apakah Anda berada di lingkungan pengembangan. Jika demikian, Anda akan mencetak token debug yang dapat digunakan 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 adalah reCAPTCHA Enterprise. Anda juga perlu memperbarui token App Check secara otomatis di latar belakang, yang akan mencegah segala jenis penundaan 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 perlu memanggil fungsi setupAppCheck yang baru saja Anda buat. Di bagian bawah file hosting/src/index.js, tambahkan panggilan ke metode yang baru saja ditambahkan.
const firebaseApp = initializeApp(getFirebaseConfig());
// add from here
setupAppCheck(firebaseApp);
// to here
getPerformance();
initFirebaseAuth();
loadMessages();
Menguji secara lokal terlebih dahulu
Uji aplikasi Anda secara lokal terlebih dahulu. Jika Anda belum melayani aplikasi secara lokal, jalankan firebase serve. Anda akan melihat bahwa aplikasi masih gagal dimuat secara lokal. Hal ini terjadi karena Anda hanya mendaftarkan domain Firebase dengan penyedia pengesahan reCAPTCHA dan 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, sebaiknya periksa di konsol JavaScript Anda untuk baris yang tampak 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 perlu mengambil token debug yang disediakan (dalam contoh kasus ini adalah : 55183c20-de61-4438-85e6-8065789265be) dan mencolokkannya ke konfigurasi App Check di menu tambahan untuk aplikasi Anda.
Beri nama unik pada 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 di dalam aplikasi dapat menyebabkan token tersebut didistribusikan secara tidak sengaja kepada pengguna akhir, dan pengguna akhir tersebut dapat mengeksploitasinya dengan mengabaikan pemeriksaan Anda. Jika Anda ingin mendistribusikan token debug, misalnya, di lingkungan CI, baca dokumentasi ini untuk mempelajari lebih lanjut cara mendistribusikannya.
Setelah memiliki token debug yang 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 disajikan ke versi lokal aplikasi web. Anda akan tetap melihat pesan dengan token debug yang dicetak di konsol.
Coba di produksi
Setelah Anda yakin bahwa App Check dapat berfungsi secara lokal, deploy aplikasi web ke produksi. Dari terminal Anda, panggil firebase deploy lagi dan muat ulang halaman. Ini akan mengemas aplikasi web Anda untuk dijalankan di Firebase Hosting. Setelah aplikasi dihosting di Firebase Hosting, coba kunjungi aplikasi Anda di ${YOUR_PROJECT_ID}.web.app. Anda dapat membuka konsol JavaScript, dan seharusnya tidak lagi melihat token debug yang tercetak di sana dan akan melihat chat dimuat dalam 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 ke semuanya diverifikasi.
8. Selamat!
Selamat, Anda berhasil menambahkan Firebase App Check ke Aplikasi Web.
Anda telah 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: