Nutzer mit Identity Platform und Google-Identitäten bei Firestore authentifizieren

In diesem Dokument wird gezeigt, wie Sie die nutzerbasierte Zugriffssteuerung auf eine Firestore-Datenbank mit Identity Platform als Identitäts- und Zugriffsverwaltungplattform einrichten. Mit Identity Platform können Sie Ihrer Anwendung eine Authentifizierungsebene hinzufügen, um die Anmeldedaten von Kunden zu schützen und zu verwalten. Firestore ist eine flexible dokumentenbasierte NoSQL-Datenbank. Der Zugriff auf diese Daten erfolgt mithilfe einer Regelsprache namens Firestore-Sicherheitsregeln, sodass Sie keinen serverseitigen Autorisierungscode schreiben müssen.

Dieses Dokument richtet sich an Entwickler und Sicherheitsexperten, die Firestore mit Firestore-Sicherheitsregeln verwenden möchten und ihre Nutzer mit Identity Platform bei einem externen Anmeldeanbieter wie Google authentifizieren möchten. Der Code in diesem Dokument zeigt zwei Möglichkeiten für die Verwendung von Identity Platform und Firestore:

REST API-Aufrufe mit JavaScript, um die Identity Platform und Firestore-APIs aufzurufen. Mit diesem Ansatz haben Sie die vollständige Kontrolle darüber, wie Ihre Webanwendung Anfragen für Identity Platform erstellt.
Identity Platform Client SDK mit dem Identity Platform Client SDK und dem Firestore SDK verwalten, um den Anmeldeprozess für Identity Platform zu verwalten und Firestore abzufragen. Das SDK stellt JavaScript-Wrapper-Funktionen über Identity Platform REST APIs bereit, mit denen Sie Identity Platform mithilfe von JavaScript-Funktionen und -Objekten aufrufen können, anstatt manuell HTTP-Anfragen zu erstellen.

Das Identity Platform Client SDK und das Firebase Client SDK verwenden dasselbe SDK. Das SDK unterstützt alle Funktionen von Identity Platform. Um die Abwärtskompatibilität zu gewährleisten, behält das SDK das Firebase-Branding bei.

Architektur

Das folgende Diagramm zeigt die logische Architektur, die in diesem Dokument beschrieben wird:

Logisches Architekturdiagramm.

Neben Identity Platform und Firestore werden in diesem Dokument die folgenden Komponenten verwendet und veranschaulicht:

Webanwendung: Eine Anwendung, mit der sich Nutzer mit Google-Identitäten in Identity Platform anmelden können. Anschließend werden Firestore nach Informationen über Ihren angemeldeten Nutzer abgefragt.
Google Log-in: Der in diesem Dokument verwendete Identitätsanbieter.
Authentifizierungs-Handler: Ein Dienstendpunkt, der die Antwort von Google empfängt, führt die Anmeldung mit Identity Platform aus und sendet das Ergebnis an die Webanwendung zurück, um den Anmeldeprozess abzuschließen.

Ziele

Richten Sie Identity Platform für Ihr Google Cloud-Projekt ein.
Google als Anmeldeanbieter für Identity Platform hinzufügen
Verwenden Sie Firestore-Sicherheitsregeln, um den Zugriff auf eine Firestore-Datenbank zu steuern.
Melden Sie sich mit den Identity Platform APIs und dem Identity Platform Client SDK in einer Webanwendung an.
Greifen Sie mit der Firestore REST API und dem Firestore JavaScript Client SDK sicher auf Firestore über eine clientseitige Webanwendung zu.

Kosten

In diesem Dokument verwenden Sie die folgenden kostenpflichtigen Komponenten von Google Cloud:

Mit dem Preisrechner können Sie eine Kostenschätzung für Ihre voraussichtliche Nutzung vornehmen. Neuen Google Cloud-Nutzern steht möglicherweise eine kostenlose Testversion zur Verfügung.

Hinweis

Wählen Sie in der Google Cloud Console auf der Seite der Projektauswahl ein Google Cloud-Projekt aus oder erstellen Sie eines.

Hinweis: Wenn Sie die Ressourcen, die Sie in diesem Verfahren erstellen, nicht behalten möchten, erstellen Sie ein Projekt, anstatt ein vorhandenes Projekt auszuwählen. Wenn Sie fertig sind, können Sie das Projekt löschen und dadurch alle mit dem Projekt verknüpften Ressourcen entfernen.

Zur Projektauswahl

Wenn Sie ein vorhandenes Projekt auswählen, müssen Sie ein Projekt auswählen, das die folgenden Bedingungen erfüllt:
- Datastore ist nicht aktiviert.
- App Engine ist nicht aktiviert.
- Das Projekt enthält keine Firestore-Datenbank mit vorhandenen Sicherheitsregeln. Sie überschreiben alle vorhandenen Regeln mit den Regeln, die in diesem Dokument beschrieben werden.
Die Abrechnung für das Google Cloud-Projekt muss aktiviert sein.
Identity Platform aktivieren
1. Rufen Sie in der Google Cloud Console die Seite Identity Platform Marketplace auf.
  Zur Seite „Identity Platform“
2. Klicken Sie auf Identity Platform aktivieren und warten Sie, bis der Vorgang abgeschlossen ist.
Firestore aktivieren:
1. Öffnen Sie in der Google Cloud Console das Menü auf der linken Seite und wählen Sie Firestore aus.
2. Wählen Sie einen Firestore-Modus aus. Klicken Sie auf Nativen Modus auswählen.
3. Speicherort für Daten auswählen Wählen Sie die Region aus, die Ihrem Standort am nächsten ist. Klicken Sie auf Datenbank erstellen.

Nach Abschluss der in diesem Dokument beschriebenen Aufgaben können Sie weitere Kosten vermeiden, indem Sie die erstellten Ressourcen löschen. Weitere Informationen finden Sie unter Bereinigen.

Identity Platform konfigurieren

Damit die Nutzerauthentifizierung in Identity Platform aktiviert wird, müssen Sie Identitätsanbieter hinzufügen.

