App Check zum Sichern Ihres API-Schlüssels für die Maps JavaScript API verwenden

1. Hinweis

Wie nutzen Sie Gemini?

In diesem Codelab verwenden Sie App Check, um Ihrem API-Schlüssel, der in einer Webumgebung verwendet wird, eine weitere Schutzebene hinzuzufügen.

Im Codelab werden die folgenden Schritte ausgeführt, um die Funktionalität zu verknüpfen:

• Erstellen Sie eine Webseite, auf der eine Karte mit der Google Maps Platform JavaScript API gehostet wird.
• Hosten Sie die Seite, damit online darauf zugegriffen werden kann.
• Sie können die Domains und APIs, die die API verwenden dürfen, über die Cloud Console einschränken.
• Fügen Sie die App Check-Bibliothek über Firebase hinzu und initialisieren Sie sie.
• Fügen Sie den Attestierungsanbieter hinzu, um die Gültigkeit der Anwendung zu prüfen.
• Prüfung Ihrer App erzwingen und überwachen

Am Ende des Codelabs sollten Sie eine funktionierende Website haben, auf der die Sicherheit der verwendeten API-Schlüssel, der Domains, über die auf sie zugegriffen wird, und der Anwendungstypen, die sie verwenden können, erzwungen wird.

2. Vorbereitung

Wenn Sie App Check aktivieren, müssen Sie drei Google-Dienste verwenden, um den Schutz zu gewährleisten. Machen Sie sich mit diesen Bereichen vertraut.

Firebase: Hier werden die Dienste erzwungen, die prüfen, ob auf die API-Schlüssel über die entsprechenden Domains verwiesen wird. Außerdem werden die Hosting- und Bereitstellungsfunktionen über Firebase Studio bereitgestellt.

reCAPTCHA: Damit lässt sich prüfen, ob die Anwendung von Menschen verwendet wird. Außerdem werden die öffentlichen und privaten Schlüssel für die Verbindung von Firebase mit der Clientanwendungsdomain bereitgestellt.

Google Cloud Platform: Hier finden Sie die API-Schlüssel, die sowohl von der Google Maps Platform als auch von Firebase verwendet werden, sowie die Einschränkung der Domain, die den Maps-Schlüssel verwendet.

Im folgenden Architekturdiagramm sehen Sie, wie diese Komponenten zusammenarbeiten:

Wenn Sie App Check und die Google Maps Platform verwenden, arbeiten die folgenden Elemente zusammen, um mithilfe der von einem Attestierungsanbieter (in diesem Fall reCAPTCHA) bereitgestellten Attestierung festzustellen, ob die Anfragen von einer gültigen Anwendung und einem gültigen Nutzer stammen.

Dies erfolgt über das von Firebase bereitgestellte App Check SDK, das die Gültigkeit der aufrufenden Anwendung prüft und dann ein Token für die Anwendung bereitstellt, mit dem nachfolgende Aufrufe der Google Maps Platform JavaScript API erfolgen. Die Google Maps Platform JavaScript API prüft dann die Gültigkeit des bereitgestellten Tokens bei Firebase, um sicherzustellen, dass es sowohl von der richtigen Domain als auch über den Attestierungsanbieter von einem gültigen Nutzer stammt.

Weitere Informationen zur Verwendung von App Check und der Maps JavaScript API finden Sie unter dem folgenden Link. Bitte machen Sie sich mit den erforderlichen Schritten vertraut.

https://developers.google.com/maps/documentation/javascript/maps-app-check

3. Einrichten

Wenn Sie noch kein Google Cloud-Konto haben, müssen Sie eines mit aktivierter Abrechnung einrichten. Folgen Sie der Anleitung, um das Konto zu erstellen, bevor Sie beginnen.

Google Maps Platform einrichten

Wenn Sie noch kein Google Cloud-Konto und kein Projekt mit aktivierter Abrechnung haben, lesen Sie bitte den Leitfaden Erste Schritte mit Google Maps Platform, um ein Rechnungskonto und ein Projekt zu erstellen.

