1. Prima di iniziare
Cosa creerai.
In questo codelab, utilizzerai App Check per aggiungere un altro livello di protezione alla tua chiave API utilizzata in un ambiente web.
Nello specifico, i seguenti passaggi verranno seguiti nella codelab per collegare la funzionalità:
- Crea una pagina web per ospitare una mappa utilizzando l'API Google Maps Platform JavaScript.
- Ospita la pagina in modo che sia accessibile online.
- Limita i domini e le API che possono utilizzare l'API tramite Cloud Console.
- Aggiungi e inizializza la libreria App Check tramite Firebase.
- Aggiungi il fornitore di attestazione per verificare la validità delle applicazioni.
- Esegui il controllo sulla tua app e sul monitor.
Al termine del codelab dovresti avere un sito funzionante che applichi la sicurezza sia alle chiavi API utilizzate sia ai domini da cui vengono eseguite le operazioni di accesso e ai tipi di applicazioni che possono utilizzarle.
2. Prerequisiti
L'attivazione di App Check richiede l'utilizzo di tre servizi Google per fornire la protezione. Ti consigliamo di familiarizzare con queste aree.
Firebase: fornisce l'applicazione dei servizi che verificano che i riferimenti alle chiavi API provengano dai domini appropriati. In questo modo, verranno fornite anche le funzionalità di hosting e deployment tramite l'utilizzo di Firebase Studio.
reCAPTCHA: fornisce la funzionalità per verificare se l'applicazione viene utilizzata da persone e fornisce anche le chiavi pubblica e privata per connettere Firebase al dominio dell'applicazione client.
Google Cloud Platform: fornisce le chiavi API utilizzate sia da Google Maps Platform che da Firebase e la limitazione del dominio utilizzando la chiave Maps.
Puoi vedere come funzionano insieme nel seguente diagramma dell'architettura:
Quando utilizzi App Check e Google Maps Platform, i seguenti elementi collaborano per determinare se le richieste provengono da un'applicazione e da un utente validi, utilizzando l'attestazione fornita da un fornitore di attestazioni, in questo caso reCAPTCHA.
Questa operazione viene eseguita tramite l'utilizzo dell'SDK App Check fornito da Firebase, che verifica la validità dell'applicazione chiamante e quindi fornisce un token all'applicazione tramite il quale vengono effettuate le chiamate successive all'API Google Maps JavaScript. A sua volta, l'API Google Maps Platform JavaScript verifica la validità del token fornito con Firebase per assicurarsi che provenga sia dal dominio corretto sia dal fornitore di attestazione di un utente valido.
Puoi trovare maggiori dettagli sull'utilizzo di App Check e dell'API Maps JavaScript nella seguente posizione e devi acquisire familiarità con i passaggi richiesti.
https://developers.google.com/maps/documentation/javascript/maps-app-check
3. Configurazione
Se non hai ancora un account Google Cloud, dovrai configurarne uno con la fatturazione abilitata all'inizio. Segui le istruzioni per creare l'account prima di iniziare.
Configura Google Maps Platform
Se non hai ancora un account Google Cloud Platform e un progetto con la fatturazione abilitata, consulta la guida Guida introduttiva a Google Maps Platform per creare un account di fatturazione e un progetto.
- Nella console Cloud, fai clic sul menu a discesa del progetto e seleziona il progetto che vuoi utilizzare per questo codelab.
- Abilita le API e gli SDK di Google Maps Platform richiesti per questo codelab in Google Cloud Marketplace. Per farlo, segui i passaggi descritti in questo video o in questa documentazione.
- Genera una chiave API nella pagina Credenziali di Cloud Console. Puoi seguire i passaggi descritti in questo video o in questa documentazione. Tutte le richieste a Google Maps Platform richiedono una chiave API.
Altri requisiti per questo codelab
Per completare questo codelab, ti serviranno i seguenti account, servizi e strumenti:
- Conoscenza di base di JavaScript, HTML e CSS
- Un account Google Cloud con la fatturazione attivata (come indicato)
- Una chiave API Google Maps Platform con l'API Maps JavaScript attivata (questa operazione verrà eseguita durante il codelab).
- Conoscenza di base dell'hosting web e del deployment (ti guideremo in questo passaggio nel codelab). Questa operazione verrà eseguita tramite la console Firebase e Firebase Studio.
- Un browser web per visualizzare i file mentre lavori.
4. Creare una pagina in Firebase Studio
Questo codelab non presuppone che tu abbia già creato un'applicazione e utilizza Firebase Studio per creare una pagina per ospitare l'applicazione Maps e distribuirla a Firebase a scopo di test. Se hai un'applicazione esistente, puoi utilizzarla anche modificando i domini host, gli snippet di codice e le chiavi API appropriati per garantire l'implementazione corretta.
Vai a Firebase Studio (richiede un Account Google) e crea una nuova applicazione HTML semplice. Potresti dover fare clic sul pulsante "Visualizza tutti i modelli" per visualizzare questa opzione o semplicemente fare clic su questo link per l'accesso diretto.
Assegna allo spazio di lavoro un nome appropriato, ad esempio myappcheck-map (più un numero casuale per l'unicità, ne verrà aggiunto uno). Firebase Studio creerà il workspace.
Dopo aver inserito il nome, puoi fare clic sul pulsante Crea per avviare la procedura di creazione del progetto.
Una volta creato, puoi sostituire il testo nel file index.html con il seguente codice, che crea una pagina con una mappa.
<!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>
Quando viene eseguito, questo comando dovrebbe mostrare una pagina con una mappa dell'applicazione funzionante, come mostrato nell'immagine, ma.
Quando la pagina viene caricata, viene visualizzato un errore perché è necessaria una chiave API di Google Maps Platform, che verrà aggiunta in una sezione successiva.
Il messaggio di errore effettivo può essere visualizzato nella console web di Firebase Studio.
Per risolvere il problema, dobbiamo aggiungere una chiave API alla pagina. La chiave API è il modo in cui la pagina e l'implementazione dell'API Maps JavaScript sono collegate tra loro. È anche un'area di exploit, in quanto deve essere contenuta nella pagina in modo non criptato, dove la chiave API può essere prelevata e utilizzata su siti diversi.
Un metodo di protezione consiste nell'utilizzo di limitazioni delle applicazioni, tramite il tipo di applicazione utilizzata o tramite il dominio o l'indirizzo IP di riferimento chiamato. Per saperne di più sulle best practice, visita il seguente sito:
https://developers.google.com/maps/api-security-best-practices#rec-best-practices
o tramite l'utilizzo di chiamate dirette dalla riga di comando o dal server, applicazioni che non hanno modo di fornire un referrer o di essere monitorate, quindi sono potenzialmente una falla di sicurezza.
5. Crea un'applicazione Firebase
Firebase viene utilizzato per fornire la funzionalità per collegare il fornitore di attestazione per verificare quanto segue:
- Le richieste provengono dalla tua app autentica
- Le richieste provengono da un dispositivo e da una sessione utente autentici e non manomessi.
In questo codelab, reCAPTCHA v3 verrà utilizzato come fornitore di questa attestazione.
Crea un'applicazione e un host Firebase.
Vai alla pagina https://firebase.google.com/ e crea un nuovo progetto Firebase dal link "Vai alla console".
Crea un nuovo progetto facendo clic sull'area seguente.
Scegli un nome per il progetto, ad esempio Il mio progetto di controllo app. Non deve essere lo stesso nome utilizzato in precedenza, in quanto serve solo come riferimento. Il nome effettivo del progetto può essere modificato appena sotto il testo. Sarà composto dal nome che hai inserito e, se non è univoco, verrà aggiunto un numero.
Se ti viene chiesto di aggiungere altri servizi (come Google Analytics) alla tua applicazione, puoi accettarli o meno, ma per questo codelab non sono necessari, quindi possono essere omessi.
Fai clic sul pulsante "Crea progetto" e attendi la creazione del progetto. Al termine dell'operazione, riceverai una notifica.
Fai clic su Continua quando vuoi iniziare a interagire con il progetto.
Dalla pagina principale puoi quindi scegliere di iniziare aggiungendo Firebase alla tua app e selezionando l'opzione web.
Scegli di configurare Firebase Hosting per il tuo sito in modo che i file vengano inviati una volta eseguiti il deployment (per il tuo sito effettivo puoi utilizzare la tua opzione, ma per seguire questo Codelab eseguirai il deployment su Firebase Hosting).
Fai clic su Registra app per creare l'applicazione. Successivamente, prenderai lo script creato e lo utilizzerai per fare riferimento al progetto in Firebase dalla nostra applicazione web.
Il codice di configurazione di Firebase nella scheda successiva verrà utilizzato nell'applicazione per collegare Firebase e le API Maps, quindi vale la pena copiarlo dalla sezione "Utilizza il tag script". che incollerai nel file index.html del progetto.
Fai clic su Avanti per le altre sezioni, quindi visualizza l'app creata nella sezione delle impostazioni del progetto del sito.
Se devi tornare indietro e trovare i dettagli della configurazione in un secondo momento, puoi anche trovare i dettagli dell'app dal pulsante "Impostazioni", come mostrato:
Prima di uscire da questa sezione, devi annotare il dominio del sito di hosting Firebase creato per essere utilizzato in un secondo momento con reCAPTCHA. In questo modo, il nome del sito viene associato al fornitore di attestazioni, il che significa che verranno verificate solo le richieste provenienti da quel sito.
Vai alla sezione di hosting dalle scorciatoie del progetto o dal menu Build a sinistra.
o 
Dalla sezione, cerca il dominio creato per l'applicazione. Se non è ancora stato fatto, potresti dover fare clic su alcune schermate per configurarlo.
6. Chiavi API sicure
Accedi a Cloud Console con lo stesso account che utilizzi per Firebase per visualizzare il progetto creato.
Se hai più progetti, potresti dover utilizzare il menu a discesa o la casella di ricerca per selezionare quello corretto, con il nome del tuo progetto Firebase.
Si aprirà il progetto appena creato. Ora aggiungi l'API Maps JavaScript a questo progetto in modo che possa essere utilizzata al suo interno, limitandone l'utilizzo a una chiave API e a un dominio di hosting specifici.
Utilizza il menu a sinistra per attivare le API Maps nel progetto. Seleziona l'opzione "API e servizi" e "API e servizi abilitati".
Seleziona l'opzione "ABILITA API E SERVIZI".
Inserisci "API Maps JavaScript" nella casella di ricerca.
Seleziona il risultato corrispondente.
Poi fai clic su Abilita sull'API per aggiungerla al progetto (questa operazione potrebbe essere già stata eseguita se hai utilizzato questo progetto in precedenza).
Una volta attivata questa opzione, puoi scegliere di aggiungere una chiave API e limitarla, ma per ora questo passaggio verrà saltato.
Utilizzando di nuovo le opzioni del menu a sinistra, torna alla sezione API e servizi e seleziona la chiave del browser creata per te.
Aggiungi l'API Maps JavaScript a una delle limitazioni API.
Per le chiavi in un'applicazione live, devi anche impostare una limitazione al dominio che ospita l'applicazione. Fallo ora utilizzando il dominio creato per te in Firebase. Devi anche aggiungere /* alla fine del dominio per assicurarti che copra tutti i percorsi sottostanti.
Per ulteriori informazioni sulla limitazione delle chiavi API, puoi trovare maggiori dettagli sull'attivazione di questa funzionalità nella seguente posizione.
https://developers.google.com/maps/api-security-best-practices#restricting-api-keys
7. Crea i secret reCAPTCHA
Il passaggio successivo consiste nel creare un progetto reCAPTCHA per fornire l'attestazione e le chiavi sia per il client che per il server.
Vai al sito reCAPTCHA all'indirizzo https://www.google.com/recaptcha/ e fai clic sul pulsante Inizia.
Poi registra un nuovo sito, assicurandoti di inserire il dominio corretto da limitare.
Assicurati inoltre di aver selezionato lo stesso progetto Google Cloud creato da Firebase nel caso in cui ne avessi più di uno.
Vengono create due chiavi: una chiave segreta da inserire nella console Firebase, che non deve mai essere inserita in pagine o applicazioni visualizzabili pubblicamente, e una chiave del sito da utilizzare nell'applicazione web.
Tieni aperta questa pagina, ti servirà. Fai clic sul pulsante Copia chiave segreta e poi torna al sito Firebase.
8. Aggiungere reCAPTCHA a Firebase
Nella console Firebase Admin, vai alle voci di menu a sinistra. Nella voce di menu Build, scegli App Check.
L'elenco dei servizi non può essere attivato finché non viene registrata un'app (creata in precedenza quando l'hosting è stato aggiunto al sito). Fai clic su Inizia se devi configurare questa opzione.
Fai clic sulla scheda App, apri l'app web, inserisci il segreto che hai copiato dal sito reCAPTCHA e fai clic su Salva.
Ora dovrebbe essere presente un segno di spunta verde accanto al fornitore reCAPTCHA. Questa applicazione web ora può utilizzare reCAPTCHA per attestare se un utente o un sito sta chiamando correttamente il servizio.
Nella scheda API dovrebbe ora essere visualizzato che l'API Google Maps Platform è attiva, ma non più applicata.
Ora hai collegato il secret reCAPTCHA al progetto Firebase e puoi aggiungere il codice alla pagina web in modo che la chiave del sito corrisponda al fornitore giusto da utilizzare con l'applicazione Maps.
La chiave sito viene controllata da reCAPTCHA per verificare che corrisponda alla chiave segreta. Una volta fatto, viene confermato che la pagina chiamante è corretta e App Check fornisce un token che può essere utilizzato dalle chiamate successive all'API Maps JavaScript. Senza questa attestazione, il token non verrà fornito e le richieste non potranno essere convalidate.
9. Aggiungi la verifica alla pagina ed esegui il deployment.
Torna alla console Cloud e copia la chiave API da utilizzare per l'API Maps.
Puoi trovarlo nel menu laterale della console, nella sezione API e servizi, nell'opzione Credenziali.
Da qui puoi selezionare la chiave del browser esistente (anche se, come indicato, puoi utilizzare un'altra chiave esistente o crearne una nuova).
Fai clic sul pulsante Mostra chiave e copia la chiave dalla finestra di dialogo visualizzata.
Torna al progetto Firebase Studio in cui è stata aperta in precedenza la pagina HTML che hai creato. Ora puoi aggiungere la chiave API alla pagina per far funzionare l'API Maps dove la pagina ha "YOUR_API_KEY".
Se esegui di nuovo la pagina, verrà visualizzato un messaggio di errore diverso.
Ciò significa che il dominio di sviluppo da cui ospiti la pagina non è consentito (abbiamo aggiunto solo il dominio di deployment). Dovremo pubblicare questo sito nel dominio corretto utilizzando Firebase Hosting. Puoi trovare maggiori dettagli al seguente indirizzo:
Esegui il deployment con Firebase Hosting
e questo video
Crea, testa ed esegui il deployment delle tue app web Firebase più rapidamente in Project IDX
Per ulteriori dettagli, consulta la sezione Errori di caricamento della mappa sul sito dell'API Maps JavaScript.
Se visualizzi l'errore RefererNotAllowedMapError, puoi risolverlo eseguendo il deployment della pagina nel dominio corretto.
Torna a Firebase Studio e fai clic sull'icona "Firebase Studio" (potrebbe trovarsi all'estrema sinistra o all'estrema destra a seconda dell'opzione che hai configurato) per aprire le opzioni di hosting.
In questo codelab dovrai "Ospitare l'app con Firebase" per connettere l'istanza Firebase all'applicazione Studio.
Poi fai clic su "Autentica Firebase" per avviare la procedura di autenticazione , in modo che il tuo account possa automatizzare l'hosting con il backend da Studio.
Segui le istruzioni nella finestra dei comandi per autorizzare il deployment.
Segui le istruzioni sullo schermo (inclusa l'apertura di una nuova finestra) e copia il codice di autorizzazione dove richiesto e incollalo nella finestra dei comandi in Firebase Studio.
Puoi trovare maggiori dettagli su questa procedura al seguente indirizzo:
https://firebase.google.com/docs/studio/deploy-app
Una volta fatto, puoi fare clic su "initialize firebase hosting" (inizializza Firebase Hosting) per collegare il progetto al progetto Firebase.
Seleziona "Utilizza un progetto esistente" e seleziona il progetto che hai creato nella sezione precedente. Accetta il resto dei valori predefiniti (l'esempio può variare a seconda del nome scelto durante la configurazione del progetto).
Torna alla visualizzazione Esplora e sostituisci il file index.html creato nella directory pubblica con quello che avevi già nella directory principale.
Ora puoi tornare alla barra laterale di Firebase Studio e implementare il sito in produzione.
Vengono visualizzati i passaggi di deployment nella console.
Apri il sito di cui è stato eseguito il deployment dall'"URL di hosting" mostrato (indicato qui come https://my-app-check-project.web.app/, ma sarà diverso per il tuo progetto).
L'applicazione ora mostrerà la mappa sulla pagina man mano che le API funzionano per i domini utilizzati.
Ora esiste una pagina funzionante, con vincoli relativi al tipo di API che possono essere utilizzate con la chiave API e ai domini per cui può essere utilizzata. Il passaggio successivo consiste nel bloccare l'accesso solo a quel dominio. Per farlo, devi aggiungere la sezione dello script Firebase generata in precedenza per proteggere la pagina utilizzando App Check. Questa operazione verrà eseguita nella sezione successiva.
10. Pagina protetta
Sebbene la pagina corrente protegga la chiave API per il dominio, non aggiunge il passaggio di attestazione per assicurarsi che venga utilizzata dall'applicazione corretta e da una persona. La chiave potrebbe comunque essere rubata e utilizzata da un utente malintenzionato. Per interrompere questa configurazione di Firebase, è necessario aggiungere alla pagina la configurazione, il provider e la chiave del sito per ottenere il token corretto per il client.
Puoi anche notare che per l'API Maps l'utilizzo viene monitorato in Firebase. Poiché non utilizza token corretti, effettua richieste non verificate.
I dettagli di connessione richiesti possono essere ottenuti dal progetto Firebase.
Recupera i dettagli di Firebase dalla console, che contiene i dettagli di configurazione di Firebase. Vai alla pagina delle impostazioni del progetto in Firebase e, nella sezione CDN dell'app, prendi la sezione di codice per la configurazione della CDN (la più semplice).
Nel progetto Firebase, scegli l'icona a forma di ingranaggio per visualizzare le impostazioni del progetto.
Si apre la pagina seguente, che contiene i dettagli nella sezione generale, sotto le tue app.
Copia questo codice nella pagina di Firebase Studio (public/index.html) che contiene la mappa ed è ospitata. che avrà il seguente aspetto (con i tuoi dati e non esattamente quelli di questo file):
<!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>
Ora che Firebase è stato aggiunto alla nostra applicazione, le chiamate alla libreria reCAPTCHA utilizzano la chiave del sito fornita in precedenza dal sito reCAPTCHA (da prima).
Puoi trovare maggiori dettagli sull'aggiunta di queste sezioni nella seguente pagina della documentazione di Maps:
https://developers.google.com/maps/documentation/javascript/maps-app-check
Aggiungi la libreria App Check alla pagina, poi carica le funzioni per inizializzare App Check con la configurazione di Firebase e recupera il token utilizzando ReCaptchaV3Provider.
Per prima cosa, importa la libreria App Check:
import {
getToken,
initializeAppCheck,
ReCaptchaV3Provider,
} from "https://www.gstatic.com/firebasejs/12.2.1/firebase-app-check.js";
Poi aggiungi il codice per inizializzare App Check con la configurazione Firebase e il provider reCAPTCHA utilizzando il token del sito.
// Get App Check Token
const appCheck = initializeAppCheck(app, {
provider: new ReCaptchaV3Provider('<INSERT SITE KEY>'),
isTokenAutoRefreshEnabled: true,
});
Infine, collega una funzione al controllo della mappa utilizzando la funzione di impostazioni della libreria Maps Core per ottenere un token. In questo modo, le richieste di token verranno effettuate in base alle esigenze del controllo della mappa, a seconda della durata del token.
const { Settings } = await google.maps.importLibrary('core');
Settings.getInstance().fetchAppCheckToken = () =>
getToken(appCheck, /* forceRefresh = */ false);
Il file completo è il seguente:
<!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>
Esegui il deployment sul sito Firebase utilizzando Firebase Studio ed esegui la pagina.
11. Applica il monitoraggio
Ora che la pagina è configurata, quando viene eseguita puoi vedere che viene controllata. Torna alla console Firebase e apri di nuovo la sezione App Check. App Check ora dovrebbe monitorare l'API Maps JavaScript.
L'apertura della finestra ora mostrerà che i client stanno effettuando richieste e che l'attestazione funziona (come indicato dalle richieste "verificate" di colore blu scuro nel grafico). Altre richieste mostreranno le chiamate durante la fase di sviluppo prima del completamento della verifica.
Ora che i client funzionano, è possibile attivare l'applicazione sul sito per assicurarsi che le chiavi API non possano essere utilizzate da un'applicazione client non valida. Fai clic sul pulsante Applica per avviare l'applicazione.
Se fai clic su questo pulsante, verrà visualizzato un grande segnale di avviso che indica che l'applicazione verrà bloccata. Nel mondo reale, questa operazione viene eseguita solo quando sai che tutti i tuoi client hanno le chiavi giuste e funzionano, altrimenti i tuoi utenti potrebbero non essere in grado di accedere al sito.
Potrebbe essere necessario un po' di tempo per l'applicazione. Come indicato sullo schermo, se esegui subito il test per l'applicazione, potrebbe non aver avuto il tempo di propagarsi.
Quando effettui la richiesta per la pagina, dovresti vederla funzionare come prima, non è cambiato nulla nel sito.
Nel tempo, il numero di richieste verificate nella console dovrebbe aumentare, come mostrato qui:
Puoi verificare che funzioni tornando all'esempio originale nel codelab e creando una nuova pagina senza la funzionalità di controllo delle app. Chiama questa pagina, ad esempio, nocheck.html e posizionala nella cartella pubblica nello stesso punto di 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>
Una volta eseguita questa operazione e inserita la chiave API corretta, quando richiedi la pagina (utilizza il tuo dominio/nocheck.html) dovresti visualizzare la seguente casella di errore grigia.
Controllando la console, dovresti visualizzare un messaggio di errore simile al seguente:
Il controllo app ha bloccato correttamente la richiesta della mappa nella pagina perché non riceve più il token di controllo app per il sito applicato.
12. Complimenti!
Congratulazioni, hai attivato correttamente App Check sul tuo sito.
Hai creato correttamente un'applicazione che utilizza Firebase App Check per assicurarti che le richieste provengano da un dominio e da un utente validi.
Che cosa hai imparato
- Come utilizzare Firebase Studio per ospitare ed eseguire il deployment di una pagina web.
- Come utilizzare Cloud Console per attivare e proteggere le API Google Maps Platform.
- Come utilizzare reCAPTCHA per generare chiavi che possono essere utilizzate per attestare le chiamate.
- Come utilizzare Firebase App Check e integrarlo nell'API Maps JavaScript.
- Scopri come applicare e monitorare le chiamate ai siti protetti con Firebase Studio.
Passaggi successivi
- Consulta la documentazione di App Check per l'API Maps JavaScript
- Scopri di più su App Check in Firebase.
- Prova un altro codelab con App Check e l'API Google Maps Places.
- Scopri di più su reCAPTCHA.