Anmeldeseite mit Cloud Run erstellen

Damit externe Identitäten mit Identity-Aware Proxy (IAP) verwendet werden können, benötigt Ihre Anwendung eine Anmeldeseite. IAP leitet Nutzer auf diese Seite weiter, damit sie sich authentifizieren, bevor sie auf sichere Ressourcen zugreifen können.

In diesem Dokument erfahren Sie, wie Sie eine vordefinierte Anmeldeseite mit Cloud Run bereitstellen und anpassen können. Dies ist der schnellste Weg, um mit externen Identitäten zu beginnen. Es ist nicht erforderlich, Code zu schreiben.

Sie können auch selbst eine Anmeldeseite erstellen. Eine eigene Seite zu erstellen, ist schwieriger, bietet aber mehr Kontrolle über den Authentifizierungsablauf und die Nutzerfreundlichkeit. Weitere Informationen finden Sie unter Anmeldeseite mit FirebaseUI erstellen und Benutzerdefinierte Anmeldeseite erstellen.

Einschränkungen für die Anmeldeseite

Sie können die vordefinierte Anmeldeseite nicht verwenden, wenn für Ihr Projekt der Schutz vor E-Mail-Enumeration aktiviert ist.

Wenn für Ihr Projekt der Schutz vor E-Mail-Enumeration aktiviert ist, deaktivieren Sie den Schutz vor E-Mail-Enumeration, bevor Sie mit den Verfahren in diesem Dokument fortfahren.

Hinweise

  • Aktivieren Sie die Compute Engine API.

    Compute Engine API aktivieren

  • Aktivieren Sie externe Identitäten und wählen Sie während der Einrichtung die Option Anmeldeseite für mich erstellen aus. Dadurch können Cloud Run und FirebaseUI eine Anmeldeseite für Sie erstellen.

  • Achten Sie darauf, dass das von Cloud Run verwendete Dienstkonto PROJECT_NUMBER-compute@developer.gserviceaccount.com die folgenden vordefinierten Rollen hat:

    • roles/identitytoolkit.viewer
    • roles/iap.settingsAdmin
    • roles/compute.networkViewer

Weiterleitungs-URL der gehosteten Seite festlegen

Gehostete Anmeldeseiten verwenden ihre eigene Domain als Firebase-Authentifizierungsdomain, um sicherzustellen, dass die Anmeldung über Weiterleitung in allen Umgebungen funktioniert. Sie müssen die URL der gehosteten Seite in der Anbieterkonfiguration als autorisierte Weiterleitungs-URL hinzufügen.

So fügen Sie die URL der gehosteten Anmeldeseite als autorisierte Weiterleitungs-URL hinzu:

  1. Kopieren Sie nach der Auswahl Ihrer Anwendung die Login URL (Log-in-URL).

  2. Wechseln Sie in der Google Cloud Console zur Seite Anmeldedaten.

    Zu den Anmeldedaten

  3. Fügen Sie LOGIN_URL/__/auth/handler als einen der autorisierten Weiterleitungs-URIs für den OAuth 2.0-Client Ihrer Anwendung hinzu. Wähle dieselbe OAuth-Client-ID und denselben geheimen Schlüssel aus, die du bei der Konfiguration deines Anbieters verwendet hast.

  4. Wenn Ihre Anwendung andere SAML- und OIDC-Anbieter verwendet, fügen Sie LOGIN_URL/__/auth/handler als autorisierten Weiterleitungs-URI oder ACS-URL hinzu.

Alternativ können Sie PROJECT_ID.firebaseapp.com statt LOGIN_URL/__/auth/handler als Authentifizierungsdomain verwenden. Passen Sie dazu Ihre Anmeldeseite über den Pop-up-Anmeldevorgang an.

So implementieren Sie den Pop-up-Anmeldevorgang für Ihre Seite:

  1. Klicken Sie auf Seite anpassen.

  2. Legen Sie in der Konfigurationsdatei im JSON-Format authDomain auf PROJECT_ID.firebaseapp.com und signInFlow auf popup fest.

  3. Klicken Sie auf Speichern, um die Konfiguration zu speichern.