1. Klicken Sie in der Cloud Console auf das Drop-down-Menü für das Projekt und wählen Sie das Projekt aus, das Sie für dieses Codelab verwenden möchten.

2. Aktivieren Sie die für dieses Codelab erforderlichen APIs und SDKs der Google Maps Platform im Google Cloud Marketplace. Folgen Sie dazu der Anleitung in diesem Video oder dieser Dokumentation.
3. Generieren Sie einen API-Schlüssel in der Cloud Console auf der Seite Anmeldedaten. Folgen Sie dazu dieser Anleitung oder dieser Dokumentation. Für alle Anfragen an die Google Maps Platform ist ein API-Schlüssel erforderlich.

Weitere Anforderungen für dieses Codelab

Für dieses Codelab benötigen Sie die folgenden Konten, Dienste und Tools:

• Grundkenntnisse in JavaScript, HTML und CSS
• Ein Google Cloud-Konto mit aktivierter Abrechnung (wie oben beschrieben)
• Ein Google Maps Platform-API-Schlüssel, für den die Maps JavaScript API aktiviert ist (dies erfolgt während des Codelabs).
• Grundkenntnisse in Webhosting und ‑bereitstellung (werden im Codelab behandelt). Dies erfolgt über die Firebase Console und Firebase Studio.
• Einen Webbrowser, um die Dateien während der Bearbeitung anzusehen.

4. Seite in Firebase Studio erstellen

In diesem Codelab wird nicht davon ausgegangen, dass Sie bereits eine Anwendung erstellt haben. Stattdessen wird Firebase Studio verwendet, um eine Seite für die Kartenanwendung zu erstellen und sie zu Testzwecken in Firebase bereitzustellen. Wenn Sie bereits eine Anwendung haben, können Sie diese auch verwenden. Sie müssen dann nur die entsprechenden Hostdomains, Code-Snippets und API-Schlüssel ändern, um die korrekte Implementierung zu gewährleisten.

Rufen Sie Firebase Studio auf (dazu ist ein Google-Konto erforderlich) und erstellen Sie eine neue Simple HTML-Anwendung. Möglicherweise müssen Sie auf die Schaltfläche „Alle Vorlagen ansehen“ klicken, um diese Option aufzurufen, oder einfach diesen Link verwenden.

Geben Sie dem Arbeitsbereich einen passenden Namen, z. B. myappcheck-map (plus eine zufällige Zahl zur Eindeutigkeit, die automatisch hinzugefügt wird). Firebase Studio erstellt dann den Arbeitsbereich.

Nachdem Sie den Namen eingegeben haben, können Sie auf die Schaltfläche „Erstellen“ klicken, um die Projekterstellung zu starten.

Nachdem Sie die Datei erstellt haben, können Sie den Text in der Datei „index.html“ durch den folgenden Code ersetzen. Dadurch wird eine Seite mit einer Karte erstellt.

<!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>

Wenn Sie diesen Befehl ausführen, sollte eine Seite mit einer Karte der funktionierenden Anwendung angezeigt werden, wie im Bild zu sehen.

Wenn die Seite tatsächlich geladen wird, wird ein Fehler angezeigt, da auf der Seite ein API-Schlüssel für die Google Maps Platform benötigt wird, der in einem späteren Abschnitt hinzugefügt wird.

Die tatsächliche Fehlermeldung wird in der Webkonsole in Firebase Studio angezeigt.

Um das Problem zu beheben, müssen wir der Seite einen API-Schlüssel hinzufügen. Der API-Schlüssel ist die Verbindung zwischen der Seite und der Implementierung der Maps JavaScript API. Es ist auch ein Bereich, der ausgenutzt werden kann, da er unverschlüsselt auf der Seite enthalten sein muss und der API-Schlüssel entnommen und auf anderen Websites verwendet werden kann.

Eine Schutzmethode ist die Verwendung von Anwendungseinschränkungen, entweder über den verwendeten Anwendungstyp oder über die aufgerufene verweisende Domain oder IP-Adresse. Weitere Informationen zu Best Practices finden Sie auf der folgenden Website:

https://developers.google.com/maps/api-security-best-practices#rec-best-practices