Vor der Konfiguration eines Google-Anbieters in Identity Platform müssen Sie den OAuth-Zustimmungsbildschirm von Google konfigurieren. Nutzer sehen diesen Zustimmungsbildschirm, wenn sie sich das erste Mal in Ihrer Webanwendung anmelden. In der Konfiguration des OAuth-Zustimmungbildschirms können Sie Attribute wie den Namen Ihrer Anwendung, Ihr App-Logo und eine Support-E-Mail-Adresse festlegen.

Rufen Sie in der Google Cloud Console die Seite Identitätsanbieter auf.
Zur Seite "Identitätsanbieter"
Klicken Sie auf Anbieter hinzufügen.
Wählen Sie Google aus und klicken Sie auf der Seite Neuer Identitätsanbieter auf den Link APIs und Dienste. Die Seite Anmeldedaten wird in einem neuen Tab geöffnet. Schließen Sie den vorherigen Tab nicht, da Sie von der Seite Anmeldedaten zur Seite Neuer Identitätsanbieter kopieren müssen.
Klicken Sie auf der Seite Anmeldedaten auf die Anmeldedaten Webclient (von Google-Dienst automatisch erstellt).
Kopieren Sie den Wert für Client-ID, gehen Sie zum Tab mit der Seite Neuer Identitätsanbieter und fügen Sie den Wert in das Feld Web-Client-ID ein. Wiederholen Sie diesen Schritt, um den Wert Client Secret in das Feld Web Client Secret zu kopieren.
Klicken Sie auf der Seite Neuer Identitätsanbieter auf Speichern.
Kehren Sie zur Seite Anmeldedaten zurück und klicken Sie auf OAuth-Zustimmungsbildschirm.
Wählen Sie Extern aus und klicken Sie dann auf Erstellen.
Fügen Sie auf der Seite OAuth-Zustimmungsbildschirm die folgenden Informationen hinzu:
- Name der Anwendung: Identity Platform Tutorial
- Support-E-Mail: Wählen Sie Ihre E-Mail-Adresse aus der Drop-down-Liste aus.
Klicken Sie auf Speichern.
Geben Sie auf der Seite App-Registrierung bearbeiten die folgenden Informationen ein:
- App-Name: Identity Platform Tutorial
- E-Mail-Adresse des Nutzersupports: Wählen Sie Ihre E-Mail-Adresse aus der Drop-down-Liste aus.
- E-Mail-Adressen: Geben Sie Ihre E-Mail-Adresse ein.
Klicken Sie auf Speichern und fortfahren.
Klicken Sie auf den Seiten Bereiche und Optionale Informationen auf Speichern und fortfahren.
Klicken Sie auf der Seite Zusammenfassung auf Zurück zum Dashboard.

Firestore konfigurieren

Die neue Firestore-Datenbank, die Sie erstellt haben, ist momentan leer. Die neue Firestore-Datenbank verfügt auch über einen Standardsatz von Sicherheitsregeln, mit denen jeder Nutzer Lesevorgänge in der Datenbank ausführen kann. Mit diesen Standardregeln wird verhindert, dass beliebige Personen in die Datenbank schreiben. In den nächsten Schritten füllen Sie die Datenbank mit Daten und aktualisieren die Sicherheitsregeln, um Leseanfragen (autorisierte) Anfragen auf autorisierte Nutzer zu beschränken.

Testdaten in Firestore erstellen

Bei diesem Verfahren testen Sie die Sicherheitsregeln, indem Sie Firestore-Sammlungen aus einer Webanwendung abfragen.

Erstellen Sie zuerst mehrere Dokumente, um die Firestore-Sicherheitsregeln zu testen. Bei Sammlungs- und Feldnamen wird zwischen Groß- und Kleinschreibung unterschieden. Verwenden Sie Kleinbuchstaben für die Sammlung und Felder, damit die Webanwendung nicht fehlschlägt, wenn eine Abfrage an Firestore gesendet wird.

Rufen Sie in der Google Cloud Console die Seite Firestore auf.
Klicken Sie auf Sammlung starten.
Geben Sie im Feld Sammlungs-ID customers ein.
Erstellen Sie ein Dokument mit folgenden Informationen:

Document ID: bob@example.com
Feldname Feldtyp Feldwert
Name String Bob
Unternehmen

String
ExampleOrganization
Klicken Sie auf Speichern und weitere hinzufügen.
Klicken Sie auf Feldwerte löschen.
Geben Sie die folgenden Informationen ein:
Dokument-ID: Ihre E-Mail-Adresse

Feldname Feldtyp Feldwert

Name String Ihr Name

Unternehmen String Ihr Firmenname
Klicken Sie auf Speichern.

Feldname	Feldtyp	Feldwert
Name	String	`Bob`
Unternehmen	String	ExampleOrganization

Feldname	Feldtyp	Feldwert
Name	String	Ihr Name
Unternehmen	String	Ihr Firmenname

Firestore-Sicherheitsregeln erstellen

Firestore-Sicherheitsregeln können mithilfe von Nutzerauthentifizierungsmetadaten, Daten aus eingehenden Abfragen und vorhandenen Daten in Ihrer Datenbank ausgewertet werden.

In diesem Verfahren erstellen Sie eine Sicherheitsregel für Firestore, die auf der E-Mail-Adresse und dem Namen des angemeldeten Nutzers basiert.

Verwenden Sie die Firebase Console, um die Firestore-Sicherheitsregeln zu verwalten.

Öffnen Sie die Firebase Console und klicken Sie auf Ihr Projekt.
Klicken Sie links auf dem Bildschirm auf Firestore.
Klicken Sie auf der Firestore-Seite auf den Tab Regeln.
Wenn Sie ein vorhandenes Projekt mit einer Firestore-Datenbank mit Sicherheitsregeln verwenden und Sie vor dem Abschluss dieser Anleitung das Projekt bereinigen möchten, notieren Sie Ihre vorhandenen Sicherheitsregeln.
Ersetzen Sie die vorhandenen Regeln durch die folgende Regel:
```
rules_version = '2';
service cloud.firestore {
 match /databases/{database}/documents {
  match /customers/{customerID} {
  allow read:
   if request.auth.uid != null
     && request.auth.token.firebase.sign_in_provider == "google.com"
     && request.auth.token.email == customerID
    }
  }
}
```
Diese Regel gewährt nur Lesezugriff für die Sammlung customers. Die Regel bestätigt, dass Sie sich über den Google-Anmeldeanbieter angemeldet haben, den Sie in Identity Platform konfiguriert haben. Außerdem können Sie nur Dokumente mit einer Kunden-ID abrufen, die mit Ihrer E-Mail-Adresse übereinstimmt.