Ersetzen Sie Folgendes:

  • LOGIN_URL: die Domain Ihrer gehosteten Anmeldeseite
  • PROJECT_ID: die Firebase-Projekt-ID

Hier sehen Sie ein Beispiel für die Konfiguration eines Pop-up-Anmeldevorgangs:

{
  "AIzaSyC5DtmRUR...": {
    "authDomain": "example.firebaseapp.com",
    "displayMode": "optionFirst",
    ...
    ...
    "tenants": {
      "tenant-a-id": {
        "fullLabel": "Company A Portal",
        "displayName": "Company A",
        ...
        ...
        "signInFlow": "popup",
        ...
        ...
      }
    }
  }
}

Weitere Informationen zu den Best Practices für die Weiterleitung und zur Speicherpartitionierung finden Sie unter Best Practices für die Verwendung von „signInWithWeiterleitung“ in Browsern, die den Zugriff auf Speicher von Drittanbietern blockieren.

Anmeldeseite testen

Die erste IAP-Anmeldeseite ist vollständig funktionsfähig. So testen Sie sie:

  1. Gehen Sie zu einer durch IAP geschützten Ressource. Sie werden automatisch zur Anmeldeseite weitergeleitet.

  2. Wählen Sie einen Mandanten und Anbieter aus, mit dem Sie sich anmelden möchten. Wenn keine Mandanten oder Anbieter aufgeführt sind, prüfen Sie, ob Sie mit Identity Platform einen solchen konfiguriert haben.

  3. Melden Sie sich mit Ihren Anmeldedaten an.

Sie werden zur geschützten Ressource weitergeleitet.

Anmeldeseite anpassen

Sie können die Anmeldeseite mithilfe einer JSON-Konfigurationsdatei anpassen. Folgende Optionen sind möglich:

  • Hinzufügen einer Header und eines Logos zur Anmeldeseite
  • Die verfügbaren Mandanten und Anbieter angeben.
  • Anpassen der Symbole und Stile jeder Schaltfläche von Mandanten und Anbietern
  • Links zu den Datenschutzbestimmungen und Nutzungsbedingungen Ihrer Anwendung hinzufügen

In den folgenden Abschnitten wird erläutert, wie Sie auf die JSON-Konfigurationsdatei zugreifen und diese aktualisieren.

Zugriffstoken abrufen

Für die Verwaltung der Anmeldeseite benötigen Sie ein Google-Zugriffstoken. Am einfachsten erhalten Sie eine solche ID, wenn Sie Google als Anbieter für die Identity Platform aktivieren. Wenn Ihre Anwendung bereits Google als Identitätsanbieter verwendet, können Sie diesen Abschnitt überspringen.

  1. Rufen Sie in der Google Cloud Console die Seite Identity Platform-Anbieter auf.

    Zur Seite „Identity Platform-Anbieter“

  2. Klicken Sie auf Anbieter hinzufügen.

  3. Wählen Sie Google aus der Liste der Anbieter aus.

  4. Konfigurieren Sie die Web-Client-ID und das Web-Client-Secret:

    1. Öffnen Sie in einem neuen Tab die IAP-Seite.

      Zur Seite „IAP“

    2. Maximieren Sie das Menü Mehr anzeigen für Ihre Ressource und klicken Sie auf OAuth-Client bearbeiten.

    3. Kopieren Sie die Felder Client-ID und Clientsecret in die Google-Anbieterkonfiguration für Identity Platform.

    4. Fügen Sie die Identity Platform-Weiterleitungs-URL für die Liste Autorisierte Weiterleitungs-URIs für den OAuth-Client hinzu. Die URL hat das Format https://PROJECT_ID.firebaseapp.com/__/auth/handler.

  5. Klicken Sie auf beiden Seiten auf Speichern.

Im Admin-Steuerfeld anmelden