oder durch die Verwendung direkter Aufrufe über die Befehlszeile oder den Server. Anwendungen, die selbst keinen Referrer bereitstellen oder nicht getrackt werden können, stellen daher ein potenzielles Sicherheitsrisiko dar.

5. Firebase-Anwendung erstellen

Firebase wird verwendet, um die Funktion bereitzustellen, mit der der Attestierungsanbieter Folgendes prüfen kann:

• Anfragen stammen von Ihrer authentischen App.
• Anfragen stammen von einem authentischen, nicht manipulierten Gerät und einer authentischen, nicht manipulierten Nutzersitzung.

In diesem Codelab wird reCAPTCHA v3 als Anbieter dieser Attestierung verwendet.

Hinweis:Firebase bietet integrierte Unterstützung für reCAPTCHA v3 und Enterprise. Wenn Sie jedoch bestimmte Funktionen benötigen, können Sie es auch mit einem Drittanbieter verwenden oder mit einem benutzerdefinierten Anbieter ein eigenes erstellen.

Firebase-Anwendung und -Host erstellen

Rufen Sie https://firebase.google.com/ auf und erstellen Sie über den Link Zur Console ein neues Firebase-Projekt.

Klicken Sie auf den folgenden Bereich, um ein neues Projekt zu erstellen.

Hinweis:Für dieses Codelab verwenden Sie ein neues Projekt. Wenn Sie Firebase in ein bestehendes Projekt einbinden möchten, folgen Sie der Anleitung unter https://firebase.google.com/docs/projects/use-firebase-with-existing-cloud-project.

Wählen Sie einen Namen für das Projekt aus, z. B. Mein App Check-Projekt. Er muss nicht mit dem zuvor verwendeten Namen übereinstimmen, da er nur als Referenz dient. Der tatsächliche Name des Projekts kann direkt unter dem Text bearbeitet werden. Er besteht aus dem von Ihnen eingegebenen Namen und, falls er nicht eindeutig ist, wird eine Zahl angehängt.

Wenn Sie aufgefordert werden, Ihrer Anwendung andere Dienste wie Google Analytics hinzuzufügen, können Sie dies akzeptieren oder ablehnen. Für dieses Codelab sind sie jedoch nicht erforderlich.

Klicken Sie auf die Schaltfläche „Projekt erstellen“ und warten Sie, bis das Projekt erstellt wurde. Du wirst benachrichtigt, wenn der Vorgang abgeschlossen ist.

Klicken Sie auf „Weiter“, wenn Sie mit dem Projekt interagieren möchten.

Auf der Hauptseite können Sie dann Firebase zu Ihrer App hinzufügen und die Weboption auswählen.

Richten Sie Firebase Hosting für Ihre Website ein, damit die Dateien nach der Bereitstellung einen Speicherort haben. Für Ihre eigentliche Website können Sie eine eigene Option verwenden. In diesem Codelab stellen Sie jedoch Firebase Hosting bereit.

Klicken Sie auf „App registrieren“, um die Anwendung zu erstellen. Als Nächstes verwenden Sie das erstellte Script, um in unserer Webanwendung auf das Projekt in Firebase zu verweisen.

Der Firebase-Konfigurationscode auf dem nächsten Tab wird in der Anwendung verwendet, um Firebase und die Maps-APIs zu verbinden. Es lohnt sich also, ihn aus dem Abschnitt Script-Tag verwenden zu kopieren. Diesen Code fügen Sie in die Datei „index.html“ des Projekts ein.

Klicken Sie für die anderen Abschnitte auf „Weiter“ und sehen Sie sich dann die erstellte App im Abschnitt „Projekteinstellungen“ der Website an.

Hinweis:Im Konfigurationsbereich sehen Sie, dass ein API-Schlüssel für die Verwendung mit der Anwendung erstellt wurde. Im Hintergrund wurde ein Google Cloud-Projekt erstellt und die erforderlichen APIs wurden aktiviert, aber noch nicht die Maps API. Dieser API-Schlüssel kann mit den Google Maps Platform APIs verwendet werden, sobald er aktiviert ist. Das ist jedoch nicht erforderlich, wenn Sie bereits ein Projekt haben.