Hinweis: Anfragen an Firestore werden immer hinsichtlich der Datenbanksicherheitsregeln ausgewertet, unabhängig davon, ob es sich um eine Anfrage zum Abrufen eines einzelnen Dokuments oder um eine Abfrage handelt. Informationen zum Schreiben von Abfragen mit denselben Einschränkungen wie Ihre Sicherheitsregeln finden Sie in der Dokumentation Daten sicher abfragen.
Klicken Sie auf Veröffentlichen.

Testumgebung konfigurieren

Starten Sie zum Testen Ihrer Firestore-Sicherheitsregeln zunächst eine Webanwendung, bei der sich Nutzer anmelden müssen. Die Webanwendung steht auf GitHub zur Verfügung und kann in eine Cloud Shell-Umgebung heruntergeladen werden, in der Sie die Anwendung testen können. Nachdem sich der Nutzer angemeldet hat, liest die Webanwendung Dokumente aus Firestore und zeigt deren Inhalt an.

Webanwendung konfigurieren

Zur Seite „Identity Platform-Anbieter“
Zur Seite „Identity Platform-Anbieter“
Klicken Sie rechts auf der Seite auf Details zur Einrichtung der Anwendung.
Kopieren Sie die Werte neben apiKey und authDomain in die Zwischenablage und klicken Sie dann auf Schließen.
Klicken Sie oben auf der Seite auf Google Cloud und kopieren Sie die Projekt-ID von der Karte Projektinformationen.
Klicken Sie auf In Cloud Shell öffnen, um Cloud Shell zu öffnen, das GitHub-Repository zu klonen und die Datei config.js zu öffnen. Klicken Sie im angezeigten Dialogfeld „In Cloud Shell öffnen“ auf Bestätigen.
In Cloud Shell öffnen
Ersetzen Sie in der Datei config.js die Platzhalter [API_KEY], [AUTH_DOMAIN] und [PROJECT_ID] durch die Werte, die Sie im vorherigen Schritt kopiert haben. Der Code fügt diese Werte in die URL und den Text der Nachrichten ein, die erstellt werden, wenn er Anfragen an Identity Platform sendet.

Benutzerdefinierten Authentifizierungs-Handler registrieren

Wenn Nutzer auf Ihre Webanwendung zugreifen, werden sie dazu aufgefordert, sich über Google als Identitätsanbieter anzumelden. Nachdem sich der Nutzer bei Google erfolgreich angemeldet hat, gibt Google eine Weiterleitung (302) mit dem Token des Nutzers an den Authentifizierungs-Handler zurück, wie im Architektur-Diagramm gezeigt. In OAuth 2.0 müssen Sie jede Weiterleitungs-URL in der Konfiguration für den Anbieter vorab registrieren, damit der Anbieter Ihr Token nicht an ein unbekanntes Ziel senden kann. Auf der Seite Weiterleitungs-URL-Registrierung der OAuth 2.0-Website werden die Gründe für diese Einschränkung erläutert.

In diesem Schritt aktualisieren Sie die Liste der autorisierten Weiterleitungs-URLs, um den in diesem Dokument verwendeten Authentifizierungs-Handler zu vertrauen.

Die URL-Liste ist Teil der Google OAuth 2.0-Clientkonfiguration. Das ist die Seite, von der Sie die Client-ID und den Clientschlüssel kopiert haben, als Sie die Identity Platform konfiguriert haben.

In diesem Dokument verwenden Sie zwei verschiedene Authentifizierungs-Handler:

Einen Authentifizierungs-Handler, der von Identity Platform gehostet wird.
Ein benutzerdefinierter Authentifizierungs-Handler, der von der Webanwendung gehostet wird.

Auf den von Identity Platform gehosteten Authentifizierungs-Handler können Sie über den folgenden von Google verwalteten Endpunkt zugreifen: https://[YOUR_PROJECT_ID].firebaseapp.com/__/auth/handler

Wenn Sie diesen Handler verwenden möchten, müssen Sie die Liste der autorisierten URLs in den Clienteinstellungen für Google OAuth 2.0 nicht aktualisieren. Wenn Sie Identity Platform weiter oben in diesem Dokument aktiviert haben, wurde die URL automatisch der Liste der autorisierten URLs hinzugefügt.

Wenn Sie das Identity Platform Client SDK verwenden, verwendet das SDK diesen integrierten Authentifizierungs-Handler. Der Authentifizierungs-Handler für Identity Platform erfordert, dass Ihre Webanwendung dieses SDK verwendet, da das SDK Zustandsobjekte mit dem Handler austauscht. Das SDK informiert beispielsweise den Handler, an den Nutzer weitergeleitet werden, nachdem sie sich erfolgreich in Identity Platform angemeldet haben.

Für den benutzerdefinierten Authentifizierungs-Handler, der von der Webanwendung gehostet wird, wenn Sie die Identity Platform REST APIs direkt aus JavaScript verwenden, sollten Sie statt des SDK Ihren eigenen Authentifizierungs-Handler implementieren und hosten.

Dieses Dokument enthält ein Beispiel für einen Authentifizierungs-Handler, der den Anmeldevorgang bei Identity Platform verwaltet, wenn er das Nutzer-Token von Google empfängt. Sie müssen die URL für den benutzerdefinierten Handler in Ihren Google OAuth 2.0-Clienteinstellungen zur Liste der autorisierten URLs hinzufügen.

In diesem Dokument führen Sie die Webanwendung in Cloud Shell aus. Suchen Sie nach dem Start der Webanwendung den Hostnamen Ihrer Cloud Shell-Instanz und aktualisieren Sie die Konfiguration des Anbieters entsprechend.

