1. Zanim zaczniesz
Co utworzysz.
W tym laboratorium kodowania użyjesz Sprawdzania aplikacji, aby dodać kolejną warstwę ochrony do klucza interfejsu API używanego w środowisku internetowym.
W ramach tego laboratorium wykonasz te czynności, aby połączyć funkcje:
- Utwórz stronę internetową, na której będzie można wyświetlać mapę za pomocą interfejsu Maps JavaScript API Google Maps Platform.
- Umieść stronę na serwerze, aby była dostępna online.
- Ograniczanie domen i interfejsów API, które mogą korzystać z interfejsu API, za pomocą konsoli Google Cloud.
- Dodaj i zainicjuj bibliotekę Sprawdzania aplikacji za pomocą Firebase.
- Dodaj dostawcę atestu, aby sprawdzić ważność aplikacji.
- Wymuszaj sprawdzanie w aplikacji i monitoruj je.
Po ukończeniu tego samouczka będziesz mieć działającą witrynę, która wymusza zabezpieczenia zarówno w przypadku używanych kluczy interfejsu API, jak i domen, z których są one dostępne, oraz typów aplikacji, które mogą ich używać.
2. Wymagania wstępne
Włączenie usługi App Check wymaga użycia 3 usług Google, które zapewniają ochronę. Zapoznaj się z tymi obszarami.
Firebase – zapewnia egzekwowanie usług, które sprawdzają, czy klucze interfejsu API są używane w odpowiednich domenach. Zapewni to również funkcje hostingu i wdrażania dzięki Firebase Studio.
reCAPTCHA – ta usługa umożliwia sprawdzanie, czy z aplikacji korzystają ludzie, a także udostępnia klucze publiczne i prywatne do łączenia Firebase z domeną aplikacji klienckiej.
Google Cloud Platform – zawiera klucze API używane przez Google Maps Platform i Firebase oraz ograniczenie domeny korzystającej z klucza Map.
Na tym schemacie architektury możesz zobaczyć, jak te elementy ze sobą współpracują:
Gdy korzystasz z usługi App Check i Google Maps Platform, te elementy współpracują ze sobą, aby określić, czy żądania pochodzą z prawidłowej aplikacji i od prawidłowego użytkownika, na podstawie atestu dostarczonego przez dostawcę atestów, w tym przypadku reCAPTCHA.
Odbywa się to za pomocą pakietu SDK App Check udostępnianego przez Firebase, który sprawdza ważność wywołującej aplikacji, a następnie udostępnia jej token, za pomocą którego są wykonywane kolejne wywołania interfejsu API JavaScript Map Google. Z kolei interfejs Google Maps Platform Javascript API sprawdza ważność podanego tokena w Firebase, aby upewnić się, że pochodzi on z odpowiedniej domeny, ale też od dostawcy atestów od prawidłowego użytkownika.
Więcej informacji o korzystaniu z App Check i interfejsu Maps JavaScript API znajdziesz w tym miejscu. Zapoznaj się z wymaganymi krokami.
https://developers.google.com/maps/documentation/javascript/maps-app-check
3. Konfiguracja
Jeśli nie masz jeszcze konta Google Cloud, musisz je utworzyć i włączyć płatności. Przed rozpoczęciem postępuj zgodnie z instrukcjami, aby utworzyć ten plik.
Konfigurowanie Google Maps Platform
Jeśli nie masz jeszcze konta Google Cloud Platform i projektu z włączonymi płatnościami, zapoznaj się z przewodnikiem Pierwsze kroki z Google Maps Platform, aby utworzyć konto rozliczeniowe i projekt.
- W konsoli Google Cloud kliknij menu projektu i wybierz projekt, którego chcesz użyć w tym samouczku.
- Włącz interfejsy API i pakiety SDK Google Maps Platform wymagane w tym samouczku w Google Cloud Marketplace. Aby to zrobić, wykonaj czynności opisane w tym filmie lub tej dokumentacji.
- Wygeneruj klucz interfejsu API na stronie Dane logowania w konsoli Cloud. Możesz wykonać czynności opisane w tym filmie lub tej dokumentacji. Wszystkie żądania wysyłane do Google Maps Platform wymagają klucza interfejsu API.
Inne wymagania dotyczące tego ćwiczenia
Aby ukończyć to ćwiczenie, potrzebujesz tych kont, usług i narzędzi:
- Podstawowa znajomość języków JavaScript, HTML i CSS
- Konto Google Cloud z włączonym rozliczeniem (jak wspomnieliśmy).
- Klucz interfejsu API Google Maps Platform z włączonym interfejsem Maps JavaScript API (zostanie to zrobione podczas szkolenia).
- Podstawowa znajomość hostingu i wdrażania stron internetowych (w tym module znajdziesz wskazówki na ten temat). Zrobisz to w konsoli Firebase i Firebase Studio.
- przeglądarkę internetową, w której możesz wyświetlać pliki podczas pracy;
4. Tworzenie strony w Firebase Studio
W tym samouczku nie zakładamy, że masz już utworzoną aplikację. Używamy Firebase Studio do utworzenia strony, na której będzie hostowana aplikacja Mapy, i wdrożenia jej w Firebase na potrzeby testowania. Jeśli masz już aplikację, możesz jej użyć, zmieniając odpowiednie domeny hosta, fragmenty kodu i klucze interfejsu API, aby zapewnić prawidłową implementację.
Otwórz Firebase Studio (wymaga konta Google) i utwórz nową aplikację Simple HTML. Aby wyświetlić tę opcję, może być konieczne kliknięcie przycisku „Zobacz wszystkie szablony”. Możesz też kliknąć ten link, aby uzyskać bezpośredni dostęp.
Nadaj obszarowi roboczemu odpowiednią nazwę, np. myappcheck-map (plus losową liczbę, aby była niepowtarzalna; zostanie ona dodana automatycznie). Firebase Studio utworzy obszar roboczy.
Po wpisaniu nazwy możesz kliknąć przycisk Utwórz, aby rozpocząć proces tworzenia projektu.
Po utworzeniu pliku możesz zastąpić tekst w pliku index.html tym kodem, który tworzy stronę z mapą.
<!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>
Po uruchomieniu powinna wyświetlić się strona z mapą działającej aplikacji, jak pokazano na obrazie, ale!
Gdy strona zostanie wczytana, pojawi się błąd, ponieważ będzie potrzebować klucza interfejsu API Google Maps Platform. Dodamy go w kolejnej sekcji.
Rzeczywisty komunikat o błędzie można zobaczyć w konsoli internetowej w Firebase Studio.
Aby to naprawić, musimy dodać do strony klucz interfejsu API. Klucz interfejsu API łączy stronę z implementacją interfejsu Maps JavaScript API. Jest to też obszar podatny na wykorzystanie, ponieważ musi być zawarty na stronie w niezaszyfrowanej postaci, co umożliwia pobranie klucza interfejsu API i użycie go w innych witrynach.
Jedną z metod ochrony jest stosowanie ograniczeń aplikacji, które mogą być związane z rodzajem używanej aplikacji lub z domeną odsyłającą bądź wywoływanym adresem IP. Więcej informacji o sprawdzonych metodach znajdziesz na tej stronie:
https://developers.google.com/maps/api-security-best-practices#rec-best-practices
lub przez bezpośrednie wywołania z wiersza poleceń lub serwera, czyli aplikacje, które nie mają możliwości podania adresu odsyłającego ani śledzenia, a więc potencjalnie stanowią lukę w zabezpieczeniach.
5. Tworzenie aplikacji Firebase
Firebase służy do powiązania dostawcy atestu, który sprawdza:
- Żądania pochodzą z autentycznej aplikacji.
- Żądania pochodzą z autentycznego, niezmodyfikowanego urządzenia i sesji użytkownika.
W tym samouczku reCAPTCHA v3 będzie używana jako dostawca tego zaświadczenia.
Utwórz aplikację i hosta Firebase.
Otwórz stronę https://firebase.google.com/ i utwórz nowy projekt Firebase, klikając link „Otwórz konsolę”.
Utwórz nowy projekt, klikając ten obszar.
Wybierz nazwę projektu, np. My App Check Project. Nie musi być taka sama jak wcześniej, ponieważ służy tylko do celów informacyjnych. Rzeczywistą nazwę projektu możesz edytować poniżej tekstu. Będzie się ona składać z wpisanej nazwy, a jeśli nie będzie unikalna, zostanie do niej dodana liczba.
Jeśli pojawi się prośba o dodanie do aplikacji innych usług (np. Google Analytics), możesz ją zaakceptować lub odrzucić. W tym samouczku nie są one potrzebne, więc możesz je pominąć.
Kliknij przycisk „Utwórz projekt” i poczekaj na utworzenie projektu. Gdy to nastąpi, otrzymasz powiadomienie.
Gdy będziesz gotowy(-a) do rozpoczęcia interakcji z projektem, kliknij Dalej.
Na stronie głównej możesz rozpocząć pracę, dodając Firebase do aplikacji i wybierając opcję internetową.
Skonfiguruj Hosting Firebase dla swojej witryny, aby po wdrożeniu plików miały one gdzie trafić (w przypadku rzeczywistej witryny możesz użyć własnej opcji, ale aby wykonać to ćwiczenie, wdrożysz pliki w Hostingu Firebase).
Aby utworzyć aplikację, kliknij Zarejestruj aplikację. Następnie użyjesz utworzonego skryptu, aby odwołać się do projektu w Firebase z poziomu aplikacji internetowej.
Kod konfiguracji Firebase na następnej karcie będzie używany w aplikacji do łączenia Firebase i interfejsów API Map. Warto go skopiować z sekcji „Użyj tagu skryptu”. Wklej go do pliku index.html projektu.
Kliknij Dalej, aby przejść do innych sekcji, a potem sprawdź utworzoną aplikację w sekcji ustawień projektu w witrynie.
Jeśli chcesz później wrócić do szczegółów konfiguracji, możesz też znaleźć szczegóły aplikacji, klikając przycisk „Ustawienia”, jak pokazano poniżej:
Zanim opuścisz tę sekcję, musisz zapisać domenę utworzonej witryny hostingowej Firebase, która będzie później używana z reCAPTCHA. Dzięki temu nazwa witryny jest powiązana z dostawcą atestów, co oznacza, że weryfikowane będą tylko żądania z tej witryny.
W sekcji hostingu kliknij skróty do projektu lub menu Kompilacja po lewej stronie.
lub 
W tej sekcji znajdź domenę utworzoną dla aplikacji. Jeśli nie zostało to jeszcze zrobione, może być konieczne przejście przez kilka ekranów, aby skonfigurować tę funkcję.
6. Zabezpieczanie kluczy interfejsu API
Zaloguj się w Cloud Console na to samo konto, którego używasz w Firebase, aby wyświetlić utworzony projekt.
Jeśli masz kilka projektów, może być konieczne użycie menu lub pola wyszukiwania, aby wybrać właściwy projekt o nazwie projektu Firebase.
Otworzy się nowo utworzony projekt. Teraz dodasz do tego projektu interfejs Maps JavaScript API, aby można było go używać w projekcie, w tym ograniczyć jego użycie do konkretnego klucza interfejsu API i domeny hostingu.
W menu po lewej stronie włącz interfejsy API Map Google w projekcie. Wybierz opcję „Interfejsy API i usługi” oraz „Włączone interfejsy API i usługi”.
Wybierz opcję „WŁĄCZ INTERFEJSY API I USŁUGI”.
W polu wyszukiwania wpisz „Maps Javascript API”.
Wybierz pasujący wynik.
Następnie kliknij „Włącz” przy interfejsie API, aby dodać go do projektu (może to być już zrobione, jeśli projekt był wcześniej używany).
Po włączeniu tej opcji możesz dodać klucz interfejsu API i ograniczyć jego użycie, ale na razie pominiemy ten krok.
Ponownie użyj opcji w menu po lewej stronie, aby wrócić do sekcji Interfejsy API i usługi, a następnie wybierz klucz przeglądarki, który został utworzony.
Dodaj interfejs Maps JavaScript API do jednego z ograniczeń interfejsu API.
W przypadku kluczy w aktywnej aplikacji należy też ograniczyć domenę, w której jest ona hostowana. Zrób to teraz, używając domeny utworzonej dla Ciebie w Firebase. Na końcu domeny dodaj też /*, aby obejmowała wszystkie ścieżki pod nią.
Więcej informacji o włączaniu tej funkcji znajdziesz w tym miejscu.
https://developers.google.com/maps/api-security-best-practices#restricting-api-keys
7. Tworzenie kluczy tajnych reCAPTCHA
Następnym krokiem jest utworzenie projektu reCAPTCHA, który będzie dostarczać atest i klucze zarówno dla klienta, jak i serwera.
Wejdź na stronę reCAPTCHA pod adresem https://www.google.com/recaptcha/ i kliknij przycisk Rozpocznij.
Następnie zarejestruj nową witrynę i upewnij się, że wpisujesz prawidłową domenę, aby ją ograniczyć.
Jeśli masz więcej niż 1 projekt, wybierz ten sam projekt Google Cloud, który został utworzony przez Firebase.
W ten sposób utworzysz 2 klucze: klucz tajny, który wpiszesz w konsoli Firebase (nigdy nie umieszczaj go na żadnej stronie ani w żadnej aplikacji, które mogą być publicznie wyświetlane), oraz klucz witryny, którego będziesz używać w aplikacji internetowej.
Pozostaw tę stronę otwartą, ponieważ będzie Ci potrzebna. Kliknij przycisk kopiowania tajnego klucza, a potem wróć do witryny Firebase.
8. Dodawanie reCAPTCHA do Firebase
W konsoli administracyjnej Firebase otwórz menu po lewej stronie. W menu Build (Kompilacja) wybierz App Check.
Listy usług nie można włączyć, dopóki nie zostanie zarejestrowana aplikacja (została ona utworzona wcześniej, gdy do witryny dodano hosting). Jeśli musisz to skonfigurować, kliknij Rozpocznij.
Kliknij kartę Aplikacja, otwórz aplikację internetową, a następnie wpisz tajny klucz skopiowany z witryny reCAPTCHA i kliknij Zapisz.
Obok dostawcy reCAPTCHA powinien pojawić się zielony znacznik wyboru. Ta aplikacja internetowa może teraz używać reCAPTCHA do potwierdzania, czy użytkownik lub witryna prawidłowo wywołuje usługę.
Na karcie Interfejsy API powinien być teraz widoczny komunikat, że interfejs API Google Maps Platform jest aktywny, ale nie jest już egzekwowany.
Klucz tajny reCAPTCHA został połączony z projektem Firebase. Możesz teraz dodać kod do strony internetowej, aby dopasować klucz witryny do odpowiedniego dostawcy do użytku z aplikacją Mapy.
Klucz witryny jest sprawdzany przez reCAPTCHA pod kątem zgodności z kluczem tajnym. Po zakończeniu tego procesu potwierdza, że strona wywołująca jest prawidłowa, a Sprawdzanie aplikacji udostępnia token, który może być używany w kolejnych wywołaniach interfejsu Maps Javascript API. Bez tego potwierdzenia token nie zostanie przyznany, a żądania nie będą mogły zostać zweryfikowane.
9. Dodaj weryfikację do strony i wdroż ją.
Wróć do konsoli Cloud i skopiuj klucz interfejsu API, który jest potrzebny do korzystania z interfejsu API Map Google.
Znajdziesz go w menu bocznym konsoli w sekcji Interfejsy API i usługi, a następnie w sekcji Dane logowania.
Możesz wybrać istniejący klucz przeglądarki (pamiętaj jednak, że możesz użyć innego istniejącego klucza lub utworzyć nowy).
Kliknij przycisk wyświetlania klucza i skopiuj klucz z wyświetlonego okna dialogowego.
Wróć do projektu Firebase Studio, w którym wcześniej otwarto utworzoną stronę HTML. Teraz możesz dodać klucz interfejsu API do strony, aby interfejs Maps API działał w miejscu, w którym na stronie znajduje się „YOUR_API_KEY”.
Po ponownym uruchomieniu strony pojawi się inny komunikat o błędzie.
Oznacza to, że domena deweloperska, z której hostujesz stronę, jest niedozwolona (dodaliśmy tylko wdrożoną domenę). Musimy opublikować tę witrynę w odpowiedniej domenie za pomocą Hostingu Firebase. Więcej informacji znajdziesz w tym miejscu:
Wdrażanie za pomocą Hostingu Firebase
i ten film.
Szybsze tworzenie, testowanie i wdrażanie aplikacji internetowych Firebase w Project IDX
Więcej informacji znajdziesz w sekcji Błędy wczytywania mapy na stronie interfejsu Maps JavaScript API.
Jeśli wystąpi błąd RefererNotAllowedMapError, możesz go naprawić, wdrażając stronę w odpowiedniej domenie.
Wróć do Firebase Studio i kliknij ikonę „Firebase Studio” (może ona znajdować się po lewej lub prawej stronie w zależności od skonfigurowanej opcji), aby otworzyć opcje hostingu.
W tym laboratorium kodowania musisz teraz „Hostować aplikację za pomocą Firebase”, aby połączyć instancję Firebase z aplikacją Studio.
Następnie kliknij „Uwierzytelnij Firebase” , aby rozpocząć proces uwierzytelniania. Dzięki temu Twoje konto będzie mogło automatyzować hosting z backendem w studio.
Aby autoryzować wdrożenie, postępuj zgodnie z instrukcjami w oknie poleceń.
Postępuj zgodnie z instrukcjami wyświetlanymi na ekranie (w tym otwórz nowe okno), skopiuj kod autoryzacji w miejscu, w którym jest o to proszony, i wklej go w oknie poleceń w Studio Firebase.
Więcej informacji o tym procesie znajdziesz w tym miejscu:
https://firebase.google.com/docs/studio/deploy-app
Gdy to zrobisz, możesz kliknąć „initialize firebase hosting” (inicjuj hosting Firebase), aby połączyć projekt z projektem Firebase.
Kliknij „Użyj istniejącego projektu” i wybierz projekt utworzony w poprzedniej sekcji. Zaakceptuj pozostałe ustawienia domyślne (przykład może się różnić w zależności od nazwy wybranej podczas konfigurowania projektu).
Wróć do widoku eksploratora i zastąp utworzony plik index.html w katalogu publicznym plikiem, który był już w katalogu głównym.
Możesz teraz wrócić do paska bocznego Firebase Studio i wdrożyć witrynę w wersji produkcyjnej.
W konsoli pojawią się kroki wdrażania.
Otwórz wdrożoną witrynę, klikając wyświetlony „Adres URL hostingu” (w tym przypadku https://my-app-check-project.web.app/, ale w Twoim projekcie będzie inny).
Aplikacja wyświetli teraz mapę na stronie, ponieważ interfejsy API działają w przypadku używanych domen.
Teraz masz działającą stronę z ograniczeniami dotyczącymi typu interfejsów API, które mogą być używane z kluczem interfejsu API, oraz domen, w których można go używać. Następnym krokiem jest ograniczenie dostępu tylko do tej domeny. Aby to zrobić, musisz dodać wygenerowaną wcześniej sekcję skryptu Firebase, aby zabezpieczyć stronę za pomocą Sprawdzania aplikacji. Zrobimy to w następnej sekcji.
10. Bezpieczna strona
Obecna strona zabezpiecza klucz interfejsu API dla domeny, ale nie dodaje kroku atestowania, aby mieć pewność, że jest on używany przez właściwą aplikację i przez osobę. Klucz może zostać skradziony i wykorzystany przez osobę o złych zamiarach. Aby temu zapobiec, musisz dodać do strony konfigurację Firebase, dostawcę i klucz witryny, aby uzyskać prawidłowy token dla klienta.
Możesz też zauważyć, że w przypadku interfejsu API Map Google użycie jest śledzone w Firebase. Nie używa on żadnych prawidłowych tokenów, więc wysyła niezweryfikowane żądania.
Wymagane szczegóły połączenia można uzyskać w projekcie Firebase.
Pobierz z konsoli szczegóły Firebase, które zawierają informacje o konfiguracji Firebase. Otwórz stronę ustawień projektu w Firebase i w sekcji CDN aplikacji pobierz sekcję kodu konfiguracji CDN (najprostszej).
W projekcie Firebase kliknij ikonę koła zębatego, aby wyświetlić ustawienia projektu.
Otworzy się strona z informacjami w sekcji ogólnej pod Twoimi aplikacjami.
Skopiuj ten kod na stronę Firebase Studio (public/index.html), która zawiera mapę i jest hostowana. Będzie on wyglądać mniej więcej tak (z Twoimi danymi, a nie z danymi z tego pliku):
<!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>
Firebase został dodany do naszej aplikacji. Wywołania biblioteki reCAPTCHA są teraz wykonywane przy użyciu podanego klucza witryny, który został wcześniej pobrany z witryny reCAPTCHA.
Więcej informacji o dodawaniu tych sekcji znajdziesz na tej stronie dokumentacji Map:
https://developers.google.com/maps/documentation/javascript/maps-app-check
Dodaj do strony bibliotekę Sprawdzania aplikacji, a potem wczytaj funkcje, aby zainicjować sprawdzanie aplikacji za pomocą konfiguracji Firebase i pobrać token za pomocą ReCaptchaV3Provider.
Najpierw zaimportuj bibliotekę App Check:
import {
getToken,
initializeAppCheck,
ReCaptchaV3Provider,
} from "https://www.gstatic.com/firebasejs/12.2.1/firebase-app-check.js";
Następnie dodaj kod, aby zainicjować Sprawdzanie aplikacji za pomocą konfiguracji Firebase i dostawcy reCAPTCHA przy użyciu tokena witryny.
// Get App Check Token
const appCheck = initializeAppCheck(app, {
provider: new ReCaptchaV3Provider('<INSERT SITE KEY>'),
isTokenAutoRefreshEnabled: true,
});
Na koniec dołącz funkcję do elementu sterującego mapą za pomocą funkcji ustawień biblioteki podstawowej Map, aby uzyskać token. Spowoduje to wysyłanie żądań tokenów zgodnie z wymaganiami kontrolki mapy w zależności od czasu życia tokena.
const { Settings } = await google.maps.importLibrary('core');
Settings.getInstance().fetchAppCheckToken = () =>
getToken(appCheck, /* forceRefresh = */ false);
Pełna zawartość pliku:
<!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>
Wdróż go w witrynie Firebase za pomocą Firebase Studio i uruchom stronę.
11. Wymuszanie monitorowania
Gdy strona jest już skonfigurowana, możesz sprawdzić, czy jest sprawdzana. Wróć do konsoli Firebase i ponownie otwórz sekcję Weryfikacja aplikacji. Funkcja Sprawdzanie aplikacji powinna teraz monitorować interfejs Maps JavaScript API.
Po otwarciu okna zobaczysz, że klienci wysyłają żądania i że atestowanie działa (na wykresie widać ciemnoniebieskie żądania „zweryfikowane”). W przypadku innych żądań połączenia będą widoczne w fazie rozwoju, zanim weryfikacja zostanie zakończona.
Gdy klienci działają prawidłowo, można włączyć egzekwowanie w witrynie, aby mieć pewność, że kluczy API nie można używać w nieprawidłowej aplikacji klienckiej. Aby rozpocząć egzekwowanie, kliknij przycisk Wymuś.
Po kliknięciu tego przycisku pojawi się duży znak ostrzegawczy informujący, że spowoduje to zablokowanie aplikacji. W rzeczywistości należy to zrobić tylko wtedy, gdy masz pewność, że wszyscy klienci mają odpowiednie klucze i działają prawidłowo. W przeciwnym razie użytkownicy mogą nie mieć dostępu do witryny.
Wprowadzenie ich w życie może też zająć trochę czasu. Jeśli od razu sprawdzisz egzekwowanie zasad, może się okazać, że nie zdążyły one jeszcze się rozprzestrzenić.
Podczas wysyłania prośby o stronę powinna ona działać jak wcześniej. W witrynie nic się nie zmieniło.
Z czasem liczba zweryfikowanych próśb w konsoli powinna wzrosnąć, jak widać na tym przykładzie:
Aby sprawdzić, czy działa, wróć do oryginalnego przykładu w ćwiczeniu z programowania i utwórz nową stronę bez funkcji sprawdzania aplikacji. Nazwij tę stronę np. nocheck.html i umieść ją w folderze publicznym w tym samym miejscu co 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>
Gdy to zrobisz i wpiszesz prawidłowy klucz interfejsu API, podczas wysyłania żądania strony (użyj adresu twojadomena/nocheck.html) powinien pojawić się szary komunikat o błędzie.
W konsoli powinien wyświetlić się komunikat o błędzie podobny do tego:
Sprawdzanie aplikacji zablokowało żądanie mapy na stronie, ponieważ nie otrzymuje już tokena sprawdzania aplikacji dla wymuszonej witryny.
12. Gratulacje!
Gratulacje! Sprawdzanie aplikacji zostało włączone w Twojej witrynie.
Udało Ci się utworzyć aplikację, która korzysta ze Sprawdzania aplikacji Firebase, aby mieć pewność, że żądania pochodzą z prawidłowej domeny i od prawidłowego użytkownika.
Czego się dowiedziałeś
- Jak używać Firebase Studio do hostowania i wdrażania strony internetowej.
- Jak włączyć i zabezpieczyć interfejsy API Google Maps Platform za pomocą Cloud Console.
- Jak używać reCAPTCHA do generowania kluczy, które mogą być używane do potwierdzania wywołań.
- Jak używać funkcji Sprawdzanie aplikacji Firebase i integrować ją z interfejsem Maps JavaScript API.
- Dowiedz się, jak egzekwować i monitorować wywołania chronionych witryn za pomocą Firebase Studio.
Co dalej?
- Zapoznaj się z dokumentacją funkcji Sprawdzanie aplikacji w interfejsie Maps JavaScript API.
- Więcej informacji o Sprawdzaniu aplikacji w Firebase
- Wypróbuj inny codelab z funkcją Sprawdzanie aplikacji i interfejsem Google Maps Places API.
- Dowiedz się więcej o reCAPTCHA.