Wenn Sie die Konfigurationsdetails später noch einmal aufrufen möchten, können Sie die App-Details auch über die Schaltfläche „Einstellungen“ aufrufen:

Bevor Sie diesen Abschnitt verlassen, müssen Sie die Domain der erstellten Firebase-Hosting-Website notieren, die später mit reCAPTCHA verwendet wird. So kann der Websitename mit dem Attestierungsanbieter verknüpft werden. Das bedeutet, dass nur Anfragen von dieser Website überprüft werden.

Rufen Sie den Hosting-Bereich über die Projektverknüpfungen oder das Menü „Erstellen“ auf der linken Seite auf.

oder

Suchen Sie im Abschnitt nach der Domain, die für die Anwendung erstellt wurde. Möglicherweise müssen Sie einige Bildschirme durchklicken, um die Einrichtung abzuschließen, falls dies noch nicht geschehen ist.

Notieren Sie sich das für einen späteren Abschnitt, in dem wir die Website sowohl mit dem Maps API-Schlüssel als Verweis-URL-Einschränkung als auch mit reCAPTCHA als Website-Einschränkung für die Attestierung registrieren.

6. API-Schlüssel schützen

Rufen Sie die Cloud Console mit demselben Konto auf, mit dem Sie Firebase verwenden, um sich das erstellte Projekt anzusehen.

Link

Wenn Sie mehrere Projekte haben, müssen Sie möglicherweise das Drop-down-Menü oder das Suchfeld verwenden, um das richtige Projekt mit dem Namen Ihres Firebase-Projekts auszuwählen.

Das neu erstellte Projekt wird geöffnet. Sie fügen diesem Projekt jetzt die Maps JavaScript API hinzu, damit sie im Projekt verwendet werden kann. Außerdem schränken Sie die Verwendung auf einen bestimmten API-Schlüssel und eine bestimmte Hosting-Domain ein.

Aktivieren Sie die Maps APIs für das Projekt über das Menü auf der linken Seite. Wählen Sie die Option „APIs & Dienste“ und dann „Aktivierte APIs & Dienste“ aus.

Wählen Sie die Option „APIs UND DIENSTE AKTIVIEREN“ aus.

Geben Sie „Maps JavaScript API“ in das Suchfeld ein.

Wählen Sie das passende Ergebnis aus.

Klicken Sie dann auf „Aktivieren“, um die API Ihrem Projekt hinzuzufügen. Das kann bereits geschehen sein, wenn Sie dieses Projekt schon einmal verwendet haben.

Sobald diese Option aktiviert ist, können Sie einen API-Schlüssel hinzufügen und einschränken. Das wird aber erst einmal übersprungen.

Kehren Sie über die Menüoptionen auf der linken Seite zum Bereich „APIs & Dienste“ zurück und wählen Sie den für Sie erstellten Browserschlüssel aus.

Hinweis:Der Einfachheit halber wird in diesem Fall derselbe Schlüssel verwendet. Sie können verschiedene Schlüssel verwenden, sofern sie sich im selben Projekt befinden und die entsprechenden Dienste für sie aktiviert sind.

Fügen Sie die Maps JavaScript API einer der API-Einschränkungen hinzu.