Die JSON-Konfiguration für die von Cloud Run gehostete Anmeldeseite. Die folgenden Schritte zeigen, wie auf das Steuerfeld zugegriffen wird. Sie benötigen die Rolle "Storage-Administrator" (roles/storage.admin).

  1. Rufen Sie in der Google Cloud Console die Seite IAP auf.

    Zur Seite „IAP“

  2. Wählen Sie Ihre Ressource aus der Liste aus.

  3. Starten Sie die URL, die unter der Seite "Anpassen" im Infofeld aufgeführt ist. Sie sollte etwa so https://servicename-xyz-uc.a.run.app/admin aussehen:

  4. Melden Sie sich mit demselben Google-Konto an, das Sie zur Konfiguration von IAP verwendet haben. Ein Texteditor, der die JSON-Konfigurationsdatei enthält, wird angezeigt.

Konfiguration ändern

Das Konfigurationsschema für die Anmeldeseite basiert auf FirebaseUI und übernimmt viele der Attribute. Der folgende Code zeigt eine Beispielkonfiguration mit drei Mandanten:

{
  "AIzaSyC5DtmRUR...": {
    "authDomain": "awesomeco.firebaseapp.com",
    "displayMode": "optionFirst",
    "selectTenantUiTitle": "Awesome Company Portal",
    "selectTenantUiLogo": "https://awesome.com/abcd/logo.png",
    "styleUrl": "https://awesome.com/abcd/overrides/stylesheet.css",
    "tosUrl": "https://awesome.com/abcd/tos.html",
    "privacyPolicyUrl": "https://awesome.com/abcd/privacypolicy.html",
    "tenants": {
      "tenant-a-id": {
        "fullLabel": "Company A Portal",
        "displayName": "Company A",
        "iconUrl": "https://companya.com/img/icon.png",
        "logoUrl": "https://companya.com/img/logo.png",
        "buttonColor": "#007bff",
        "signInOptions": [
          {
            "provider": "password",
            "requireDisplayName": false,
            "disableSignUp": {
              "status": true,
              "adminEmail": "admin@example.com",
              "helpLink": "https://www.example.com/trouble_signing_in"
            }
          },
          "facebook.com",
          "google.com",
          "microsoft.com",
          {
            "provider": "saml.okta-cicp-app",
            "providerName": "Corp Account",
            "fullLabel": "Employee Corporate Login",
            "buttonColor": "#ff0000",
            "iconUrl": "https://companya.com/abcd/icon-1.png"
          },
          {
            "provider": "oidc.okta-oidc",
            "providerName": "Contractor Account",
            "fullLabel": "Contractor Account Portal",
            "buttonColor": "#00ff00",
            "iconUrl": "https://companya.com/abcd/icon-2.png"
          }
        ],
        "tosUrl": "https://companya.com/abcd/tos.html",
        "privacyPolicyUrl": "https://companya.com/abcd/privacypolicy.html"
      },
      "tenant-b-id": {
        "fullLabel": "Company B Portal",
        "displayName": "Company B",
        "iconUrl": "https://companyb.com/img/icon.png",
        "logoUrl": "https://companyb.com/img/logo.png",
        "buttonColor": "#007bff",
        "immediateFederatedRedirect": true,
        "signInOptions": [
          {
            "provider": "saml.okta-bla-app",
            "providerName": "Corp Account",
            "buttonColor": "#0000ff",
            "iconUrl": "https://companyb.com/abcd/icon.png"
          }
        ],
        "tosUrl": "https://companyb.com/abcd/tos.html",
        "privacyPolicyUrl": "https://companyb.com/abcd/privacypolicy.html"
      },
      "tenant-c-id": {
        "fullLabel": "Company C Portal",
        "displayName": "Company C",
        "iconUrl": "https://companyc.com/img/icon.png",
        "logoUrl": "https://companyc.com/img/logo.png",
        "buttonColor": "#007bff",
        "immediateFederatedRedirect": true,
        "signInOptions": [
          {
            "provider": "password",
            "requireDisplayName": false
          },
          {
            "provider": "google.com",
            "scopes": ["scope1", "scope2", "https://example.com/scope3"],
            "loginHintKey": "login_hint",
            "customParameters": {
              "prompt": "consent",
            },
          }
        ],
        "tosUrl": "https://companyc.com/abcd/tos.html",
        "privacyPolicyUrl": "https://companyc.com/abcd/privacypolicy.html",
        "adminRestrictedOperation": {
          "status": true,
          "adminEmail": "admin@example.com",
          "helpLink": "https://www.example.com/trouble_signing_in"
        }
      },
    }
  }
}