Führen Sie die Webanwendung in Cloud Shell aus:
```
npm install
node app.js
```
Warten Sie, bis die folgende Ausgabe angezeigt wird: Example app listening on port 8080!
Klicken Sie auf das Symbol für die Webvorschau und dann auf Vorschau auf Port 8080. Warten Sie, bis die neue Webseite mit dem neuen Tab angezeigt wird, und kopieren Sie den Wert unter Auth handler URL (für Google OAuth 2.0 Client).
Öffnen Sie die Seite Anmeldedaten.
Zur Seite „Anmeldedaten“
Klicken Sie auf der Seite Anmeldedaten auf Webclient (von Google Service erstellt).
Klicken Sie auf der Seite Autorisierte Weiterleitungs-URIs auf URI hinzufügen und fügen Sie die zuvor kopierte URL ein.
Klicken Sie auf Speichern und lassen Sie die Webanwendung ausgeführt.

Web-App-Domain autorisieren

Wenn Sie den Authentifizierungs-Handler von Identity Platform verwenden, leitet der Handler Sie zurück zur Webanwendung, zusammen mit Ihren Nutzerinformationen und Tokens. Damit Ihre Informationen nicht an eine nicht autorisierte Domain gesendet werden, müssen Sie die Domain autorisieren, in der Ihre Webanwendung ausgeführt wird.

Kehren Sie zur Standardwebseite für die Webanwendung zurück und kopieren Sie den Wert unter Hostname (für autorisierte Identity Platform-Domains).
Zur Seite „Identity Platform-Einstellungen“.
Zur Seite „Identity Platform-Einstellungen“
Klicken Sie auf den Tab Sicherheit und dann auf Domain hinzufügen.
Fügen Sie die kopierte Domain ein. Klicken Sie auf Hinzufügen und dann auf Speichern.
Webanwendung in Cloud Shell weiter ausführen. Sie benötigen es für die nächste Aufgabe.

Mit Ihrer Google-Identität in Identity Platform anmelden

Im folgenden Diagramm wird das in der Anleitung dargestellte allgemeine Architekturdiagramm veranschaulicht. Dieses Diagramm zeigt die Details des Authentifizierungsprozesses, der in diesem Dokument beschrieben wird, und den chronologischen Ereignisfluss. Die Ereignisse beginnen mit dem Nutzer, der auf eine Anmeldeschaltfläche klickt, und endet mit der Webanwendung, die Daten aus Firestore abruft und dabei die Identität des Nutzers verwendet:

Gesamtarchitektur

Ein Nutzer Ihrer Webanwendung klickt in der Webanwendung auf Über Google anmelden.
Die Webanwendung fragt Identity Platform nach der Anmelde-URL des ausgewählten Identitätsanbieters ab (in diesem Fall Google).
Die Webanwendung leitet den Nutzer zur Anmeldeseite für Ihren Identitätsanbieter und eine Callback-URL weiter, die auf den Authentifizierungs-Handler verweist.
Auf der Anmeldeseite des Anbieters gibt der Nutzer seine Anmeldedaten ein und erklärt der Autorisierungsanfrage, die von der Webanwendung angefordert wird.
Nach erfolgreicher Anmeldung des Nutzers generiert der Anbieter ein Token und sendet eine Weiterleitung an die zuvor bereitgestellte Callback-URL.
Der Authentifizierungs-Handler empfängt das von Google ausgestellte Token und sendet es an Identity Platform, um den Nutzer anzumelden. Identity Platform validiert das Token, meldet den Nutzer an und gibt ein von Identity Platform ausgestelltes ID-Token und ein Aktualisierungstoken mit den Informationen des Nutzers zurück. Wenn Identity Platform einen Nutzer zum ersten Mal anmeldet, wird in der Datenbank ein übereinstimmendes Nutzerprofil erstellt. Die von Google bereitgestellten Kontoinformationen werden zum Profil des Nutzers verwendet.
Nachdem Sie sich bei Identity Platform angemeldet haben, leitet der Handler Sie zurück zur Web-App zusammen mit den neuen Tokens von Identity Platform.
Zum Senden von Anfragen an Firestore hängt die Webanwendung das ID-Token des Nutzers an jede Firestore-Anfrage an. Die Firestore-Sicherheitsregeln geben an, dass Firestore jede Anfrage ohne ID-Token als anonyme Anfrage behandelt und abgelehnt wird.
Von Identity Platform ausgestellte ID-Tokens laufen nach einer Stunde ab. Wenn das ID-Token abläuft, verwendet die Webanwendung das im Cache gespeicherte Aktualisierungstoken, um ein neues ID-Token von Identity Platform abzurufen.

Die Beispiel-Webanwendung zeigt die zwei Interaktionsmöglichkeiten mit Identity Platform und Firestore.

Die erste Methode besteht in der Identity Platform REST API:

Diese Methode verwendet benutzerdefinierten Code, der die Identity Platform REST APIs mithilfe von JavaScript aufruft.
Die API-Aufrufe sind in der Datei site/identity-platform-auth-helper.js implementiert. Der Authentifizierungs-Handler ist in der Datei views/auth-handler.ejs implementiert.
Das Hilfsprogramm und der Handler tauschen Statusobjekte aus, damit Sie nach erfolgreicher Anmeldung zur Webanwendung zurückkehren können.

Die zweite Methode enthält das Identity Platform Client SDK:

Bei dieser Technik übernimmt das SDK den Anmeldevorgang.
Das SDK implementiert alle erforderlichen API-Aufrufe und stellt dem Entwickler eine Reihe von Funktionen zur Verfügung, mit denen gesteuert werden kann, welcher Anmeldefluss initiiert wird.

Mit Identity Platform REST APIs anmelden

Es gibt zwei Haupt-API-Aufrufe, die den Anmeldevorgang bei Google als Identitätsanbieter steuern.

Die beiden Haupt-API-Aufrufe, die den Anmeldevorgang mit Google als Anbieter steuern.