Für Schlüssel in einer Live-Anwendung sollten Sie auch die Domain einschränken, auf der die Anwendung gehostet wird. Verwenden Sie dazu die Domain, die für Sie in Firebase erstellt wurde. Fügen Sie außerdem „/*“ am Ende der Domain hinzu, damit alle Pfade darunter abgedeckt werden.

Weitere Informationen zum Einschränken von API-Schlüsseln finden Sie unter dem folgenden Link.

https://developers.google.com/maps/api-security-best-practices#restricting-api-keys

7. reCAPTCHA-Secrets erstellen

Im nächsten Schritt erstellen Sie ein reCAPTCHA-Projekt, um die Attestierung und die Schlüssel für Client und Server bereitzustellen.

Rufen Sie die reCAPTCHA-Website unter https://www.google.com/recaptcha/ auf und klicken Sie auf die Schaltfläche „Jetzt starten“.

Registrieren Sie als Nächstes eine neue Website und geben Sie die richtige Domain ein, die eingeschränkt werden soll.

Achten Sie außerdem darauf, dass Sie dasselbe Google Cloud-Projekt ausgewählt haben, das von Firebase erstellt wurde, falls Sie mehrere haben.

Dadurch werden zwei Schlüssel erstellt: ein geheimer Schlüssel, den Sie in die Firebase Console eingeben. Dieser sollte niemals auf einer öffentlich zugänglichen Seite oder in einer öffentlich zugänglichen Anwendung verwendet werden. Außerdem wird ein Websiteschlüssel erstellt, den Sie in der Webanwendung verwenden.

Lassen Sie diese Seite geöffnet, da Sie sie benötigen. Klicken Sie auf die Schaltfläche „Schlüssel kopieren“ und kehren Sie dann zur Firebase-Website zurück.

8. reCAPTCHA zu Firebase hinzufügen

Rufen Sie in der Firebase Admin Console die Menüpunkte auf der linken Seite auf. Wählen Sie unter dem Menüpunkt Build die Option „App Check“ aus.

Die Liste der Dienste kann erst aktiviert werden, wenn eine App registriert ist. Diese wurde zuvor erstellt, als der Website Hosting hinzugefügt wurde. Klicken Sie auf „Jetzt starten“, wenn Sie dies einrichten müssen.

Klicken Sie auf den Tab „App“, öffnen Sie die Web-App, geben Sie das Geheimnis ein, das Sie von der reCAPTCHA-Website kopiert haben, und klicken Sie auf „Speichern“.

Neben dem reCAPTCHA-Anbieter sollte jetzt ein grünes Häkchen angezeigt werden. Diese Webanwendung kann jetzt reCAPTCHA verwenden, um zu bestätigen, ob ein Nutzer oder eine Website den Dienst korrekt aufruft.

Auf dem Tab „APIs“ sollte jetzt angezeigt werden, dass die Google Maps Platform API aktiv, aber nicht mehr erzwungen ist.

Sie haben jetzt das reCAPTCHA-Secret mit dem Firebase-Projekt verknüpft und können nun den Code in die Webseite einfügen, um den Website-Schlüssel dem richtigen Anbieter für die Verwendung mit der Maps-Anwendung zuzuordnen.

Der Websiteschlüssel wird von reCAPTCHA geprüft, um mit dem geheimen Schlüssel übereinzustimmen. Wenn dies der Fall ist, wird bestätigt, dass die aufrufende Seite korrekt ist, und App Check stellt ein Token bereit, das für nachfolgende Aufrufe der Maps JavaScript API verwendet werden kann. Ohne diese Bestätigung wird das Token nicht bereitgestellt und die Anfragen können nicht validiert werden.

9. Fügen Sie die Bestätigung zur Seite hinzu und stellen Sie sie bereit.

Kehren Sie zur Cloud Console zurück und kopieren Sie den API-Schlüssel, der für die Maps API verwendet werden muss.

Sie finden diese im Seitenmenü der Console unter „APIs & Dienste“ und dann unter „Anmeldedaten“.

Hier können Sie den vorhandenen Browserschlüssel auswählen. Wie bereits erwähnt, können Sie aber auch einen anderen vorhandenen Schlüssel verwenden oder einen neuen erstellen.

Klicken Sie auf die Schaltfläche zum Einblenden des Schlüssels und kopieren Sie den Schlüssel aus dem angezeigten Dialogfenster.

Kehren Sie zum Firebase Studio-Projekt zurück, in dem die von Ihnen erstellte HTML-Seite zuvor geöffnet wurde. Jetzt können Sie den API-Schlüssel auf der Seite hinzufügen, damit die Maps API dort funktioniert, wo YOUR_API_KEY steht.

Wenn Sie die Seite noch einmal ausführen, wird jetzt eine andere Fehlermeldung angezeigt.

Das bedeutet, dass die Entwicklungsdomain, von der die Seite gehostet wird, nicht zulässig ist. Wir haben nur die bereitgestellte Domain hinzugefügt. Wir müssen diese Website mit Firebase Hosting in der richtigen Domain veröffentlichen. Weitere Informationen finden Sie hier:

Mit Firebase Hosting bereitstellen

und dieses Video

Firebase-Web-Apps schneller in Project IDX entwickeln, testen und bereitstellen

Hinweis:Möglicherweise erhalten Sie auch einen BillingNotEnabledMapError, wenn Sie ein Testkonto verwenden. In diesem Fall müssen Sie die Abrechnung für Ihr Cloud Console-Projekt aktivieren, damit die Karte funktioniert.

Weitere Informationen finden Sie auf der Maps JavaScript API-Website unter Map Loading Errors (Fehler beim Laden von Karten).

Wenn Sie den Fehler „RefererNotAllowedMapError“ erhalten, können Sie ihn beheben, indem Sie die Seite auf der richtigen Domain bereitstellen.

Kehren Sie zu Firebase Studio zurück und klicken Sie auf das Symbol „Firebase Studio“ (je nach Einrichtung befindet sich dieses möglicherweise ganz links oder ganz rechts), um die Hosting-Optionen zu öffnen.

In diesem Codelab müssen Sie als Nächstes die App mit Firebase hosten, um Ihre Firebase-Instanz mit der Studio-Anwendung zu verbinden.

Klicken Sie dann auf Firebase authentifizieren , um den Authentifizierungsvorgang zu starten. So kann Ihr Konto das Hosting mit dem Backend in Studio automatisieren.

Folgen Sie der Anleitung im Befehlsfenster, um die Bereitstellung zu autorisieren.

Folgen Sie der Anleitung auf dem Bildschirm (einschließlich des Öffnens eines neuen Fensters), kopieren Sie den Autorisierungscode, wenn Sie dazu aufgefordert werden, und fügen Sie ihn in das Befehlsfenster in Firebase Studio ein.

Weitere Informationen zu diesem Prozess finden Sie hier:

https://firebase.google.com/docs/studio/deploy-app

Klicken Sie dann auf „Firebase Hosting initialisieren“, um das Projekt mit dem Firebase-Projekt zu verknüpfen.

Wählen Sie „Vorhandenes Projekt verwenden“ aus und wählen Sie das Projekt aus, das Sie im vorherigen Abschnitt erstellt haben. Übernehmen Sie die restlichen Standardeinstellungen. Ihr Beispiel kann je nach dem Namen, den Sie beim Einrichten des Projekts auswählen, variieren.

Hinweis: Die Hosting-Website verwendet das Verzeichnis public für den Speicherort der Datei index.html und als Stammverzeichnis für die Bereitstellung. Sie müssen also die ursprüngliche Datei „index.html“ in dieses Verzeichnis verschieben. Sie können auch alle nicht verwendeten JavaScript- oder CSS-Dateien entfernen, sodass die Struktur so aussieht:

Kehren Sie zur Explorer-Ansicht zurück und ersetzen Sie die erstellte Datei „index.html“ im öffentlichen Verzeichnis durch die Datei, die Sie bereits im Stammverzeichnis hatten.

Sie können jetzt zur Firebase Studio-Seitenleiste zurückkehren und die Website in der Produktion bereitstellen.

Dadurch werden die Bereitstellungsschritte in der Konsole angezeigt.

Öffnen Sie die bereitgestellte Website über die angezeigte Hosting-URL (hier als „https://my-app-check-project.web.app/“ angegeben, die URL ist für Ihr Projekt jedoch anders).

In der Anwendung wird die Karte jetzt auf der Seite angezeigt, da die APIs für die verwendeten Domains funktionieren.

Jetzt gibt es eine funktionierende Seite mit Einschränkungen für den Typ der APIs, die mit dem API-Schlüssel verwendet werden dürfen, und für die Domains, für die der API-Schlüssel verwendet werden darf. Im nächsten Schritt wird der Zugriff auf diese Domain beschränkt. Dazu müssen Sie den zuvor generierten Firebase-Skriptabschnitt hinzufügen, um die Seite mit App Check zu schützen. Das wird im nächsten Abschnitt beschrieben.

10. Sichere Seite

Auf der aktuellen Seite wird der API-Schlüssel zwar für die Domain gesichert, es wird jedoch kein Attestierungsschritt hinzugefügt, um sicherzustellen, dass er von der richtigen Anwendung und von einer Person verwendet wird. Der Schlüssel kann weiterhin gestohlen und von einem böswilligen Akteur verwendet werden. Um dies zu verhindern, müssen der Seite die Firebase-Konfiguration, der Anbieter und der Website-Schlüssel hinzugefügt werden, damit das richtige Token für den Client abgerufen werden kann.

Sie sehen auch, dass die Nutzung der Maps API in Firebase erfasst wird. Da keine korrekten Tokens verwendet werden, werden nicht bestätigte Anfragen gesendet.

Die erforderlichen Verbindungsdetails können Sie dem Firebase-Projekt entnehmen.

Rufen Sie die Firebase-Details aus der Konsole ab, die die Firebase-Konfigurationsdetails enthält. Rufen Sie in Firebase die Seite mit den Projekteinstellungen auf und kopieren Sie im CDN-Abschnitt der App den Code für die CDN-Einrichtung (die einfachste Methode).

Wählen Sie im Firebase-Projekt das Zahnradsymbol aus, um die Projekteinstellungen aufzurufen.

Dadurch wird die folgende Seite geöffnet , die die Details im allgemeinen Bereich unter Ihren Apps enthält.

Kopieren Sie den Code in die Firebase Studio-Seite (public/index.html), die die Karte enthält und gehostet wird. Das sieht dann so aus (mit Ihren Details und nicht genau den Angaben in dieser Datei):

<!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>

Hinweis:Der Maps API-Schlüssel und der Firebase API-Schlüssel sind hier aus Gründen der Einfachheit identisch. Das ist aber nicht zwingend erforderlich. Wenn Sie unterschiedliche Schlüssel verwenden, müssen die richtigen APIs für die jeweiligen Schlüssel aktiviert sein.

Nachdem Firebase in unsere Anwendung aufgenommen wurde, werden die Aufrufe der reCAPTCHA-Bibliothek mit dem bereitgestellten Websiteschlüssel, den Sie zuvor von der reCAPTCHA-Website erhalten haben, ausgeführt.

Weitere Informationen zum Hinzufügen dieser Abschnitte finden Sie in der folgenden Maps-Dokumentation:

https://developers.google.com/maps/documentation/javascript/maps-app-check

Fügen Sie die App Check-Bibliothek auf der Seite ein und laden Sie dann die Funktionen, um App Check mit der Firebase-Konfiguration zu initialisieren und das Token mit dem ReCaptchaV3Provider abzurufen.

Importieren Sie zuerst die App Check-Bibliothek:

       import {
           getToken,
           initializeAppCheck,
           ReCaptchaV3Provider,
       } from "https://www.gstatic.com/firebasejs/12.2.1/firebase-app-check.js";

Als Nächstes fügen Sie den Code hinzu, um App Check mit der Firebase-Konfiguration und dem reCAPTCHA-Anbieter mit dem Websitetoken zu initialisieren.

       // Get App Check Token
       const appCheck = initializeAppCheck(app, {
           provider: new ReCaptchaV3Provider('<INSERT SITE KEY>'),
           isTokenAutoRefreshEnabled: true,
       });

Hängen Sie schließlich eine Funktion an das Kartensteuerelement an. Verwenden Sie dazu die Einstellungsfunktion der Maps Core Library, um ein Token zu erhalten. Dadurch werden die Tokenanfragen nach Bedarf durch das Kartensteuerelement entsprechend der Gültigkeitsdauer des Tokens gestellt.

       const { Settings } = await google.maps.importLibrary('core');
     Settings.getInstance().fetchAppCheckToken = () =>
           getToken(appCheck, /* forceRefresh = */ false);

