1. Antes de começar
O que você vai criar.
Neste codelab, você vai usar o App Check para adicionar outra camada de proteção à sua chave de API usada em um ambiente da Web.
Especificamente, as seguintes etapas serão seguidas no codelab para unir a funcionalidade:
- Crie uma página da Web para hospedar um mapa usando a API Javascript da Plataforma Google Maps.
- Hospede a página para que ela possa ser acessada on-line.
- Restrinja os domínios e as APIs que podem usar a API com o Console do Cloud.
- Adicione e inicialize a biblioteca do App Check pelo Firebase.
- Adicione o provedor de atestado para verificar a validade dos aplicativos.
- Forçar a verificação no app e no monitor.
Ao final do codelab, você terá um site funcional que aplica a segurança nas chaves de API usadas, nos domínios de acesso e nos tipos de aplicativos que podem usá-las.
2. Pré-requisitos
Para ativar o App Check, é necessário usar três serviços do Google para oferecer proteção. Familiarize-se com essas áreas.
Firebase: oferece a aplicação dos serviços que verificam se as chaves de API estão sendo referenciadas nos domínios adequados. Isso também vai fornecer a funcionalidade de hospedagem e implantação usando o Firebase Studio.
reCAPTCHA: oferece a funcionalidade para verificar se humanos estão usando o aplicativo e também fornece as chaves pública e privada para conectar o Firebase ao domínio do aplicativo cliente.
Google Cloud Platform: fornece as chaves de API usadas pela Plataforma Google Maps e pelo Firebase, além da restrição no domínio usando a chave do Maps.
Confira como tudo isso funciona junto no diagrama de arquitetura a seguir:
Ao usar o App Check e a Plataforma Google Maps, os seguintes elementos trabalham juntos para determinar se as solicitações vêm de um aplicativo e um usuário válidos, usando o atestado fornecido por um provedor de atestado, neste caso, o reCAPTCHA.
Isso é feito usando o SDK do App Check fornecido pelo Firebase, que verifica a validade do aplicativo de chamada e fornece um token para o aplicativo com que as chamadas subsequentes à API JavaScript da Plataforma Google Maps são feitas. Por sua vez, a API JavaScript da Plataforma Google Maps verifica a validade do token fornecido com o Firebase para garantir que ele venha do domínio correto e do provedor de atestado de um usuário válido.
Saiba mais sobre como usar o App Check e a API Maps JavaScript neste local e familiarize-se com as etapas necessárias.
https://developers.google.com/maps/documentation/javascript/maps-app-check
3. Começar a configuração
Se você ainda não tiver uma conta do Google Cloud, configure uma com o faturamento ativado no início. Siga as instruções para criar isso antes de começar.
Configurar a Plataforma Google Maps
Caso você ainda não tenha uma conta do Google Cloud Platform e um projeto com faturamento ativado, veja como criá-los no guia da Plataforma Google Maps.
- No Console do Cloud, clique no menu suspenso do projeto e selecione o projeto que você quer usar neste codelab.
- Ative as APIs e os SDKs da Plataforma Google Maps necessários para este codelab no Google Cloud Marketplace. Para fazer isso, siga as etapas descritas neste vídeo ou nesta documentação.
- Gere uma chave de API na página Credenciais do Console do Cloud. Siga as etapas indicadas neste vídeo ou nesta documentação. Todas as solicitações à Plataforma Google Maps exigem uma chave de API.
Outros requisitos para o codelab
Para concluir este codelab, você precisará das seguintes contas, serviços e ferramentas:
- Conhecimento básico de JavaScript, HTML e CSS
- Uma conta do Google Cloud com o faturamento ativado (como mencionado)
- Uma chave de API da Plataforma Google Maps com a API Maps JavaScript ativada. Isso será feito durante o codelab.
- Conhecimento básico de hospedagem e implantação na Web (você vai receber orientações sobre isso no codelab). Isso será feito pelo console do Firebase e pelo Firebase Studio.
- Um navegador da Web para visualizar os arquivos enquanto trabalha.
4. Criar uma página no Firebase Studio
Este codelab não pressupõe que você já tenha um aplicativo criado e usa o Firebase Studio para criar uma página que hospede o aplicativo de mapa e o implante no Firebase para fins de teste. Se você tiver um aplicativo, também poderá usá-lo. Basta mudar os domínios de host, snippets de código e chaves de API adequados para garantir a implementação correta.
Acesse o Firebase Studio (requer uma Conta do Google) e crie um novo aplicativo HTML simples. Talvez seja necessário clicar no botão "Ver todos os modelos" para mostrar essa opção ou apenas clicar neste link para acesso direto.
Dê um nome adequado ao espaço de trabalho, como myappcheck-map (mais um número aleatório para exclusividade, que será adicionado automaticamente). O Firebase Studio vai criar o espaço de trabalho.
Depois de preencher o nome, clique no botão "Criar" para iniciar o processo de criação do projeto.
Depois de criado, substitua o texto no arquivo index.html pelo código a seguir, que cria uma página com um 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>
Ao executar, o should vai mostrar uma página com um mapa do aplicativo em funcionamento, como mostrado na imagem, mas!
Quando a página for carregada, um erro vai aparecer porque ela precisa de uma chave de API da Plataforma Google Maps, que será adicionada em uma seção posterior.
A mensagem de erro real pode ser vista no console da Web do Firebase Studio.
Para corrigir isso, precisamos adicionar uma chave de API à página. A chave de API é a maneira como a página e a implementação da API Maps JavaScript estão vinculadas. Também é uma área de exploração, já que precisa estar contida na página de maneira não criptografada, em que a chave de API pode ser extraída e usada em sites diferentes.
Um método de proteção é o uso de restrições de aplicativo, seja pelo tipo de aplicativo usado ou pelo domínio ou endereço IP de referência chamado. Saiba mais sobre as práticas recomendadas neste site:
https://developers.google.com/maps/api-security-best-practices#rec-best-practices
ou pelo uso de chamadas diretas da linha de comando ou do servidor, aplicativos que não têm como fornecer um referenciador ou serem rastreados, sendo potencialmente uma falha de segurança.
5. Criar um aplicativo do Firebase
O Firebase é usado para fornecer a funcionalidade de vincular o provedor de atestado para verificar o seguinte:
- As solicitações vêm do seu app autêntico
- As solicitações vêm de um dispositivo e uma sessão de usuário autênticos que não foram comprometidos.
Neste codelab, o reCAPTCHA v3 será usado como o provedor dessa declaração.
Crie um aplicativo e um host do Firebase.
Acesse https://firebase.google.com/ e crie um projeto do Firebase usando o link Acessar console.
Clique na área a seguir para criar um projeto.
Escolha um nome para o projeto, como Meu projeto do App Check. Não precisa ser o mesmo nome usado antes, já que é apenas para referência. O nome real do projeto pode ser editado logo abaixo do texto. Ele será composto pelo nome inserido e, se não for exclusivo, terá um número adicionado.
Se você receber uma solicitação para adicionar outros serviços (como o Google Analytics) ao aplicativo, aceite ou não. No entanto, para este codelab, eles não são necessários e podem ser deixados de fora.
Clique no botão "Criar projeto" e aguarde a criação. Você vai receber uma notificação quando esse processo for concluído.
Clique em "Continuar" quando estiver tudo pronto para começar a interagir com o projeto.
Na página principal, você pode começar adicionando o Firebase ao seu app e escolhendo a opção "Web".
Escolha configurar o Firebase Hosting no seu site para que os arquivos sejam enviados após a implantação. Para seu site real, você pode usar sua própria opção, mas para acompanhar este codelab, você vai implantar no Firebase Hosting.
Clique em "Registrar app" para criar o aplicativo. Em seguida, você vai usar o script criado para referenciar o projeto no Firebase do seu aplicativo da Web.
O código de configuração do Firebase na próxima guia será usado no aplicativo para conectar o Firebase e as APIs Maps. Por isso, vale a pena copiar da seção "Usar a tag de script". que você vai colar no index.html do projeto.
Clique em "Próxima" para as outras seções e confira o app criado na seção de configurações do projeto no site.
Se você precisar voltar e encontrar os detalhes da configuração em uma data posterior, também poderá encontrar os detalhes do app no botão "Configurações", como mostrado abaixo:
Antes de sair desta seção, anote o domínio do site de hospedagem do Firebase criado para uso posterior com o reCAPTCHA. Isso permite que o nome do site seja vinculado ao provedor de atestado, ou seja, apenas solicitações desse site serão verificadas.
Acesse a seção de hospedagem nos atalhos do projeto ou no menu "Build" à esquerda.
ou 
Na seção, procure o domínio criado para o aplicativo. Talvez seja necessário clicar em algumas telas para configurar o recurso, se ele ainda não tiver sido configurado.
6. Proteger chaves de API
Acesse o console do Cloud na mesma conta em que você está usando o Firebase para conferir o projeto criado.
Se você tiver vários projetos, use o menu suspenso ou a caixa de pesquisa para selecionar o correto, com o nome do seu projeto do Firebase.
Isso vai abrir o projeto recém-criado. Agora você vai adicionar a API Maps JavaScript a esse projeto para que ela possa ser usada nele, incluindo a restrição do uso a uma chave de API e um domínio de hospedagem específicos.
Use o menu à esquerda para ativar as APIs Maps no projeto. Selecione a opção "APIs e serviços" e "APIs e serviços ativados".
Selecione a opção "ATIVAR APIS E SERVIÇOS".
Digite "API Maps JavaScript" na caixa de pesquisa.
Selecione o resultado correspondente.
Em seguida, clique em "Ativar" na API para adicioná-la ao projeto. Isso pode já ter sido feito se você usou esse projeto antes.
Depois de ativar essa opção, você pode adicionar e restringir uma chave de API, mas por enquanto vamos pular essa etapa.
Usando novamente as opções do menu à esquerda, volte para a seção "API e serviços" e selecione a chave do navegador criada para você.
Adicione a API Maps JavaScript a uma das restrições de API.
Para chaves em um aplicativo ativo, você também colocaria uma limitação no domínio que estava hospedando o aplicativo. Faça isso agora usando o domínio criado para você no Firebase. Adicione também /* ao final do domínio para garantir que ele cubra todos os caminhos abaixo dele.
Para mais detalhes sobre como ativar essa opção, consulte o seguinte local para saber mais sobre como restringir chaves de API.
https://developers.google.com/maps/api-security-best-practices#restricting-api-keys
7. Criar secrets do reCAPTCHA
A próxima etapa é criar um projeto do reCAPTCHA para fornecer a declaração e as chaves do cliente e do servidor.
Acesse o site do reCAPTCHA em https://www.google.com/recaptcha/ e clique no botão "Começar".
Em seguida, registre um novo site e insira o domínio correto para restringir.
Verifique também se você selecionou o mesmo projeto do Google Cloud que o Firebase criou, caso tenha mais de um.
Isso cria duas chaves: uma secreta, que você vai inserir no console do Firebase e que nunca deve ser colocada em nenhuma página ou aplicativo que possa ser visualizado publicamente, e uma chave de site, que será usada no aplicativo da Web.
Mantenha esta página aberta, porque você vai precisar dela. Clique no botão "Copiar chave secreta" e volte ao site do Firebase.
8. Adicionar o reCAPTCHA ao Firebase
No console de administrador do Firebase, acesse os itens do menu à esquerda. No item de menu Build, escolha App Check.
A lista de serviços não pode ser ativada até que um app seja registrado. Isso foi criado anteriormente quando a hospedagem foi adicionada ao site. Clique em "Começar" se precisar configurar isso.
Clique na guia "App", abra o app da Web, insira o segredo que você copiou do site do reCAPTCHA e clique em "Salvar".
Agora, uma marca de seleção verde vai aparecer ao lado do provedor do reCAPTCHA. Agora, esse aplicativo da Web pode usar o reCAPTCHA para atestar se um usuário ou site está chamando o serviço corretamente.
Na guia "APIs", agora vai aparecer que a API da Plataforma Google Maps está ativa, mas não aplicada.
Agora você vinculou o segredo do reCAPTCHA ao projeto do Firebase e pode adicionar o código à página da Web para corresponder a chave do site ao provedor certo para uso com o aplicativo Maps.
A chave de site é verificada pelo reCAPTCHA para corresponder à chave secreta. Depois disso, ela confirma que a página de chamada está correta, e o App Check fornece um token que pode ser usado por chamadas subsequentes à API JavaScript do Maps. Sem essa declaração, o token não será fornecido, e as solicitações não poderão ser validadas.
9. Adicione a verificação à página e faça a implantação.
Volte ao console do Cloud e copie a chave de API necessária para usar a API Maps.
Você pode encontrar essa informação no menu lateral do console, em "APIs e serviços" e na opção "Credenciais".
Nela, você pode selecionar a chave do navegador atual (embora, como observado, seja possível usar outra chave ou criar uma nova).
Clique no botão "Mostrar chave" e copie a chave da janela de diálogo exibida.
Volte ao projeto do Firebase Studio em que a página HTML criada foi aberta anteriormente. Agora você pode adicionar a chave de API à página para que a API Maps funcione onde a página tem "YOUR_API_KEY".
Quando você executar a página novamente, uma mensagem de erro diferente vai aparecer.
Isso significa que o domínio de desenvolvimento em que você está hospedando a página não é permitido. Só adicionamos o domínio implantado. Vamos precisar publicar esse site no domínio correto usando o Firebase Hosting. Confira mais detalhes neste link:
Implantar com o Firebase Hosting
e este vídeo
Crie, teste e implante seus apps da Web do Firebase mais rápido no Project IDX
Mais detalhes podem ser encontrados em Erros de carregamento de mapa no site da API Maps JavaScript.
Se você tiver o RefererNotAllowedMapError, corrija isso implantando a página no domínio correto.
Volte ao Firebase Studio e clique no ícone "Firebase Studio". Ele pode estar no lado esquerdo ou direito, dependendo da opção configurada. Assim, as opções de hospedagem vão aparecer.
Neste codelab, você precisará "Hospedar o app com o Firebase" para conectar sua instância do Firebase ao aplicativo do Studio.
Em seguida , clique em Autenticar Firebase para iniciar o processo de autenticação. Isso permite que sua conta automatize a hospedagem com o back-end no Studio.
Siga as instruções na janela de comando para autorizar a implantação.
Siga as instruções na tela (incluindo abrir uma nova janela), copie o código de autorização quando solicitado e cole-o na janela de comando do Firebase Studio.
Confira mais detalhes sobre esse processo aqui:
https://firebase.google.com/docs/studio/deploy-app
Depois disso, clique em "Inicializar o Firebase Hosting" para vincular o projeto ao projeto do Firebase.
Selecione "Usar um projeto existente" e escolha o projeto que você criou na seção anterior. Aceite o restante dos padrões. Seu exemplo pode variar dependendo do nome escolhido ao configurar o projeto.
Volte para a visualização do explorador e substitua o arquivo index.html criado no diretório público pelo que você já tinha no diretório raiz.
Agora você pode voltar para a barra lateral do Firebase Studio e implantar o site em produção.
Isso vai mostrar as etapas de implantação no console.
Abra o site implantado no URL de hospedagem mostrado (neste caso, https://my-app-check-project.web.app/, mas será diferente para seu projeto).
O aplicativo vai mostrar o mapa na página enquanto as APIs funcionam para os domínios em uso.
Agora há uma página funcional, com restrições feitas ao tipo de APIs que podem ser usadas com a chave de API e também aos domínios em que a chave de API pode ser usada. A próxima etapa é bloquear o acesso apenas a esse domínio. Para isso, adicione a seção de script do Firebase gerada anteriormente para proteger a página usando o App Check. Isso será feito na próxima seção.
10. Página segura
Embora a página atual proteja a chave de API para o domínio, ela não adiciona a etapa de comprovação para garantir que ela esteja sendo usada pelo aplicativo correto e por uma pessoa. A chave ainda pode ser roubada e usada por um usuário malicioso. Para interromper isso, a configuração, o provedor e a chave do site do Firebase precisam ser adicionados à página para receber o token correto do cliente.
Você também pode ver que o uso da API Maps está sendo rastreado no Firebase. Como não está usando tokens corretos, ele está fazendo solicitações não verificadas.
Os detalhes de conexão necessários podem ser obtidos no projeto do Firebase.
Acesse os detalhes do Firebase no console, que contém os detalhes de configuração do Firebase. Acesse a página de configurações do projeto no Firebase e, na seção CDN do app, pegue a seção de código para a configuração da CDN (a mais simples).
No projeto do Firebase, escolha a engrenagem para mostrar as configurações do projeto.
Isso abre a seguinte página, que contém os detalhes na seção "Geral", em "Seus apps".
Copie isso para a página do Firebase Studio (public/index.html) que contém o mapa e está hospedada. que vai ficar assim (com seus detalhes, não exatamente os deste arquivo):
<!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>
Agora que o Firebase foi adicionado ao nosso aplicativo, as chamadas para a biblioteca reCAPTCHA usam a chave do site fornecida que você recebeu anteriormente do site do reCAPTCHA (de antes).
Para mais detalhes sobre como adicionar essas seções, consulte a seguinte página de documentação do Maps:
https://developers.google.com/maps/documentation/javascript/maps-app-check
Adicione a biblioteca do App Check à página, carregue as funções para inicializar o App Check com a configuração do Firebase e receba o token usando o ReCaptchaV3Provider.
Primeiro, importe a biblioteca do App Check:
import {
getToken,
initializeAppCheck,
ReCaptchaV3Provider,
} from "https://www.gstatic.com/firebasejs/12.2.1/firebase-app-check.js";
Em seguida, adicione o código para inicializar o App Check com a configuração do Firebase e o provedor reCAPTCHA usando o token do site.
// Get App Check Token
const appCheck = initializeAppCheck(app, {
provider: new ReCaptchaV3Provider('<INSERT SITE KEY>'),
isTokenAutoRefreshEnabled: true,
});
Por fim, anexe uma função ao controle de mapa usando a função de configurações da biblioteca principal do Maps para receber um token. Isso fará as solicitações de token conforme necessário pelo controle do mapa, dependendo da duração do token.
const { Settings } = await google.maps.importLibrary('core');
Settings.getInstance().fetchAppCheckToken = () =>
getToken(appCheck, /* forceRefresh = */ false);
O arquivo completo é este:
<!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>
Implante isso no site do Firebase usando o Firebase Studio e execute a página.
11. Aplicar o monitoramento
Agora que a página está configurada, quando ela for executada, você vai ver que ela está sendo verificada. Volte ao console do Firebase e abra a seção "App Check" novamente. O App Check agora vai monitorar a API Maps JavaScript.
Ao abrir a janela, você vai ver que os clientes estão fazendo solicitações e que o atestado está funcionando (mostrado por solicitações "verificadas" em azul-escuro no gráfico). Outras solicitações vão mostrar chamadas durante a fase de desenvolvimento antes da conclusão da verificação.
Agora que os clientes estão funcionando, é possível ativar a aplicação no site para garantir que as chaves de API não possam ser usadas em um aplicativo cliente inválido. Clique no botão "Aplicar" para iniciar a aplicação.
Ao clicar nisso, você vai receber um grande sinal de alerta mostrando que isso vai bloquear seu aplicativo. No mundo real, você só faria isso quando soubesse que todos os seus clientes têm as chaves certas e estão funcionando. Caso contrário, os usuários não poderão acessar o site.
Também pode levar algum tempo para que ela seja aplicada. Isso é indicado na tela. Se você testar a aplicação imediatamente, talvez ela não tenha tido tempo de ser propagada.
Ao fazer a solicitação da página, você vai notar que ela funciona como antes, sem nenhuma mudança no site.
Com o tempo, o número de solicitações verificadas no console vai aumentar, como mostrado aqui:
Para testar se ele está funcionando, volte ao exemplo original no codelab e crie uma nova página sem a funcionalidade de verificação do app. Chame essa página de algo como nocheck.html e coloque-a na pasta pública no mesmo 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>
Depois de fazer isso e inserir a chave de API correta, ao solicitar a página (use seu domínio/nocheck.html), você vai encontrar a seguinte caixa de erro cinza.
Ao verificar o console, você vai encontrar uma mensagem de erro como esta:
A verificação de app bloqueou a solicitação do mapa na página porque não está mais recebendo o token de verificação de app para o site aplicado.
12. Parabéns!
Parabéns! Você ativou o App Check no seu site.
Você criou um aplicativo que usa o Firebase App Check para garantir que as solicitações venham de um domínio e usuário válidos.
O que você aprendeu
- Como usar o Firebase Studio para hospedar e implantar uma página da Web.
- Como usar o console do Cloud para ativar e proteger as APIs da Plataforma Google Maps.
- Como usar o reCAPTURE para gerar chaves que podem ser usadas para atestar chamadas.
- Como usar e integrar o Firebase App Check à API Maps JavaScript.
- Saiba como aplicar e monitorar chamadas para sites protegidos com o Firebase Studio.
A seguir
- Confira a documentação do App Check para a API Google Maps JavaScript.
- Saiba mais sobre o App Check no Firebase.
- Teste outro codelab com o App Check e a API Places do Google Maps.
- Saiba mais sobre o reCAPTCHA.