Rufen Sie die Anbieter-URL und -ID ab. Die Methode accounts.createAuthUri gibt eine Autorisierungs-URL für den angegebenen Identitätsanbieter zurück. Die Webanwendung ruft dann die zurückgegebene Autorisierungs-URL auf, um den Anmeldevorgang mit dem ausgewählten Identitätsanbieter (z. B. Google) zu starten.

Das folgende Code-Snippet zeigt, wie diese API aufgerufen wird:

IdentityPlatformAuthHelper.prototype.createAuthUri = function(providerId, tenantId) {
  // https://cloud.google.com/identity-platform/docs/reference/rest/v1/accounts/createAuthUri
  const createAuthUriUrl = `${this.identityPlatformBaseUrl}/accounts:createAuthUri?key=${config.apiKey}`;
  const request = {
    'providerId' : providerId,
    'tenantId' : tenantId,
    'continueUri' : this.authHandlerUrl,
  };

  return fetch(
      createAuthUriUrl,
      {
        contentType: 'application/json',
        method: 'POST',
        body: JSON.stringify(request)
      }
    )
  .then(response => response.json())
  .then(data => {
    return {
      "authUri" : data.authUri,
      "sessionId" : data.sessionId
    };
  })
  .catch(error => {
    console.error(error);
  });
};

Melden Sie sich mit einem von Google ausgestellten Token in Identity Platform an. Die Methode accounts.signInWithIdp signiert den Nutzer mithilfe der Autorisierungsantwort des Identitätsanbieters in Identity Platform. Die API antwortet auf diese Anfrage mit einem neuen von Identity Platform ausgegebenen Token. Die Webanwendung ruft diese API auf, nachdem sie vom Identitätsanbieter eine erfolgreiche Autorisierungsantwort erhalten hat. Das folgende Code-Snippet zeigt, wie diese API aufgerufen wird:

IdentityPlatformAuthHelper.prototype.signInWithIdp = function(data) {
  authState = this.getAuthState();
  this.authHandlerUrl = authState.authHandlerUrl;

  // https://cloud.google.com/identity-platform/docs/reference/rest/v1/accounts/signInWithIdp
  const signInWithIdpUrl = `${this.identityPlatformBaseUrl}/accounts:signInWithIdp?key=${config.apiKey}`;

  const request = {
      'requestUri' : this.authHandlerUrl,
      'sessionId' : authState.sessionId,
      'returnRefreshToken' : true,
      'returnSecureToken' : true,
      'tenantId' : authState.tenantId
    };

  if (authState.providerId == 'google.com' || authState.providerId.startsWith('saml.')) {
    request.postBody = `${data}&providerId=${authState.providerId}`;
  } else {
    throw new Error('This sample script only supports the google.com and SAML providers for Identity Platform');
  }

  fetch(
      signInWithIdpUrl,
      {
        contentType: 'application/json',
        method: 'POST',
        body: JSON.stringify(request)
      }
    )
  .then(response => response.json())
  .then(data => {
    this.user = data;
    this.signedInHandler(this.user);
  })
  .catch(error => {
    console.error(error);
  });
}

Der Wert des Felds postBody hat je nach ausgewähltem Identitätsanbieter und dem verwendeten Autorisierungsprotokoll unterschiedliche Formate. Der Code verarbeitet den Identitätsanbieter von Google mit dessen OpenID Connect-Token (OIDC) und SAML-basierten Identitätsanbietern mit den zugehörigen SAML-Antworten. Wenn Sie andere Autorisierungstoken wie OAuth 2.0 oder OAuth 1.0 verwenden, lesen Sie die API-Dokumentation Ihres Anbieters.

Nachdem sich ein Nutzer in Ihrer Webanwendung angemeldet hat, kann die Webanwendung Abfragen an Firestore senden.

Ereignisfluss, wenn die Webanwendung eine Abfrage an Firestore sendet.

Bevor der Code eine Anfrage an die Firestore REST APIs auslösen kann, fügt er der Anfrage das ID-Token hinzu, das von Identity Platform ausgegeben und signiert wurde. Das folgende Code-Snippet zeigt, wie die Anfrage erstellt wird:

function showCustomerInformation(userEmail) {
  $('#customer-information').show();
  $('#output').empty();

  const idTokenPromise = authHelper.getIdToken();
  const firestoreEndpoint = 'https://firestore.googleapis.com/v1';
  const defaultDbPath = `projects/${config.projectId}/databases/(default)/documents`;
  const collectionId = 'customers';

  // Call Firestore via its REST API and authenticate with the user's ID token
  idTokenPromise
  .then(idToken => {
    console.log(`JWT Token: ${idToken}`);
    return fetch(
      `${firestoreEndpoint}/${defaultDbPath}/${collectionId}/${userEmail}`,
      {
        headers: {
          'Authorization': 'Bearer ' + idToken
        },
        contentType: 'application/json',
        method: 'GET'
      })
  })
  .then(response => response.json())
  .then(data => {
      if (data.error) {
        throw data.error.message;
      }
      var fields = data.fields;
      $('#output').append($('<p>').text(`Id: ${userEmail}`));
      $('#output').append($('<p>').text(`Name: ${fields.name.stringValue}`));
      $('#output').append($('<p>').text(`Company: ${fields.company.stringValue}`));
      $('#output').append($('<p>').text(`Doc path: ${data.name}`));
      $('#output').append($('<p>').text(`Doc URL: ${firestoreEndpoint}/${data.name}`));
  })
  .catch(error => {
    console.error(error);
    $('#output').text("Error: " + JSON.stringify(error));
  });
}

Die Funktion IdentityPlatformAuthHelper.getIdToken() gibt durch Abrufen eines Browsers ein gültiges ID-Token in Form eines JSON Web Token (JWT) zurück, indem ein im Cache gespeichertes Token abgerufen wird. Wenn das Token bereits abgelaufen ist, kann es von der Funktion durch Aufrufen der Identity Platform API ein Aktualisierungstoken gegen ein neues ID-Token ausgetauscht werden.