Die vollständige Datei sieht so aus:

<!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>

Hinweis:Achten Sie darauf, dass die Versionen der Firebase-Bibliotheken identisch sind. Falls die Versionen hier nicht aktuell sind und ersetzt wurden, können beim Bereitstellen andere Fehler auftreten.

Stellen Sie die Seite mit Firebase Studio auf der Firebase-Website bereit und führen Sie sie aus.

11. Monitoring erzwingen

Wenn die Seite jetzt eingerichtet ist und ausgeführt wird, sehen Sie, dass sie geprüft wird. Kehren Sie zur Firebase Console zurück und öffnen Sie den Bereich „App Check“ noch einmal. App Check sollte jetzt die Maps JavaScript API überwachen.

Wenn Sie das Fenster öffnen, sehen Sie, dass die Clients Anfragen senden und die Attestierung funktioniert (dunkelblaue bestätigte Anfragen im Diagramm). Bei anderen Anfragen werden Aufrufe während der Entwicklungsphase angezeigt, bevor die Überprüfung abgeschlossen ist.

Nachdem die Clients funktionieren, kann die Erzwingung auf der Website aktiviert werden, um sicherzustellen, dass die API-Schlüssel nicht von einer ungültigen Clientanwendung verwendet werden können. Klicken Sie auf die Schaltfläche „Erzwingen“, um die Erzwingung zu starten.

