1. Antes de comenzar
Qué compilarás
En este codelab, usarás App Check para agregar otra capa de protección a tu clave de API que se usa en un entorno web.
Específicamente, se seguirán los siguientes pasos a lo largo del codelab para vincular la funcionalidad:
- Crea una página web para alojar un mapa con la API de Maps JavaScript de Google Maps Platform.
- Aloja la página para que se pueda acceder a ella en línea.
- Restringe los dominios y las APIs que pueden usar la API con la consola de Cloud.
- Agrega e inicializa la biblioteca de App Check a través de Firebase.
- Agrega el proveedor de certificación para verificar la validez de las aplicaciones.
- Aplica la verificación en tu app y en el monitor.
Al final del codelab, deberías tener un sitio en funcionamiento que aplique la seguridad tanto en las claves de API que se usan como en los dominios desde los que se accede a ellas y los tipos de aplicaciones que pueden usarlas.
2. Requisitos previos
Para habilitar App Check, se deben usar tres servicios de Google para brindar protección. Debes familiarizarte con estas áreas.
Firebase: Proporciona la aplicación de los servicios que verifican que se haga referencia a las claves de API desde los dominios adecuados. Esto también proporcionará la funcionalidad de hosting y de implementación a través de Firebase Studio.
reCAPTCHA: Proporciona la funcionalidad para verificar si los humanos usan la aplicación y también proporciona las claves públicas y privadas para conectar Firebase al dominio de la aplicación cliente.
Google Cloud Platform: Proporciona las claves de API que usan Google Maps Platform y Firebase, y la restricción en el dominio que usa la clave de Maps.
Puedes ver cómo funcionan todos estos elementos juntos en el siguiente diagrama de arquitectura:
Cuando se usan la Verificación de aplicaciones y Google Maps Platform, los siguientes elementos funcionan en conjunto para determinar si las solicitudes provienen de una aplicación y un usuario válidos, a través de la certificación proporcionada por un proveedor de certificación, en este caso, reCAPTCHA.
Esto se realiza a través del SDK de App Check proporcionado por Firebase, que verifica la validez de la aplicación que llama y, luego, proporciona un token a la aplicación con el que se realizan las llamadas posteriores a la API de Google Maps Platform JavaScript. A su vez, la API de Google Maps Platform JavaScript verifica la validez del token proporcionado con Firebase para asegurarse de que provenga del dominio correcto y del proveedor de certificación de un usuario válido.
Puedes encontrar más detalles sobre el uso de App Check y la API de Maps JavaScript en la siguiente ubicación, y debes familiarizarte con los pasos necesarios.
https://developers.google.com/maps/documentation/javascript/maps-app-check
3. Prepárate
Si aún no tienes una cuenta de Google Cloud, deberás configurar una con la facturación habilitada al principio. Sigue las instrucciones para crearla antes de comenzar.
Configura Google Maps Platform
Si todavía no tienes una cuenta de Google Cloud Platform y un proyecto con la facturación habilitada, consulta la guía Cómo comenzar a utilizar Google Maps Platform para crear una cuenta de facturación y un proyecto.
- En Cloud Console, haz clic en el menú desplegable del proyecto y selecciona el proyecto que deseas usar para este codelab.
- Habilita las API y los SDK de Google Maps Platform necesarios para este codelab en Google Cloud Marketplace. Para hacerlo, sigue los pasos que se indican en este video o esta documentación.
- Genera una clave de API en la página Credenciales de Cloud Console. Puedes seguir los pasos que se indican en este video o esta documentación. Todas las solicitudes a Google Maps Platform requieren una clave de API.
Otros requisitos de este codelab
Para completar este codelab, necesitarás las siguientes cuentas, servicios y herramientas:
- Conocimientos básicos de JavaScript, HTML y CSS
- Una cuenta de Google Cloud con la facturación habilitada (como se mencionó)
- Una clave de API de Google Maps Platform con la API de Maps JavaScript habilitada (esto se hará durante el codelab)
- Conocimientos básicos sobre el hosting y la implementación de sitios web (se te guiará a través de este proceso en el codelab) Esto se hará a través de Firebase console y Firebase Studio.
- Un navegador web para ver los archivos mientras trabajas
4. Crea una página en Firebase Studio
En este codelab, no se supone que ya tienes una aplicación creada, sino que se usa Firebase Studio para crear una página que aloje la aplicación de Maps y la implemente en Firebase con fines de prueba. Si tienes una aplicación existente, también puedes usarla. Para ello, cambia los dominios de host, los fragmentos de código y las claves de API correspondientes para garantizar la implementación correcta.
Navega a Firebase Studio (requiere una Cuenta de Google) y crea una nueva aplicación Simple HTML. Es posible que debas hacer clic en el botón "Ver todas las plantillas" para mostrar esta opción o simplemente hacer clic en este vínculo para acceder directamente.
Asigna un nombre adecuado al espacio de trabajo, como myappcheck-map (además de un número aleatorio para que sea único, se agregará uno por ti). Luego, Firebase Studio creará el espacio de trabajo.
Una vez que hayas completado el nombre, puedes hacer clic en el botón Crear y se iniciará el proceso de creación del proyecto.
Una vez que se haya creado, puedes reemplazar el texto del archivo index.html por el siguiente código, que crea una página con un mapa.
<!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>
Cuando ejecutes este should, se mostrará una página con un mapa de la aplicación en funcionamiento, como se muestra en la imagen, pero…
Sin embargo, cuando se cargue la página, se mostrará un error, ya que necesitará una clave de API de Google Maps Platform en la página, que se agregará en una sección posterior.
El mensaje de error real se puede ver en la consola web de Firebase Studio.
Para solucionar este problema, deberemos agregar una clave de API a la página. La clave de API es la forma en que se vinculan la página y la implementación de la API de Maps JavaScript. También es un área de explotación, ya que debe estar contenida en la página de forma no encriptada, donde se puede tomar la clave de API y usarla en diferentes sitios.
Un método de protección es el uso de restricciones de aplicaciones, ya sea a través del tipo de aplicación que se usa o a través del dominio o la dirección IP de referencia a los que se llama. Puedes obtener más información sobre las prácticas recomendadas en el siguiente sitio:
https://developers.google.com/maps/api-security-best-practices#rec-best-practices
o a través del uso de llamadas directas desde la línea de comandos o el servidor, aplicaciones que no tienen forma de proporcionar un sitio de referencia o de ser rastreadas, por lo que potencialmente son un agujero de seguridad.
5. Crea una aplicación de Firebase
Firebase se usa para proporcionar la funcionalidad que vincula el proveedor de certificación para verificar lo siguiente:
- Las solicitudes se originan en tu app auténtica
- Las solicitudes se originan en un dispositivo y una sesión de usuario auténticos y no adulterados.
En este codelab, se usará reCAPTCHA v3 como proveedor de esta certificación.
Crea una aplicación de Firebase y alójala.
Ve a https://firebase.google.com/ y crea un proyecto de Firebase nuevo desde el vínculo "Ir a la consola".
Haz clic en el siguiente área para crear un proyecto nuevo.
Elige un nombre para el proyecto, como Mi proyecto de App Check. No es necesario que sea el mismo nombre que se usó antes, ya que esto es solo para referencia. El nombre real del proyecto se puede editar justo debajo del texto. Se compondrá del nombre que ingresaste y, si no es único, se le agregará un número.
Si se te solicita que agregues otros servicios (como Google Analytics) a tu aplicación, puedes aceptarlos o no, pero para este codelab no son necesarios, por lo que puedes omitirlos.
Haz clic en el botón "Crear proyecto" y espera a que se cree el proyecto. Cuando se complete, recibirás una notificación.
Haz clic en Continuar cuando esté todo listo para comenzar a interactuar con el proyecto.
En la página principal, puedes comenzar por agregar Firebase a tu app y elegir la opción web.
Elige configurar Firebase Hosting en tu sitio para que los archivos se guarden en algún lugar una vez que se implementen (para tu sitio real, puedes usar tu propia opción, pero, para seguir este codelab, implementarás en Firebase Hosting).
Haz clic en Registrar app para crear la aplicación. A continuación, tomarás el script creado y lo usarás para hacer referencia al proyecto en Firebase desde nuestra aplicación web.
El código de configuración de Firebase en la siguiente pestaña se usará en la aplicación para conectar Firebase y las APIs de Maps, por lo que vale la pena copiarlo de la sección "Use the script tag". Lo pegarás en el archivo index.html del proyecto.
Haz clic en Siguiente para las otras secciones y, luego, consulta la app creada en la sección de configuración del proyecto del sitio.
Si necesitas volver y encontrar los detalles de la configuración más adelante, también puedes encontrar los detalles de la app en el botón "Configuración", como se muestra a continuación:
Antes de salir de esta sección, deberás anotar el dominio del sitio de Firebase Hosting creado para usarlo más adelante con reCAPTCHA. Esto permite que el nombre del sitio se vincule al proveedor de certificación, lo que significa que solo se verificarán las solicitudes de ese sitio.
Ve a la sección de hosting desde los accesos directos del proyecto o el menú Compilar de la izquierda.
o 
En la sección, busca el dominio que se creó para la aplicación. Es posible que debas hacer clic en algunas pantallas para configurarlo si aún no lo hiciste.
6. Protege las claves de API
Ingresa a Cloud Console con la misma cuenta que usas en Firebase para ver el proyecto que se creó.
Si tienes varios proyectos, es posible que debas usar el menú desplegable o el cuadro de búsqueda para seleccionar el correcto, con el nombre de tu proyecto de Firebase.
Se abrirá el proyecto recién creado. Ahora agregarás la API de Maps JavaScript a este proyecto para que se pueda usar dentro de él, lo que incluye restringir su uso a una clave de API y un dominio de hosting específicos.
Usa el menú del lado izquierdo para habilitar las APIs de Maps en el proyecto. Selecciona la opción "APIs y servicios" y "APIs y servicios habilitados".
Selecciona la opción "HABILITAR APIS Y SERVICIOS".
Ingresa "API de Maps JavaScript" en el cuadro de búsqueda.
Selecciona el resultado coincidente.
Luego, haz clic en Habilitar en la API para agregarla a tu proyecto (es posible que ya se haya hecho si usaste este proyecto antes).
Una vez que se habilite, puedes agregar una clave de API y restringirla, pero, por ahora, omitiremos este paso.
Vuelve a usar las opciones del menú de la izquierda para regresar a la sección API y servicios y selecciona la clave del navegador que se creó para ti.
Agrega la API de Maps JavaScript a una de las restricciones de API.
En el caso de las claves de una aplicación activa, también deberías limitar el dominio que aloja la aplicación. Hazlo ahora con el dominio que se creó para ti en Firebase. También debes agregar /* al final del dominio para asegurarte de que abarque todas las rutas que se encuentran debajo de él.
Puedes encontrar más detalles para habilitar esta opción en la siguiente ubicación para obtener más información sobre cómo restringir las claves de API.
https://developers.google.com/maps/api-security-best-practices#restricting-api-keys
7. Crea secretos de reCAPTCHA
El siguiente paso es crear un proyecto de reCAPTCHA para proporcionar la certificación y las claves tanto para el cliente como para el servidor.
Ve al sitio de reCAPTCHA en https://www.google.com/recaptcha/ y haz clic en el botón para comenzar.
Luego, registra un sitio nuevo y asegúrate de ingresar el dominio correcto para restringir.
También asegúrate de haber seleccionado el mismo proyecto de Google Cloud que creó Firebase en caso de que tengas más de uno.
Esto crea dos claves: una clave secreta que ingresarás en Firebase console (nunca debe colocarse en ninguna página o aplicación que se pueda ver públicamente) y una clave del sitio que usarás en la aplicación web.
Mantén esta página abierta, ya que la necesitarás. Haz clic en el botón para copiar la clave secreta y, luego, vuelve al sitio de Firebase.
8. Agrega reCAPTCHA a Firebase
En la consola de Firebase Admin, ve a los elementos del menú de la izquierda. En el elemento del menú Build, elige App Check.
La lista de servicios no se puede habilitar hasta que haya una app registrada (se creó anteriormente cuando se agregó el hosting al sitio). Haz clic en Comenzar si necesitas configurar esto.
Haz clic en la pestaña App, abre la app web, ingresa el secreto que copiaste del sitio de reCAPTCHA y haz clic en Guardar.
Ahora debería aparecer una marca de verificación verde junto al proveedor de reCAPTCHA. Ahora, esta aplicación web puede usar reCAPTCHA para confirmar si un usuario o sitio llama al servicio correctamente.
En la pestaña APIs, ahora debería mostrarse que la API de Google Maps Platform está activa, pero no se aplica.
Ahora vinculaste el secreto de reCAPTCHA con el proyecto de Firebase y puedes agregar el código a la página web para que la clave del sitio coincida con el proveedor adecuado para usar con la aplicación de Maps.
reCAPTCHA verifica que la clave del sitio coincida con la clave secreta. Una vez que se realiza la verificación, se confirma que la página de llamada es correcta y App Check proporciona un token que se puede usar en llamadas posteriores a la API de Maps JavaScript. Sin esta certificación, no se proporcionará el token y no se podrán validar las solicitudes.
9. Agrega la verificación a la página y, luego, implementa.
Vuelve a la consola de Cloud y copia la clave de API que se necesita para usar la API de Maps.
Puedes encontrarlo en el menú lateral de la consola, en el menú lateral de APIs y servicios, en la opción Credenciales.
Desde aquí, puedes seleccionar la clave del navegador existente (aunque, como se indicó, puedes usar otra clave existente o crear una nueva).
Haz clic en el botón para mostrar la clave y cópiala de la ventana de diálogo que se muestra.
Regresa al proyecto de Firebase Studio en el que se abrió la página HTML que creaste anteriormente. Ahora puedes agregar la clave de API a la página para que la API de Maps funcione donde la página tenga "YOUR_API_KEY".
Cuando vuelvas a ejecutar la página, aparecerá un mensaje de error diferente.
Esto significa que el dominio de desarrollo desde el que alojas la página no está permitido (solo agregamos el dominio implementado). Tendremos que publicar este sitio en el dominio correcto con Firebase Hosting. Puedes obtener más detalles en la siguiente ubicación:
Realiza la implementación con Firebase Hosting
y este video
Compila, prueba e implementa tus apps web de Firebase más rápido en Project IDX
Encontrarás más detalles en Errores de carga del mapa en el sitio de la API de Maps JavaScript.
Si recibes el error RefererNotAllowedMapError, puedes corregirlo implementando la página en el dominio correcto.
Vuelve a Firebase Studio y haz clic en el ícono "Firebase Studio" (puede estar en el extremo izquierdo o derecho, según la opción que hayas configurado) para abrir las opciones de Hosting.
En este codelab, a continuación, deberás "Alojar la app con Firebase" para conectar tu instancia de Firebase con la aplicación de Studio.
Luego, haz clic en "Autentica Firebase" para iniciar el proceso de autenticación, lo que permitirá que tu cuenta automatice el hosting con el backend desde Studio.
Sigue las instrucciones de la ventana de comandos para autorizar la implementación.
Sigue las instrucciones en pantalla (incluida la apertura de una ventana nueva), copia el código de autorización cuando se te solicite y pégalo en la ventana de comandos de Firebase Studio.
Puedes obtener más detalles sobre este proceso en la siguiente ubicación:
https://firebase.google.com/docs/studio/deploy-app
Una vez que lo hayas hecho, puedes hacer clic en "Inicializar Firebase Hosting" para vincular el proyecto al proyecto de Firebase.
Selecciona "Usar un proyecto existente" y elige el proyecto que creaste en la sección anterior. Acepta el resto de los valores predeterminados (tu ejemplo puede variar según el nombre que elijas cuando configures el proyecto).
Regresa a la vista del explorador y reemplaza el archivo index.html creado en el directorio público por el que ya tenías en el directorio raíz.
Ahora puedes volver a la barra lateral de Firebase Studio y, luego, implementar el sitio en producción.
Esto mostrará los pasos de implementación en la consola.
Abre el sitio implementado desde la "URL de Hosting" que se muestra (aquí se indica como https://my-app-check-project.web.app/, pero será diferente para tu proyecto).
Ahora, la aplicación mostrará el mapa en la página, ya que las APIs funcionan para los dominios que se usan.
Ahora hay una página en funcionamiento, con restricciones sobre el tipo de APIs que se pueden usar con la clave de API y los dominios para los que se puede usar la clave de API. El siguiente paso es bloquear el acceso solo a ese dominio. Para ello, deberás agregar la sección de la secuencia de comandos de Firebase que se generó anteriormente para proteger la página con App Check. Esto se hará en la próxima sección.
10. Página segura
Si bien la página actual protege la clave de API para el dominio, no agrega el paso de certificación para asegurarse de que la use la aplicación correcta y una persona. Es posible que un agente malicioso robe la llave y la use. Para detener esta configuración de Firebase, se deben agregar la clave del proveedor y del sitio a la página para obtener el token correcto para el cliente.
También puedes ver que el uso de la API de Maps se hace un seguimiento en Firebase. Como no usa ningún token correcto, realiza solicitudes no verificadas.
Los detalles de conexión necesarios se pueden obtener del proyecto de Firebase.
Obtén los detalles de Firebase desde la consola que contiene los detalles de configuración de Firebase. Ve a la página de configuración del proyecto en Firebase y, en la sección CDN de la app, toma la sección de código para la configuración de CDN (la más simple).
En el proyecto de Firebase, elige el ícono de ajustes para mostrar la configuración del proyecto.
Se abrirá la siguiente página, que contiene los detalles en la sección general, en tus apps.
Copia este código en la página de Firebase Studio (public/index.html) que contiene el mapa y está alojada. Se verá de la siguiente manera (con tus detalles y no exactamente los de este archivo):
<!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>
Ahora que Firebase se agregó a nuestra aplicación, las llamadas a la biblioteca de reCAPTCHA usan la clave del sitio proporcionada que obtuviste antes del sitio de reCAPTCHA (de antes).
Puedes obtener más detalles para agregar estas secciones en la siguiente página de documentación de Maps:
https://developers.google.com/maps/documentation/javascript/maps-app-check
Agrega la biblioteca de App Check a la página y, luego, carga las funciones para inicializar App Check con la configuración de Firebase y obtener el token con ReCaptchaV3Provider.
Primero, importa la biblioteca de la Verificación de aplicaciones:
import {
getToken,
initializeAppCheck,
ReCaptchaV3Provider,
} from "https://www.gstatic.com/firebasejs/12.2.1/firebase-app-check.js";
A continuación, agrega el código para inicializar la Verificación de aplicaciones con la configuración de Firebase y el proveedor de reCAPTCHA usando el token del sitio.
// Get App Check Token
const appCheck = initializeAppCheck(app, {
provider: new ReCaptchaV3Provider('<INSERT SITE KEY>'),
isTokenAutoRefreshEnabled: true,
});
Por último, adjunta una función al control de mapa con la función de configuración de la biblioteca de Maps Core para obtener un token. Esto hará que las solicitudes de tokens sean necesarias para el control del mapa, según la duración del token.
const { Settings } = await google.maps.importLibrary('core');
Settings.getInstance().fetchAppCheckToken = () =>
getToken(appCheck, /* forceRefresh = */ false);
El archivo completo es el siguiente:
<!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>
Implementa esto en el sitio de Firebase con Firebase Studio y ejecuta la página.
11. Aplica la supervisión
Ahora que la página está configurada, cuando se ejecute, podrás ver que se está verificando. Regresa a Firebase console y vuelve a abrir la sección App Check. Ahora, App Check debería supervisar la API de Maps JavaScript.
Al abrir la ventana, se mostrará que los clientes están realizando solicitudes y que la certificación está funcionando (las solicitudes "verificadas" de color azul oscuro se muestran en el gráfico). Otras solicitudes mostrarán llamadas durante la fase de desarrollo antes de que se complete la verificación.
Ahora que se puede ver que los clientes funcionan, se puede habilitar la aplicación en el sitio para asegurarse de que las claves de API no se puedan usar desde una aplicación cliente no válida. Haz clic en el botón Aplicar para iniciar la aplicación.
Si haces clic en este botón, aparecerá un gran signo de advertencia que indica que se bloqueará tu aplicación. En el mundo real, solo harías esto cuando sepas que todos tus clientes tienen las claves correctas y que funcionan. De lo contrario, es posible que los usuarios no puedan acceder al sitio.
También puede tardar en aplicarse. Esto se indica en la pantalla. Si realizas la prueba de aplicación de inmediato, es posible que no haya tenido tiempo de propagarse.
Cuando realices la solicitud de la página, deberías poder ver que funciona como antes, ya que no se realizó ningún cambio en el sitio.
Con el tiempo, deberías ver que aumenta la cantidad de solicitudes verificadas en la consola, como se muestra aquí:
Para probar si funciona, vuelve al ejemplo original del codelab y crea una página nueva sin la funcionalidad de App Check. Llama a esta página nocheck.html y colócala en la carpeta pública, en el mismo lugar que 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 vez que hayas hecho esto y hayas ingresado la clave de API correcta, cuando solicites la página (usa tu dominio/nocheck.html), deberías ver el siguiente cuadro de error gris.
Al revisar la consola, deberías ver un mensaje de error como el siguiente:
App Check bloqueó correctamente la solicitud del mapa en la página, ya que ya no recibe el token de App Check para el sitio aplicado.
12. ¡Felicitaciones!
¡Felicitaciones! Habilitaste correctamente la Verificación de aplicaciones en tu sitio.
Compilaste correctamente una aplicación que usa la Verificación de aplicaciones de Firebase para asegurarse de que las solicitudes provengan de un dominio y un usuario válidos.
Qué aprendiste
- Cómo usar Firebase Studio para alojar e implementar una página web
- Cómo usar Cloud Console para habilitar y proteger las APIs de Google Maps Platform
- Cómo usar reCAPTCHA para generar claves que se pueden usar para certificar llamadas
- Cómo usar la Verificación de aplicaciones de Firebase y cómo integrarla en la API de Maps JavaScript
- Descubre cómo aplicar y supervisar llamadas a sitios protegidos con Firebase Studio.
Próximos pasos
- Consulta la documentación de App Check para la API de Google Maps JavaScript
- Obtén más información sobre App Check en Firebase.
- Prueba otro codelab con App Check y la API de Google Maps Places.
- Obtén más información sobre reCAPTCHA.