1. Sebelum memulai
Yang akan Anda bangun.
Dalam codelab ini, Anda akan menggunakan App Check untuk menambahkan lapisan perlindungan lain ke kunci API yang digunakan di lingkungan web.
Secara khusus, langkah-langkah berikut akan diikuti melalui Codelab untuk menggabungkan fungsi:
- Buat halaman web untuk menghosting Peta menggunakan Google Maps Platform Javascript API.
- Hosting halaman agar dapat diakses secara online.
- Batasi domain dan API yang dapat menggunakan API menggunakan Konsol Cloud.
- Tambahkan dan lakukan inisialisasi library App Check melalui Firebase.
- Tambahkan penyedia pengesahan untuk memeriksa validitas aplikasi.
- Menerapkan pemeriksaan di aplikasi dan monitor Anda.
Di akhir codelab, Anda akan memiliki situs yang berfungsi dan menerapkan keamanan pada kunci API yang digunakan, domain tempat kunci API diakses, dan jenis aplikasi yang dapat menggunakannya.
2. Prasyarat
Mengaktifkan App Check memerlukan penggunaan tiga layanan Google untuk memberikan perlindungan. Anda harus memahami area ini.
Firebase - Ini menyediakan penegakan layanan yang memeriksa bahwa kunci API dirujuk dari domain yang sesuai. Hal ini juga akan menyediakan fungsi hosting dan deployment melalui penggunaan Firebase Studio.
reCAPTCHA - Menyediakan fungsi untuk memeriksa apakah manusia menggunakan aplikasi dan juga menyediakan kunci publik dan pribadi untuk menghubungkan Firebase ke domain aplikasi klien.
Google Cloud Platform - Ini menyediakan kunci API yang digunakan oleh Google Maps Platform dan Firebase serta pembatasan pada domain yang menggunakan kunci Maps.
Anda dapat melihat cara semua fungsi ini bekerja bersama dalam diagram arsitektur berikut:
Saat menggunakan App Check dan Google Maps Platform, elemen berikut bekerja sama untuk menentukan apakah permintaan berasal dari aplikasi dan pengguna yang valid, menggunakan pengesahan yang diberikan oleh penyedia pengesahan, dalam hal ini reCAPTCHA.
Hal ini dilakukan melalui penggunaan App Check SDK yang disediakan oleh Firebase, yang memeriksa validitas aplikasi yang memanggil dan kemudian memberikan token ke aplikasi yang digunakan untuk melakukan panggilan berikutnya ke Google Maps Platform Javascript API. Selanjutnya, Google Maps Platform Javascript API memeriksa validitas token yang diberikan dengan Firebase untuk memastikan token tersebut berasal dari domain yang benar dan juga melalui penyedia pengesahan dari pengguna yang valid.
Anda dapat menemukan detail selengkapnya tentang penggunaan App Check dan Maps JavaScript API di lokasi berikut dan Anda harus memahami langkah-langkah yang diperlukan.
https://developers.google.com/maps/documentation/javascript/maps-app-check
3. Memulai persiapan
Jika belum memiliki akun Google Cloud, Anda harus menyiapkan akun dengan penagihan diaktifkan pada awalnya. Ikuti petunjuk untuk membuatnya sebelum Anda memulai.
Menyiapkan Google Maps Platform
Jika Anda belum memiliki akun Google Cloud Platform dan project dengan penagihan diaktifkan, lihat panduan Memulai Google Maps Platform untuk membuat akun penagihan dan project.
- Di Cloud Console, klik menu drop-down project lalu pilih project yang ingin Anda gunakan untuk codelab ini.
- Aktifkan API dan SDK Google Maps Platform yang diperlukan untuk codelab ini di Google Cloud Marketplace. Untuk melakukannya, ikuti langkah-langkah dalam video ini atau dokumentasi ini.
- Buat kunci API di halaman Kredensial di Cloud Console. Anda dapat mengikuti langkah-langkah dalam video ini atau dokumentasi ini. Semua permintaan ke Google Maps Platform memerlukan kunci API.
Persyaratan Lainnya untuk Codelab ini
Untuk menyelesaikan codelab ini, Anda memerlukan akun, layanan, dan alat berikut:
- Pengetahuan dasar tentang JavaScript, HTML, dan CSS
- Akun Google Cloud dengan penagihan diaktifkan (seperti yang disebutkan)
- Kunci API Google Maps Platform dengan Maps JavaScript API diaktifkan (Tindakan ini akan dilakukan selama codelab).
- Pemahaman dasar tentang hosting dan deployment web (Anda akan dipandu dalam codelab ini). Hal ini akan dilakukan melalui Firebase console dan Firebase Studio.
- Browser web untuk melihat file saat Anda mengerjakannya.
4. Membuat halaman di Firebase Studio
Codelab ini tidak mengasumsikan bahwa Anda telah membuat aplikasi dan menggunakan Firebase Studio untuk membuat halaman guna menghosting aplikasi Peta dan men-deploy-nya ke Firebase untuk tujuan pengujian. Jika memiliki aplikasi yang sudah ada, Anda juga dapat menggunakannya, dengan mengubah domain host, cuplikan kode, dan kunci API yang sesuai untuk memastikan penerapan yang benar.
Buka Firebase Studio (memerlukan Akun Google) dan buat aplikasi Simple HTML baru. Anda mungkin harus mengklik tombol "See all templates" untuk menampilkan opsi ini atau cukup klik link ini untuk akses langsung.
Beri ruang kerja nama yang sesuai, seperti myappcheck-map (plus beberapa angka acak agar unik, angka ini akan ditambahkan untuk Anda). Firebase Studio kemudian akan membuat ruang kerja.
Setelah mengisi nama, Anda dapat mengklik tombol buat dan proses pembuatan project akan dimulai.
Setelah dibuat, Anda dapat mengganti teks dalam file index.html dengan kode berikut yang membuat halaman dengan peta di dalamnya.
<!doctype html>
<html>
<head>
<title>Secure Map</title>
<style>
#map {
height: 100%;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<h3>App Check Security Demo</h3>
<!--The div element for the map -->
<div id="map"></div>
<script>
(g => { var h, a, k, p = "The Google Maps JavaScript API", c = "google", l = "importLibrary", q = "__ib__", m = document, b = window; b = b[c] || (b[c] = {}); var d = b.maps || (b.maps = {}), r = new Set, e = new URLSearchParams, u = () => h || (h = new Promise(async (f, n) => { await (a = m.createElement("script")); e.set("libraries", [...r] + ""); for (k in g) e.set(k.replace(/[A-Z]/g, t => "_" + t[0].toLowerCase()), g[k]); e.set("callback", c + ".maps." + q); a.src = `https://maps.${c}apis.com/maps/api/js?` + e; d[q] = f; a.onerror = () => h = n(Error(p + " could not load.")); a.nonce = m.querySelector("script[nonce]")?.nonce || ""; m.head.append(a) })); d[l] ? console.warn(p + " only loads once. Ignoring:", g) : d[l] = (f, ...n) => r.add(f) && u().then(() => d[l](f, ...n)) })({
key: "YOUR_API_KEY",
v: "weekly",
// Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
// Add other bootstrap parameters as needed, using camel case.
});
</script>
<script>
let map;
async function initMap() {
const { Map } = await google.maps.importLibrary("maps");
map = new Map(document.getElementById("map"), {
center: { lat: 51.5208, lng: -0.0977 },
zoom: 17,
});
}
initMap();
</script>
</body>
</html>
Saat dijalankan, should ini akan memberikan halaman yang menampilkan peta aplikasi yang berfungsi seperti yang ditunjukkan dalam gambar, tetapi!
Namun, saat halaman dimuat, error akan ditampilkan karena halaman tersebut memerlukan kunci API Google Maps Platform, yang akan ditambahkan di bagian berikutnya.
Pesan error sebenarnya dapat dilihat di konsol web di Firebase Studio.
Untuk memperbaikinya, kita perlu menambahkan kunci API ke halaman. Kunci API adalah cara halaman dan penerapan Maps JavaScript API dihubungkan. Kunci API juga merupakan area eksploitasi, karena harus dimuat di halaman dengan cara yang tidak dienkripsi, sehingga kunci API dapat diambil dan digunakan di situs lain.
Salah satu metode perlindungan adalah melalui penggunaan batasan aplikasi, baik melalui jenis aplikasi yang digunakan maupun melalui domain perujuk atau alamat IP yang dipanggil. Anda dapat mengetahui lebih lanjut praktik terbaik di situs berikut:
https://developers.google.com/maps/api-security-best-practices#rec-best-practices
atau melalui penggunaan panggilan langsung dari command line atau server, aplikasi yang sendiri tidak memiliki cara untuk memberikan perujuk atau dilacak, sehingga berpotensi menjadi celah keamanan.
5. Buat aplikasi Firebase
Firebase digunakan untuk menyediakan fungsi yang mengikat penyedia pengesahan untuk memeriksa hal berikut:
- Permintaan berasal dari aplikasi asli milik Anda
- Permintaan berasal dari perangkat dan sesi pengguna asli yang tidak dimodifikasi.
Dalam codelab ini, reCAPTCHA v3 akan digunakan sebagai penyedia pengesahan ini.
Buat dan host aplikasi Firebase.
Buka https://firebase.google.com/ dan buat project Firebase baru dari link "Go to console".
Buat project baru dengan mengklik area berikut.
Pilih nama untuk project, seperti Project Pemeriksaan Aplikasi Saya. Nama ini tidak harus sama dengan nama yang digunakan sebelumnya karena hanya untuk referensi. Nama project sebenarnya dapat diedit tepat di bawah teks. Nama ini akan terdiri dari nama yang Anda masukkan dan jika tidak unik, akan ditambahkan angka.
Jika Anda diminta untuk menambahkan layanan lain (seperti Google Analytics) ke aplikasi, Anda dapat menerimanya atau tidak, tetapi untuk codelab ini, layanan tersebut tidak diperlukan sehingga dapat dibiarkan tidak aktif.
Klik tombol "create project" dan tunggu hingga project dibuat. Setelah selesai, Anda akan diberi tahu.
Klik lanjutkan jika sudah siap untuk mulai berinteraksi dengan project.
Dari halaman utama, Anda dapat memilih untuk mulai menambahkan Firebase ke aplikasi Anda dan memilih opsi web.
Pilih untuk menyiapkan Firebase Hosting ke situs Anda sebagai tempat tujuan file setelah di-deploy (untuk situs sebenarnya, Anda dapat menggunakan opsi sendiri, tetapi untuk mengikuti Codelab ini, Anda akan men-deploy ke Firebase Hosting).
Klik Register app untuk membuat aplikasi. Selanjutnya, Anda akan mengambil skrip yang dibuat dan menggunakannya untuk mereferensikan project di Firebase dari aplikasi web kita.
Kode konfigurasi Firebase di tab berikutnya akan digunakan dalam aplikasi untuk menghubungkan Firebase dan Maps API, jadi sebaiknya salin kode tersebut dari bagian "Gunakan tag skrip". Yang akan Anda tempelkan di index.html project.
Klik berikutnya untuk bagian lainnya, lalu lihat aplikasi yang dibuat di bagian setelan project situs.
Jika perlu kembali dan menemukan detail konfigurasi di lain waktu, Anda juga dapat menemukan detail aplikasi dari tombol "Setelan", seperti yang ditunjukkan:
Sebelum keluar dari bagian ini, Anda harus mencatat domain situs hosting Firebase yang dibuat untuk digunakan nanti dengan reCAPTCHA. Hal ini memungkinkan nama situs dikaitkan dengan penyedia pengesahan, yang berarti hanya permintaan dari situs tersebut yang akan diverifikasi.
Buka bagian hosting dari pintasan project atau menu Build di sebelah kiri
atau 
Kemudian, dari bagian tersebut, cari domain yang telah dibuat untuk aplikasi. Anda mungkin harus mengklik beberapa layar untuk menyiapkannya jika belum dilakukan.
6. Mengamankan Kunci API
Buka Cloud Console di akun yang sama dengan yang Anda gunakan untuk Firebase guna melihat project yang telah dibuat,
Jika memiliki beberapa project, Anda mungkin perlu menggunakan drop-down atau kotak penelusuran untuk memilih project yang benar, dengan nama project Firebase Anda.
Tindakan ini akan membuka project yang baru dibuat. Sekarang Anda akan menambahkan Maps JavaScript API ke project ini sehingga dapat digunakan dalam project, termasuk membatasi penggunaannya ke kunci API dan domain hosting tertentu.
Gunakan menu di sisi kiri untuk mengaktifkan Maps API di project. Pilih opsi "APIs & Services" dan "Enabled APIs & Services".
Pilih opsi "AKTIFKAN API DAN LAYANAN"
Masukkan "Maps JavaScript API" ke dalam kotak penelusuran.
Pilih hasil yang cocok.
Kemudian, klik aktifkan di API untuk menambahkannya ke project Anda (langkah ini mungkin sudah dilakukan jika Anda telah menggunakan project ini sebelumnya).
Setelah diaktifkan, Anda dapat memilih untuk menambahkan kunci API dan membatasinya, tetapi untuk saat ini langkah ini akan dilewati.
Dengan menggunakan opsi menu kiri lagi, kembali ke bagian API & Services, lalu pilih kunci browser yang dibuat untuk Anda.
Tambahkan Maps JavaScript API ke salah satu pembatasan API.
Untuk kunci di aplikasi aktif, Anda juga akan membatasi domain yang menghosting aplikasi. Lakukan sekarang menggunakan domain yang dibuat untuk Anda di Firebase. Anda juga harus menambahkan /* di akhir domain untuk memastikan semua jalur di bawahnya tercakup.
Anda dapat menemukan detail selengkapnya tentang cara mengaktifkannya di lokasi berikut untuk mengetahui informasi selengkapnya tentang cara membatasi kunci API.
https://developers.google.com/maps/api-security-best-practices#restricting-api-keys
7. Membuat secret reCAPTCHA
Langkah berikutnya adalah membuat project reCAPTCHA untuk memberikan pengesahan dan kunci bagi klien dan server.
Buka situs reCAPTCHA di https://www.google.com/recaptcha/ dan klik tombol mulai.
Selanjutnya, daftarkan situs baru dan pastikan Anda memasukkan domain yang tepat untuk dibatasi.
Pastikan juga Anda telah memilih Project Google Cloud yang sama yang dibuat Firebase jika Anda memiliki lebih dari satu project.
Tindakan ini akan membuat dua kunci, kunci rahasia yang akan Anda masukkan ke Firebase console, yang tidak boleh dimasukkan ke halaman atau aplikasi yang dapat dilihat secara publik, dan kunci situs yang akan digunakan di aplikasi web.
Biarkan halaman ini tetap terbuka karena Anda akan memerlukannya. Klik tombol salin Kunci Rahasia, lalu kembali ke situs Firebase.
8. Menambahkan reCAPTCHA ke Firebase
Di konsol Admin Firebase, buka item menu di sisi kiri. Di bagian item menu Build, pilih App Check.
Daftar layanan tidak dapat diaktifkan hingga ada Aplikasi yang terdaftar (dibuat sebelumnya saat hosting ditambahkan ke situs), klik mulai jika Anda perlu menyiapkannya.
Klik tab Aplikasi, buka Aplikasi web, lalu masukkan secret yang Anda salin dari situs reCAPTCHA, lalu klik simpan.
Sekarang akan ada tanda centang hijau di samping penyedia reCAPTCHA. Aplikasi web ini kini dapat menggunakan reCAPTCHA untuk membuktikan apakah pengguna atau situs memanggil layanan dengan benar.
Di Tab API, API Google Maps Platform akan ditampilkan sebagai aktif, tetapi tidak diterapkan.
Anda kini telah menautkan secret reCAPTCHA dengan project Firebase dan kini dapat menambahkan kode ke halaman web agar kunci situs cocok dengan penyedia yang tepat untuk digunakan dengan aplikasi Maps.
Kunci situs diperiksa oleh reCAPTCHA agar cocok dengan kunci rahasia. Setelah selesai, reCAPTCHA akan mengonfirmasi bahwa halaman yang memanggil sudah benar dan App Check akan memberikan token yang dapat digunakan oleh panggilan berikutnya ke Maps JavaScript API. Tanpa pengesahan ini, token tidak akan diberikan dan permintaan tidak dapat divalidasi.
9. Tambahkan verifikasi ke halaman dan deploy.
Kembali ke konsol cloud dan salin kunci API yang diperlukan untuk digunakan pada Maps API.
Anda dapat menemukannya dari menu samping di konsol, di menu samping APIs and Services, di opsi Credentials.
Dari sini, Anda dapat memilih Kunci browser yang ada (meskipun seperti yang disebutkan, Anda dapat menggunakan kunci yang ada lainnya atau membuat kunci baru).
Klik tombol tampilkan kunci dan salin kunci dari jendela dialog yang ditampilkan.
Kembali ke project Firebase Studio tempat halaman HTML yang Anda buat dibuka sebelumnya. Sekarang Anda dapat menambahkan kunci API ke halaman agar Maps API berfungsi di tempat halaman memiliki "YOUR_API_KEY".
Setelah Anda menjalankan ulang halaman, akan ada pesan error yang berbeda.
Artinya, domain pengembangan tempat Anda menghosting halaman tidak diizinkan (kami hanya menambahkan domain yang di-deploy). Kita harus memublikasikan situs ini ke domain yang benar menggunakan Firebase Hosting. Anda bisa mendapatkan detail selengkapnya di lokasi berikut:
Men-deploy dengan Firebase Hosting
dan video ini
Membangun, menguji, dan men-deploy aplikasi web Firebase Anda lebih cepat di Project IDX
Detail lebih lanjut dapat ditemukan di bagian Error Pemuatan Peta di situs Maps JavaScript API.
Jika Anda mengalami RefererNotAllowedMapError, Anda dapat memperbaikinya dengan men-deploy halaman ke domain yang benar.
Kembali ke Firebase Studio dan klik ikon "Firebase Studio" (ikon ini mungkin berada di sisi paling kiri atau paling kanan, bergantung pada opsi yang telah Anda siapkan) untuk membuka opsi hosting.
Dalam codelab ini, Anda selanjutnya perlu "Menghosting Aplikasi dengan Firebase" untuk menghubungkan instance Firebase dengan aplikasi studio.
Kemudian, klik "Authenticate Firebase" untuk memulai proses autentikasi. Dengan demikian, akun Anda dapat mengotomatiskan hosting dengan backend dari dalam studio.
Ikuti petunjuk di jendela perintah untuk mengizinkan deployment.
Ikuti petunjuk di layar (termasuk membuka jendela baru) dan salin kode otorisasi di tempat yang memintanya, lalu tempelkan ke jendela perintah di Firebase Studio.
Anda bisa mendapatkan detail selengkapnya tentang proses ini di lokasi berikut:
https://firebase.google.com/docs/studio/deploy-app
Setelah selesai, Anda dapat mengklik "initialize firebase hosting" untuk menautkan project ke project Firebase.
Pilih "Gunakan project yang ada" dan pilih project yang Anda buat di bagian sebelumnya. Terima default lainnya (contoh Anda mungkin berbeda bergantung pada nama yang Anda pilih saat menyiapkan project).
Kembali ke tampilan penjelajah dan ganti file index.html yang dibuat di direktori publik dengan file yang sudah Anda miliki di direktori root.
Sekarang Anda dapat kembali ke sidebar Firebase Studio dan men-deploy situs ke produksi.
Tindakan ini akan menampilkan langkah-langkah deployment di konsol.
Buka situs yang di-deploy dari "URL Hosting" yang ditampilkan (di sini dicatat sebagai https://my-app-check-project.web.app/, tetapi akan berbeda untuk project Anda).
Aplikasi kini akan menampilkan peta di halaman saat API berfungsi untuk domain yang digunakan.
Sekarang ada halaman yang berfungsi, dengan batasan yang dibuat untuk jenis API yang dapat digunakan dengan kunci API dan juga domain yang dapat menggunakan kunci API. Langkah berikutnya adalah mengunci akses hanya ke domain tersebut. Untuk melakukannya, Anda harus menambahkan bagian skrip Firebase yang dibuat sebelumnya untuk mengamankan halaman menggunakan App Check. Hal ini akan dilakukan di bagian berikutnya.
10. Halaman aman
Meskipun halaman saat ini mengamankan kunci API ke domain, halaman tersebut tidak menambahkan langkah pengesahan untuk memastikan kunci API digunakan oleh aplikasi yang benar dan oleh seseorang. Kunci masih dapat dicuri dan digunakan oleh pihak berniat jahat. Untuk menghentikan konfigurasi Firebase ini, kunci penyedia dan situs harus ditambahkan ke halaman agar mendapatkan token yang benar untuk klien.
Anda juga dapat melihat bahwa untuk Maps API, penggunaan dilacak di Firebase. Karena tidak menggunakan token yang benar, aplikasi membuat permintaan yang belum diverifikasi.
Detail koneksi yang diperlukan dapat diperoleh dari project Firebase.
Dapatkan detail Firebase dari konsol yang berisi detail konfigurasi Firebase. Buka halaman setelan project di Firebase dan di bagian CDN aplikasi, ambil bagian kode untuk penyiapan CDN (paling sederhana).
Di project Firebase, pilih roda gigi untuk menampilkan setelan project.
Yang akan membuka halaman berikut yang berisi detail di bagian umum , di bagian aplikasi Anda.
Salin kode ini ke halaman Firebase Studio (public/index.html) yang berisi peta dan dihosting. Yang akan terlihat seperti berikut (dengan detail Anda dan bukan detail yang ada dalam file ini):
<!doctype html>
<html>
<head>
<title>Secure Map</title>
<style>
#map {
height: 100%;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<h3>App Check Security Demo</h3>
<!--The div element for the map -->
<div id="map"></div>
<script>
(g => { var h, a, k, p = "The Google Maps JavaScript API", c = "google", l = "importLibrary", q = "__ib__", m = document, b = window; b = b[c] || (b[c] = {}); var d = b.maps || (b.maps = {}), r = new Set, e = new URLSearchParams, u = () => h || (h = new Promise(async (f, n) => { await (a = m.createElement("script")); e.set("libraries", [...r] + ""); for (k in g) e.set(k.replace(/[A-Z]/g, t => "_" + t[0].toLowerCase()), g[k]); e.set("callback", c + ".maps." + q); a.src = `https://maps.${c}apis.com/maps/api/js?` + e; d[q] = f; a.onerror = () => h = n(Error(p + " could not load.")); a.nonce = m.querySelector("script[nonce]")?.nonce || ""; m.head.append(a) })); d[l] ? console.warn(p + " only loads once. Ignoring:", g) : d[l] = (f, ...n) => r.add(f) && u().then(() => d[l](f, ...n)) })({
key: "YOUR_API_KEY",
v: "weekly",
// Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
// Add other bootstrap parameters as needed, using camel case.
});
</script>
<script type="module">
// Import the functions you need from the SDKs you need
import { initializeApp } from "https://www.gstatic.com/firebasejs/12.2.1/firebase-app.js";
const firebaseConfig = {
apiKey: "YOUR_API_KEY",
authDomain: "appcheck-map.firebaseapp.com",
projectId: "appcheck-map",
storageBucket: "appcheck-map.firebasestorage.app",
messagingSenderId: "YOUR_SENDER_KEY",
appId: "YOUR_APP_ID"
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
let map;
async function initMap() {
const { Map } = await google.maps.importLibrary("maps");
map = new Map(document.getElementById("map"), {
center: { lat: 51.5208, lng: -0.0977 },
zoom: 17,
});
}
initMap();
</script>
</body>
</html>
Sekarang Firebase telah ditambahkan ke dalam aplikasi kita, panggilan ke library reCAPTCHA menggunakan kunci situs yang diberikan yang Anda dapatkan sebelumnya dari situs reCAPTCHA (dari sebelumnya).
Anda bisa mendapatkan detail selengkapnya tentang cara menambahkan bagian ini di halaman dokumentasi Maps berikut:
https://developers.google.com/maps/documentation/javascript/maps-app-check
Tambahkan library App Check ke halaman, lalu muat fungsi untuk menginisialisasi App Check dengan konfigurasi Firebase, dan dapatkan token menggunakan ReCaptchaV3Provider.
Pertama, impor library App Check:
import {
getToken,
initializeAppCheck,
ReCaptchaV3Provider,
} from "https://www.gstatic.com/firebasejs/12.2.1/firebase-app-check.js";
Selanjutnya, tambahkan kode untuk menginisialisasi App Check dengan konfigurasi Firebase dan penyedia reCAPTCHA menggunakan token situs.
// Get App Check Token
const appCheck = initializeAppCheck(app, {
provider: new ReCaptchaV3Provider('<INSERT SITE KEY>'),
isTokenAutoRefreshEnabled: true,
});
Terakhir, lampirkan fungsi ke Kontrol Peta menggunakan fungsi setelan library Maps Core untuk mendapatkan token. Hal ini akan membuat permintaan token sesuai yang diperlukan oleh kontrol peta, bergantung pada masa berlaku token.
const { Settings } = await google.maps.importLibrary('core');
Settings.getInstance().fetchAppCheckToken = () =>
getToken(appCheck, /* forceRefresh = */ false);
File lengkapnya adalah sebagai berikut:
<!doctype html>
<html>
<head>
<title>Secure Map</title>
<style>
#map {
height: 100%;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<h3>App Check Security Demo</h3>
<!--The div element for the map -->
<div id="map"></div>
<script>
(g => { var h, a, k, p = "The Google Maps JavaScript API", c = "google", l = "importLibrary", q = "__ib__", m = document, b = window; b = b[c] || (b[c] = {}); var d = b.maps || (b.maps = {}), r = new Set, e = new URLSearchParams, u = () => h || (h = new Promise(async (f, n) => { await (a = m.createElement("script")); e.set("libraries", [...r] + ""); for (k in g) e.set(k.replace(/[A-Z]/g, t => "_" + t[0].toLowerCase()), g[k]); e.set("callback", c + ".maps." + q); a.src = `https://maps.${c}apis.com/maps/api/js?` + e; d[q] = f; a.onerror = () => h = n(Error(p + " could not load.")); a.nonce = m.querySelector("script[nonce]")?.nonce || ""; m.head.append(a) })); d[l] ? console.warn(p + " only loads once. Ignoring:", g) : d[l] = (f, ...n) => r.add(f) && u().then(() => d[l](f, ...n)) })({
key: "YOUR_API_KEY",
v: "weekly",
// Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
// Add other bootstrap parameters as needed, using camel case.
});
</script>
<script type="module">
import { initializeApp } from "https://www.gstatic.com/firebasejs/12.2.1/firebase-app.js";
import {
getToken,
initializeAppCheck,
ReCaptchaV3Provider,
} from "https://www.gstatic.com/firebasejs/12.2.1/firebase-app-check.js";
const firebaseConfig = {
apiKey: "YOUR_API_KEY",
authDomain: "appcheck-map.firebaseapp.com",
projectId: "appcheck-map",
storageBucket: "appcheck-map.firebasestorage.app",
messagingSenderId: "YOUR_SENDER_KEY",
appId: "YOUR_APP_ID"
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
// Get App Check Token
const appCheck = initializeAppCheck(app, {
provider: new ReCaptchaV3Provider('<INSERT SITE KEY>'),
isTokenAutoRefreshEnabled: true,
});
let map;
async function initMap() {
const { Map } = await google.maps.importLibrary("maps");
const { Settings } = await google.maps.importLibrary('core');
Settings.getInstance().fetchAppCheckToken = () =>
getToken(appCheck, /* forceRefresh = */ false);
map = new Map(document.getElementById("map"), {
center: { lat: 51.5208, lng: -0.0977 },
zoom: 17,
});
}
initMap();
</script>
</body>
</html>
Deploy ini ke situs Firebase menggunakan Firebase Studio dan jalankan halaman.
11. Menerapkan pemantauan
Setelah halaman disiapkan, saat dijalankan, Anda dapat melihat bahwa halaman tersebut sedang diperiksa. Kembali ke Firebase console dan buka bagian App Check lagi. App Check kini akan memantau Maps JavaScript API.
Membuka jendela sekarang akan menunjukkan bahwa klien membuat permintaan dan pengesahan berfungsi (ditunjukkan oleh permintaan "terverifikasi" berwarna biru tua pada grafik). Permintaan lain akan menampilkan panggilan selama fase pengembangan sebelum verifikasi selesai.
Setelah klien terlihat berfungsi, penegakan dapat diaktifkan di situs untuk memastikan kunci API tidak dapat digunakan dari aplikasi klien yang tidak valid. Klik tombol Terapkan untuk memulai penerapan.
Mengklik tombol ini akan memberi Anda tanda peringatan besar yang menunjukkan bahwa tindakan ini akan mengunci aplikasi Anda. Di dunia nyata, Anda hanya akan melakukannya jika Anda tahu bahwa semua klien Anda memiliki kunci yang tepat dan berfungsi. Jika tidak, pengguna Anda mungkin tidak dapat mengakses situs.
Penerapannya juga memerlukan waktu beberapa saat. Yang dicatat di layar, jika Anda langsung menguji penegakan, mungkin belum ada waktu untuk menyebar.
Saat membuat permintaan untuk halaman, Anda akan dapat melihatnya berfungsi seperti sebelumnya, tidak ada yang berubah di situs.
Seiring waktu, Anda akan melihat peningkatan jumlah permintaan terverifikasi di konsol, seperti yang mungkin terlihat di sini:
Anda dapat menguji apakah fungsi ini berfungsi dengan kembali ke contoh asli di codelab dan membuat halaman baru tanpa fungsi pemeriksaan aplikasi. Beri nama halaman ini dengan nama seperti nocheck.html dan tempatkan di folder publik di tempat yang sama dengan index.html.
<!doctype html>
<html>
<head>
<title>Secure Map</title>
<style>
#map {
height: 100%;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<h3>App Check Security Demo</h3>
<!--The div element for the map -->
<div id="map"></div>
<script>
(g => { var h, a, k, p = "The Google Maps JavaScript API", c = "google", l = "importLibrary", q = "__ib__", m = document, b = window; b = b[c] || (b[c] = {}); var d = b.maps || (b.maps = {}), r = new Set, e = new URLSearchParams, u = () => h || (h = new Promise(async (f, n) => { await (a = m.createElement("script")); e.set("libraries", [...r] + ""); for (k in g) e.set(k.replace(/[A-Z]/g, t => "_" + t[0].toLowerCase()), g[k]); e.set("callback", c + ".maps." + q); a.src = `https://maps.${c}apis.com/maps/api/js?` + e; d[q] = f; a.onerror = () => h = n(Error(p + " could not load.")); a.nonce = m.querySelector("script[nonce]")?.nonce || ""; m.head.append(a) })); d[l] ? console.warn(p + " only loads once. Ignoring:", g) : d[l] = (f, ...n) => r.add(f) && u().then(() => d[l](f, ...n)) })({
key: "YOUR_API_KEY",
v: "weekly",
// Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
// Add other bootstrap parameters as needed, using camel case.
});
</script>
<script>
let map;
async function initMap() {
const { Map } = await google.maps.importLibrary("maps");
map = new Map(document.getElementById("map"), {
center: { lat: 51.5208, lng: -0.0977 },
zoom: 17,
});
}
initMap();
</script>
</body>
</html>
Setelah melakukannya dan memasukkan kunci API yang benar, saat meminta halaman (gunakan yourdomain/nocheck.html), Anda akan melihat kotak error berwarna abu-abu berikut.
Dengan memeriksa konsol, Anda akan melihat pesan error seperti berikut:
Pemeriksaan aplikasi telah berhasil memblokir permintaan peta di halaman karena tidak lagi mendapatkan token pemeriksaan aplikasi untuk situs yang diterapkan.
12. Selamat!
Selamat, Anda telah berhasil mengaktifkan App Check di situs Anda.
Anda telah berhasil membuat aplikasi yang menggunakan Firebase App Check untuk memastikan bahwa permintaan berasal dari domain dan pengguna yang valid.
Yang telah Anda pelajari
- Cara menggunakan Firebase Studio untuk menghosting dan men-deploy halaman web.
- Cara menggunakan Konsol Cloud untuk mengaktifkan dan mengamankan API Google Maps Platform.
- Cara menggunakan reCAPTURE untuk membuat kunci yang dapat digunakan untuk membuktikan panggilan.
- Cara menggunakan Firebase App Check dan mengintegrasikannya ke dalam Maps JavaScript API.
- Lihat cara menerapkan dan memantau panggilan ke situs yang dilindungi dengan Firebase Studio.
Apa langkah selanjutnya?
- Lihat dokumentasi untuk App Check untuk Google Maps JavaScript API
- Pelajari lebih lanjut App Check di Firebase.
- Coba codelab lain dengan App Check dan Google Maps Places API.
- Pelajari reCAPTCHA lebih lanjut.