Wenn Sie darauf klicken, wird ein großes Warnzeichen angezeigt, das darauf hinweist, dass Ihre Anwendung gesperrt wird. In der Praxis sollten Sie dies nur tun, wenn Sie wissen, dass alle Ihre Clients die richtigen Schlüssel haben und funktionieren. Andernfalls können Ihre Nutzer möglicherweise nicht auf die Website zugreifen.

Es kann auch einige Zeit dauern, bis die Richtlinie durchgesetzt wird. Das wird auf dem Bildschirm angezeigt. Wenn Sie sofort nach der Durchsetzung suchen, hat es möglicherweise noch nicht genügend Zeit, sich zu verbreiten.

Wenn Sie die Seite aufrufen, sollte sie wie gewohnt funktionieren. Es hat sich nichts an der Website geändert.

Im Laufe der Zeit sollte die Anzahl der verifizierten Anfragen in der Konsole steigen, wie hier zu sehen ist:

Sie können testen, ob alles funktioniert, indem Sie zum ursprünglichen Beispiel im Codelab zurückkehren und eine neue Seite ohne die App-Check-Funktion erstellen. Nennen Sie diese Seite z. B. „nocheck.html“ und platzieren Sie sie im öffentlichen Ordner an derselben Stelle wie „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>

Wenn Sie dies getan und den richtigen API-Schlüssel eingegeben haben, sollte beim Aufrufen der Seite (verwenden Sie „ihredomain/nocheck.html“) der folgende graue Fehlerkasten angezeigt werden.