Das folgende Snippet zeigt, wie Sie prüfen können, ob das vorhandene ID-Token noch gültig oder abgelaufen ist und wie Sie es durch Aufrufen der Identity Platform aktualisieren:

IdentityPlatformAuthHelper.prototype.getIdToken = function() {
  const token = this.jwtDecode(this.user.idToken);

  // If exp has passed, refresh the token
  if (Date.now() > token.payload.exp * 1000) {
    return this.refreshToken(this.user.refreshToken);
  }
  return Promise.resolve(this.user.idToken);
}

IdentityPlatformAuthHelper.prototype.jwtDecode = function(t) {
  const token = {};
  token.raw = t;
  token.header = JSON.parse(window.atob(t.split('.')[0]));
  token.payload = JSON.parse(window.atob(t.split('.')[1]));
  return token;
}

IdentityPlatformAuthHelper.prototype.refreshToken = function(refreshToken) {
  // https://cloud.google.com/identity-platform/docs/reference/rest/client#section-refresh-token
  const tokenUrl = `https://securetoken.googleapis.com/v1/token?key=${config.apiKey}`;
  const requestBody = new URLSearchParams(`grant_type=refresh_token&refresh_token=${refreshToken}`);

  return fetch(
      tokenUrl,
      {
        contentType: 'application/x-www-form-urlencoded',
        method: 'POST',
        body: requestBody
      }
    )
  .then(response => response.json())
  .then(data => {
    this.user.idToken = data.id_token;
    this.user.refreshToken = data.refresh_token;
    return this.user.idToken;
  })
  .catch(error => {
    console.error(error);
  });
}

Führen Sie die folgenden Schritte aus, um sich mit Ihrer Google-Identität in Identity Platform anzumelden:

Kehren Sie zu dem Tab zurück, auf dem die Standardseite der Webanwendung angezeigt wird. Wenn Sie diesen Tab bereits geschlossen haben, kehren Sie zurück zur Seite Cloud Shell, klicken auf Webvorschau und dann auf Vorschau auf Port 8080. Warten Sie, bis die Webseite im neuen Tab angezeigt wird.
Ändern Sie die Adresse im Browser, um die Seite customer-info-with-api.html anzuzeigen. Die neue URL hat folgendes Format: https://random_prefix-devshell.appspot.com/customer-info-with-api.html
Klicken Sie auf Über Google anmelden und melden Sie sich mit Ihren Anmeldedaten an. Nach der Anmeldung wird ein Textfeld mit Ihrer E-Mail-Adresse angezeigt.

Wenn Sie das JWT decodieren möchten, um die von Identity Platform und Google bereitgestellten Nutzerinformationen zu sehen, gehen Sie so vor: Alternativ können Sie mit dem nächsten Schritt fortfahren.

Die Informationen des Nutzers befinden sich im sekundären Teil des JWT und sind base64-codiert. Um den zweiten Teil des JWT zu decodieren und die Informationen in einer JSON-Datei zu drucken, führen Sie mit jq den folgenden Befehl in Cloud Shell aus:
```
token=[PASTE_JWT_STRING_HERE]
echo $token | awk '{split($0, a, "."); print a[2]; }' | base64 -d | jq
```
Fahren Sie mit dem Abfragen von Firestore für andere Dokumente fort.
Klicken Sie auf Kundeninformationen erhalten. Ihr Name und der Name Ihres Unternehmens werden angezeigt, wie Sie sie in der Firestore-Datenbank eingegeben haben.
Ändern Sie die E-Mail-Adresse in bob@example.com und klicken Sie dann auf Über Google anmelden. Die Antwort ist dieses Mal die folgende Fehlermeldung:

Error: "Missing or insufficient permissions." The security rule you added to Firestore limits your access to documents with an ID that matches your email address, as it appears in the token that Identity Platform created.
Schließen Sie die Webseite nicht. Sie werden ihn im nächsten Verfahren verwenden.

Mit dem Identity Platform Client SDK anmelden

Anstatt die Anfragen an Identity Platform manuell zu stellen, können Sie das Identity Platform Client SDK verwenden. Das SDK verwaltet den Anmeldevorgang und bietet Funktionen zur Kontrolle des Anmeldeablaufs, z. B. welcher Anbieter zu verwenden ist und ob eine Weiterleitung oder ein Pop-up verwendet werden soll.

Um das Identity Platform-Client-SDK zu verwenden, müssen Sie mehrere Skriptdateien in Ihre HTML-Seite einfügen. Das folgende Snippet zeigt, welche Skripts Sie benötigen:

<script src="https://www.gstatic.com/firebasejs/7.14.4/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.14.4/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.14.4/firebase-firestore.js"></script>

Das folgende Snippet zeigt, wie Sie das SDK zur Anmeldung beim Google-Anbieter verwenden.

$('#sign-in').click((event) => {
  provider = new firebase.auth.GoogleAuthProvider();
  //firebase.auth().signInWithPopup(provider)
  firebase.auth().signInWithRedirect(provider)
  .then((result) => {
    console.log(result);
  })
  .catch((error) => {
    console.error(error);
  });
});

firebase.auth().onAuthStateChanged(function(user) {
  if (user) {
    $('#logged-out').hide();
    /* If the provider gives a display name, use the name for the
    personal welcome message. Otherwise, use the user's email. */
    const welcomeName = user.displayName ? user.displayName : user.email;
    console.log(firebase.auth().currentUser);
    $('#user').text(welcomeName);
    $('#logged-in').show();
    $('#email').val(firebase.auth().currentUser.email);
  } else {
    $('#logged-in').hide();
    $('#logged-out').show();
    $('#email').val('');
  }
  $('#customer-information').hide();
});

$('#sign-out').click(function(event) {
  firebase.auth().signOut().then(function() {
    console.log('Sign out successful');
  }, function(error) {
    console.error(error);
  });
});

Die Funktion firebase.auth().signInWithRedirect() startet den Anmeldevorgang im selben Browserfenster, indem der Nutzer zur Anmeldeseite des Anbieters weitergeleitet wird. Mit dem GoogleAuthProvider wird die Funktion angewiesen, den Google-Anmeldevorgang zu initiieren.