Eine vollständige Liste der verfügbaren Attribute finden Sie in der Referenzdokumentation.

CSS überschreiben

Sie können mit der Eigenschaft styleUrl eine benutzerdefinierte CSS-Datei angeben. Stile in dieser Datei überschreiben den Standard-CSS-Code. Die Datei muss öffentlich über HTTPS öffentlich zugänglich sein (z. B. in einem Cloud Storage-Bucket).

Im folgenden Beispiel wird gezeigt, wie die Standard-CSS überschrieben wird:

/** Change header title style. */
.heading-center {
  color: #7181a5;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
  font-weight: bold;
}

/** Use round edged borders for container. */
.main-container {
  border-radius: 5px;
}

/** Change page background color. */
body {
  background-color: #f8f9fa;
}

Cloud Run-Instanz noch einmal bereitstellen

In einigen Fällen bietet es sich an, die Cloud Run-Instanz, auf der die Anmeldeseite gehostet wird, noch einmal bereitzustellen. Beispielszenarien:

  • Identitätsanbieter hinzufügen, ändern oder entfernen
  • Mandantenkonfigurationen ändern
  • Umgebungsvariablen festlegen
  • Container-Image auf die neueste Version aktualisieren

Durch regelmäßiges Aktualisieren und erneute Bereitstellung des Container-Images wird gewährleistet, dass die neuesten Fehlerkorrekturen und Sicherheitspatches installiert sind. Eine Liste der Änderungen finden Sie auf GitHub.

Mit dem Endpunkt /versionz können Sie die aktuelle Version des bereitgestellten Containers abrufen. Beispiel:

curl 'https://servicename-xyz-uc.a.run.app/versionz'

So stellen Sie die Cloud Run-Instanz noch einmal bereit:

  1. Rufen Sie in der Google Cloud Console die Seite Cloud Run auf.

    Zur Seite „Cloud Run“

  2. Wählen Sie die Instanz aus, die die Anmeldeseite hostet.

  3. Klicken Sie auf NEUE ÜBERARBEITUNG BEARBEITEN UND BEREITSTELLEN.

  4. Optional können Sie erweiterte Einstellungen für die Überarbeitung festlegen oder eine Umgebungsvariable hinzufügen, indem Sie auf den Tab Variablen und Secrets klicken.

  5. Klicken Sie auf Bereitstellen.

Erweiterte Optionen

Anmeldeseite programmatisch anpassen

Sie können die JSON-Konfiguration zusätzlich zur /admin-Konsole aktualisieren.

Rufen Sie mit dem Endpunkt /get_admin_config die aktuelle Konfiguration ab. Beispiel:

curl -H 'Authorization: Bearer [TOKEN]'
  'https://servicename-xyz-uc.a.run.app/get_admin_config'

Aktualisieren Sie die Konfiguration mit /set_admin_config. Beispiel:

curl -XPOST -H 'Authorization: Bearer [TOKEN]' -H "Content-type: application/json"
  -d '[UPDATED-CONFIG]' 'https://servicename-xyz-uc.a.run.app/set_admin_config'

Beide REST-Aufrufe erfordern den Bereich https://www.googleapis.com/auth/devstorage.read_write und an den Header Authorization muss ein gültiges OAuth-Token angehängt werden.

Umgebungsvariablen festlegen

Sie können Umgebungsvariablen für die Cloud Run-Instanz festlegen, um die erweiterten Einstellungen anzupassen. In der folgenden Tabelle sind die verfügbaren Variablen aufgeführt:

Variable Beschreibung
DEBUG_CONSOLE Ein boolescher Wert (0 oder 1), der angibt, ob alle Netzwerkanfragen und -details protokolliert werden sollen. Es werden keine vertraulichen Daten erfasst. 0: standardmäßig deaktiviert.
UI_CONFIG Ein String mit der JSON-Konfiguration für die Anmeldeseite. Wenn Sie diese Variable anstelle des Feldes /admin verwenden, müssen beim Zugriff auf die Konfiguration keine Lese- und Schreibvorgänge in Cloud Storage erfolgen. Ungültige Konfigurationen werden ignoriert. Wenn Sie Ihre JSON-Datei vor dem Festlegen dieser Variablen mithilfe des Feldes /admin validieren, können Sie Syntaxfehler minimieren.
GCS_BUCKET_NAME Ein String, der den standardmäßigen Cloud Storage-Bucket überschreibt, der zum Speichern der JSON-Konfiguration verwendet wird. Die Datei hat den Namen config.json und der Standardspeicherort ist gcip-iap-bucket-[CLOUD-RUN-SERVICE-NAME]-[PROJECT-NUMBER].
ALLOW_ADMIN Ein boolescher Wert (0 oder 1), der angibt, ob der Zugriff auf den Konfigurationsbereich /admin zugelassen werden soll. 1: standardmäßig aktiviert.

Sie müssen eine neue Überarbeitung der Cloud Run-Instanz bereitstellen, nachdem die Variablen aktualisiert wurden, bevor die Änderungen wirksam werden. Weitere Informationen zu Umgebungsvariablen finden Sie in der Cloud Run-Dokumentation.

Domain anpassen

Standardmäßig sehen Nutzer bei der Anmeldung die URL der Cloud Run-Instanz. So legen Sie eine benutzerdefinierte Domain fest:

  1. Führen Sie die Schritte unter Benutzerdefinierte Domains zuordnen aus, um eine benutzerdefinierte Domain für die Cloud Run-Instanz festzulegen.

  2. Konfigurieren Sie IAP für die Verwendung der neuen Authentifizierungs-URL:

    1. Rufen Sie in der Google Cloud Console die Seite IAP auf.

      Zur Seite „IAP“

    2. Wählen Sie die durch IAP geschützte Ressource aus.

    3. Wählen Sie in der Seitenleiste neben dem Feld Anmelde-URL () das Symbol Bearbeiten () aus.

    4. Wählen Sie Vorhandene gehostete Anmeldeseite verwenden und wählen Sie Ihre Domain aus dem Drop-down-Menü aus.

    5. Klicken Sie auf Speichern.

Eine Anmeldeseite für mehrere IAP-Ressourcen verwenden

Sie können mehrere IAP-Ressourcen über dieselbe Anmeldeseite schützen. Dadurch entfällt die Arbeit beim Verwalten mehrerer Konfigurationen.

So können Sie eine Anmeldeseite wiederverwenden:

  1. Führen Sie die Schritte in diesem Artikel aus, um die Authentifizierungsseite für die erste IAP-Ressource bereitzustellen.

  2. Aktivieren Sie IAP für die zweite Ressource. Wenn Sie aufgefordert werden, eine Anmeldeseite anzugeben, wählen Sie Ich stelle meine eigene zur Verfügung und geben Sie die URL des Cloud-Run-Dienstes als die URL ein.

  3. Stellen Sie den Cloud Run-Dienst neu bereit.

Fehlerbehebung

Die Anmeldeseite funktioniert nicht in Browsern, in denen Drittanbieter-Cookies deaktiviert oder eine Speicherpartitionierung implementiert ist.

So beheben Sie das Problem:

  1. Stellen Sie Ihre Anmeldeseite noch einmal bereit. Die neueste Version der Anmeldeseite verwendet die Domain der Anmeldeseite als authDomain.

  2. Passen Sie die Konfiguration Ihrer Anmeldeseite so an, dass authDomain als URL der Anmeldeseite für Ihre IAP-geschützte Anwendung festgelegt ist.

    {
      "AIzaSyC5DtmRUR...": {
        "authDomain": "LOGIN_URL",
        ...
      }
    }
    

Nächste Schritte