In der Konsole sollte eine Fehlermeldung wie die folgende angezeigt werden:

Durch die App-Prüfung wurde die Anfrage für die Karte auf der Seite erfolgreich blockiert, da kein App-Prüfungstoken für die erzwungene Website mehr abgerufen wird.

12. Glückwunsch!

Sie haben App Check auf Ihrer Website aktiviert.

Sie haben erfolgreich eine Anwendung erstellt, die Firebase App Check verwendet, um sicherzustellen, dass die Anfragen von einer gültigen Domain und einem gültigen Nutzer stammen.

Das haben Sie gelernt

• So hosten und stellen Sie eine Webseite mit Firebase Studio bereit.
• Hier erfahren Sie, wie Sie die Google Maps Platform APIs in der Cloud Console aktivieren und schützen.
• reCAPTCHA zum Generieren von Schlüsseln verwenden, mit denen Aufrufe bestätigt werden können.
• So verwenden Sie Firebase App Check und binden es in die Maps JavaScript API ein.
• Hier erfahren Sie, wie Sie Aufrufe geschützter Websites mit Firebase Studio erzwingen und überwachen.

Nächste Schritte

• Dokumentation zu App Check für die Google Maps JavaScript API
• Weitere Informationen zu App Check in Firebase
• Anderes Codelab mit App Check und der Google Maps Places API ausprobieren
• reCAPTCHA