Sie können das Weiterleitungsverhalten mit einem Pop-up-Verhalten ersetzen, indem Sie stattdessen die Funktion signInWithPopup aufrufen.

Wenn Sie andere Authentifizierungsanbieter verwenden möchten, fügen Sie einen beliebigen Typ hinzu, der die firebase.auth.AuthProvider-Schnittstelle implementiert. Um alle erforderlichen Parameter einzubeziehen, folgen Sie der Dokumentation des ausgewählten Anbieters.

Die Funktion firebase.auth().onAuthStateChanged ist ein Beobachter, der beim Ein- und Abmelden ausgelöst wird. Bei der Anmeldung füllt der Webanwendungs-Code die Webseite mit Informationen aus dem User-Objekt und blendet die Schaltfläche für die Anmeldung aus. Beim Abmelden löscht der Code die Webseite und zeigt die Anmeldeschaltfläche noch einmal an.

Das Identity Platform Client SDK kann in das Firestore SDK eingebunden werden. Das Firestore SDK hängt bei jeder Abfrage ein gültiges ID-Token an, indem es aus dem Identity Platform Client SDK abgerufen wird. Das Identity Platform Client SDK ist für die Aktualisierung des ID-Tokens zuständig, wenn es abläuft.

Das folgende Code-Snippet zeigt, wie Firestore mit dem Firestore SDK abgefragt wird:

function showCustomerInformation(userEmail) {
  $('#customer-information').show();
  $('#output').empty();

  const db = firebase.firestore();
  const collectionId = 'customers';

  query = db.collection(collectionId).doc(userEmail).get();
  query.then((doc) => {
    var fields = doc.data();
    $('#output').append($('<p>').text(`Id: ${doc.id}`));
    $('#output').append($('<p>').text(`Name: ${fields.name}`));
    $('#output').append($('<p>').text(`Company: ${fields.company}`));
  }).catch((error) => {
    console.error(error);
    $('#output').text("Error: " + error.toString());
  });
}

Beachten Sie, dass Sie keinen Code schreiben müssen, um der Anfrage das ID-Token hinzuzufügen. Der Authentifizierungsprozess wird vom Firestore-SDK und vom Identity Platform Client SDK verarbeitet.

Führen Sie die folgenden Schritte aus, um sich mit Ihrer Google-Identität in Identity Platform anzumelden und dann Firestore abzufragen:

Wenn Sie den relevanten Tab der Webanwendung bereits geschlossen haben, kehren Sie zur Seite Cloud Shell zurück, klicken Sie auf Webvorschau und dann auf Vorschau auf Port 8080. Warten Sie, bis die Webseite im neuen Tab angezeigt wird.
Ändern Sie die Adresse im Browser, um die Seite customer-info-with-sdk.html anzuzeigen. Die neue URL hat folgendes Format: https://random_prefix-devshell.appspot.com/customer-info-with-sdk.html
Klicken Sie auf Über Google anmelden und melden Sie sich mit Ihren Anmeldedaten an. Nach der Anmeldung wird ein Textfeld mit Ihrer E-Mail-Adresse angezeigt.
Klicken Sie auf Kundeninformationen erhalten. Ihr Name und der Name des Unternehmens werden angezeigt, wie Sie sie in der Firestore-Datenbank eingegeben haben.
Ändern Sie die E-Mail-Adresse zu bob@example.com und klicken Sie dann auf Über Google anmelden. Die Antwort auf diese Uhrzeit ist eine Fehlermeldung:

Error: FirebaseError: [code=permission-denied]: Missing or insufficient Permissions.

Weitere Informationen zur Verwendung von JavaScript zum Abfragen von Firestore finden Sie in der Firestore-Dokumentation.

Fehlerbehebung in der Webanwendung

Hier finden Sie nützliche Informationen über die schrittweise Fehlerbehebung in Verbindung mit den folgenden Schritten beim Ausführen der Webanwendung.

Fehler beim Durchsuchen der Web-App

Fehler Hinweise

Es wird eine der folgenden Fehlermeldungen angezeigt:
Error:Could not connect to Cloud Shell on port 8080 Error:No active Cloud Shell Prüfen Sie, ob Cloud Shell geöffnet ist und die Webanwendung ausgeführt wird. Weitere Informationen hierzu finden Sie unter Benutzerdefinierten Authentifizierungs-Handler registrieren. Wenn Sie eine neue Cloud Shell-Sitzung öffnen, müssen Sie vor der Ausführung der Webanwendung das Arbeitsverzeichnis in das Verzeichnis der Webanwendung ändern:

cd "$HOME"/cloudshell_open/securing-cloud-firestore-with-identity-platform

Prüfen Sie nach dem Ausführen der Webanwendung, ob die folgende Ausgabe angezeigt wird:

Example app listening on port 8080!

Fehler	Hinweise
Es wird eine der folgenden Fehlermeldungen angezeigt: `Error:Could not connect to Cloud Shell on port 8080 Error:No active Cloud Shell`	Prüfen Sie, ob Cloud Shell geöffnet ist und die Webanwendung ausgeführt wird. Weitere Informationen hierzu finden Sie unter Benutzerdefinierten Authentifizierungs-Handler registrieren. Wenn Sie eine neue Cloud Shell-Sitzung öffnen, müssen Sie vor der Ausführung der Webanwendung das Arbeitsverzeichnis in das Verzeichnis der Webanwendung ändern: `cd "$HOME"/cloudshell_open/securing-cloud-firestore-with-identity-platform` Prüfen Sie nach dem Ausführen der Webanwendung, ob die folgende Ausgabe angezeigt wird: `Example app listening on port 8080!`

Fehler beim Anmelden in Google

Fehler	Hinweise
Nichts passiert, wenn Sie auf Melde dich mit Google an klicken. Der folgende Fehlercode wird angezeigt: `Cannot GET /undefined`	Prüfen Sie, ob die Variablen `apiKey` und `authDomain` in der Datei `config.js` festgelegt sind, wie unter Webanwendung konfigurieren beschrieben.
Auf der Google-Anmeldeseite wird folgende Fehlermeldung angezeigt: `Authorization Error - Error 400: redirect_uri_mismatch`	Die an Google gesendete Weiterleitungs-URL stimmt nicht mit der Liste der für den OAuth-Client autorisierten URLs überein. Achten Sie darauf, dass Sie die autorisierten Weiterleitungs-URIs konfiguriert haben, wie unter Benutzerdefinierten Authentifizierungs-Handler registrieren erläutert.
Wenn Sie sich mit dem Identity Platform SDK bei Google anmelden, wird die folgende Fehlermeldung angezeigt: `This domain (***) is not authorized to run this operation. Add it to the OAuth redirect domains list in the Firebase console -> Auth section -> Sign-in method tab`	Dieser Fehler kann auftreten, wenn die von Cloud Shell verwendete Domain nicht in der Liste der zulässigen Domains für Identity Platform enthalten ist. Führen Sie die Schritte unter Webanwendungsdomain autorisieren aus, um zu prüfen, ob der Domainname der Domainliste hinzugefügt wurde.

Fehler beim Abrufen von Kundendaten

Fehler	Hinweise
Es wird eine der folgenden Fehlermeldungen angezeigt: `Error: FirebaseError: [code=permission-denied]: Missing or insufficient permissions` `Error: Missing or insufficient permissions`	Es ist möglich, dass die Firestore-Sicherheitsregeln das Token, das an Firestore gesendet wurde, nicht validieren konnten. Sorgen Sie dafür, dass die Firestore-Sicherheitsregeln ordnungsgemäß konfiguriert sind, wie unter Firestore-Sicherheitsregeln erstellen erläutert.
Es wird eine der folgenden Fehlermeldungen angezeigt: `Error: FirebaseError: [code=unavailable]: Failed to get document because the client is offline` `Error: "The project *** does not exist or it does not contain an active Datastore or Firestore database` `Error: "Project id [PROJECT_ID] is malformed: it either contains invalid characters or is too long`	Legen Sie das Attribut `projectId` in der Datei `config.js` fest, wie unter Webanwendung konfigurieren beschrieben.

Bereinigen

Damit Ihrem Google Cloud-Konto die in dieser Anleitung verwendeten Ressourcen nicht in Rechnung gestellt werden, löschen Sie entweder das Projekt, das die Ressourcen enthält, oder Sie behalten das Projekt und löschen die einzelnen Ressourcen.

Achtung: Das Löschen von Projekten hat folgende Auswirkungen:

Alle Inhalte des Projekts werden gelöscht. Wenn Sie für die Aufgaben in diesem Dokument ein bereits bestehendes Projekt verwendet haben und dieses löschen, werden auch alle anderen im Rahmen des Projekts erstellten Daten gelöscht.
Benutzerdefinierte Projekt-IDs gehen verloren. Beim Erstellen dieses Projekts haben Sie möglicherweise eine benutzerdefinierte Projekt-ID erstellt, die Sie weiterhin verwenden möchten. Damit die URLs, die die Projekt-ID nutzen, z. B. eine appspot.com-URL, erhalten bleiben, sollten Sie ausgewählte Ressourcen innerhalb des Projekts löschen, statt das gesamte Projekt.

Wenn Sie mehrere Architekturen, Anleitungen und Kurzanleitungen durcharbeiten möchten, können Sie die Überschreitung von Projektkontingenten verhindern, indem Sie Projekte wiederverwenden.

Wechseln Sie in der Google Cloud Console zur Seite Ressourcen verwalten.
Zur Seite „Ressourcen verwalten“
Wählen Sie in der Projektliste das Projekt aus, das Sie löschen möchten, und klicken Sie dann auf Löschen.
Geben Sie im Dialogfeld die Projekt-ID ein und klicken Sie auf Shut down (Beenden), um das Projekt zu löschen.

Einzelne Ressourcen löschen

Beenden Sie in Cloud Shell die Webanwendung durch Drücken von Ctrl+C.

Löschen Sie das geklonte Repository-Verzeichnis:

rm -rf "$HOME"/cloudshell_open/securing-cloud-firestore-with-identity-platform

Zur Seite „Identity Platform-Einstellungen“.

Zur Seite „Identity Platform-Einstellungen“
Klicken Sie auf den Tab Sicherheit, löschen Sie die zuvor hinzugefügte Domain und klicken Sie dann auf Speichern.
Zur Seite „Identitätsanbieter“

Zur Seite "Identitätsanbieter"
Löschen Sie den zuvor hinzugefügten Google-Anbieter.
Rufen Sie APIs & Dienste und dann die Seite Anmeldedaten auf.

Zur Seite "Domainbestätigung"
Klicken Sie auf der Seite „Anmeldedaten“ auf Webclient (von Google Service erstellt).
Löschen Sie auf der Seite Autorisierte Weiterleitungs-URIs die zuvor eingefügte URL und klicken Sie auf Speichern.
Öffnen Sie die Firebase Console und klicken Sie in der Konsole im Navigationsbereich auf Ihr Projekt.
Wählen Sie im Menü Entwickeln links die Option Datenbank aus.
Klicken Sie auf der Seite Datenbank auf den Tab Regeln.
Überschreiben Sie die aktuellen Sicherheitsregeln mit den Regeln, die Sie vor Beginn des Dokuments hatten, und klicken Sie dann auf Veröffentlichen.
Rufen Sie in der Google Cloud Console die Seite Firestore auf.
Klicken Sie auf das Menü links neben der Sammlung Customers und dann auf Sammlung löschen.
Geben Sie im Pop-up-Fenster zum Löschen der ID customers in das Feld der Sammlungs-ID ein und klicken Sie auf Löschen.

Nächste Schritte

Weitere Informationen zur Identity Platform und zu den REST APIs von Identity Platform.
Benutzerdefinierte Anforderungen bei Nutzern konfigurieren
Firestore-Sicherheitsregeln strukturieren
Skalierbare Anwendungen mit Firestore erstellen

Referenzarchitekturen, Diagramme und Best Practices zu Google Cloud kennenlernen. Weitere Informationen zu Cloud Architecture Center