Diese Seite wurde von der Cloud Translation API übersetzt.

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 bereitstellen und anpassen mit Cloud Run. 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 vorgefertigte Anmeldeseite nicht verwenden, wenn in Ihrem 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 E-Mail-Enumerationsschutz, 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 die Option Anmeldeseite für mich erstellen während der Einrichtung verwenden. Dadurch können Cloud Run und FirebaseUI erstellen eine Anmeldeseite für Sie.
Achten Sie darauf, dass das von Cloud Run verwendete Dienstkonto PROJECT_NUMBER-compute@developer.gserviceaccount.comdie folgenden vordefinierten Rollen hat:
- roles/identitytoolkit.viewer
- roles/iap.settingsAdmin
- roles/compute.networkViewer

Autorisierten Weiterleitungs-URI für Identity Platform-Anbieter festlegen

Wenn Sie Identity Platform-Anbieter verwenden, die eine Anmeldeweiterleitung erfordern (Weiterleitung zur externen IdP-Anmeldeseite). Sie müssen die URL der gehosteten Anmeldeseite als autorisierte Weiterleitungs-URL in Ihrer Anbieterkonfiguration hinzufügen.

Bei einem Google-Anbieter müssen Sie beispielsweise Folgendes tun:

Kopieren Sie die Anmelde-URL, nachdem Sie Ihre IAP-gesicherte Anwendung ausgewählt haben.
Wechseln Sie in der Google Cloud Console zur Seite Anmeldedaten.

Zu den Anmeldedaten
Fügen Sie LOGIN_URL/__/auth/handler als einen der autorisierten Weiterleitungs-URIs für den OAuth 2.0-Client Ihrer App hinzu. Wählen Sie dieselbe OAuth-Client-ID aus, die Sie beim Konfigurieren des Google-Anbieters verwendet haben.

Führen Sie bei anderen SAML- und OIDC-Anbietern ebenfalls LOGIN_URL/__/auth/handler als autorisierten Weiterleitungs-URI oder die ACS-URL hinzu.

Anmeldeseite testen

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

Gehen Sie zu einer durch IAP geschützten Ressource. Sie werden automatisch zur Anmeldeseite weitergeleitet.
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.
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. Die einfachste Möglichkeit, diesen zu beschaffen, ist die Aktivierung von Google als Anbieter für Identity Platform. Wenn Ihre Anwendung bereits Google als Identitätsanbieter verwendet, können Sie diesen Abschnitt überspringen.

Rufen Sie die Seite Identity Platform Providers (Identitätsplattform-Anbieter) auf der Seite Google Cloud Console

Zur Seite "Identity Platform-Anbieter"
Klicken Sie auf Anbieter hinzufügen.
Wählen Sie Google aus der Liste der Anbieter aus.
Konfigurieren Sie die Web-Client-ID und das Web-Client-Secret:
1. Wechseln Sie in der Google Cloud Console zur Seite Anmeldedaten.
  
  Zu „Anmeldedaten“
2. Sie können einen vorhandenen OAuth 2.0-Client verwenden oder einen neuen erstellen. Lege für Client ID und Client secret die Web-Client-ID und den Web-Clientschlüssel fest. Füge LOGIN_URL/__/auth/handler als einen der autorisierten Weiterleitungs-URIs für den OAuth 2.0-Client hinzu. LOGIN_URL ist die Anmelde-URL, die von IAP erstellt wurde, nachdem Sie die Option Anmeldeseite für mich erstellen ausgewählt haben. Sie finden sie in der Google Cloud Console auf der IAP-Seite. Wählen Sie dazu die mit IAP gesicherte Ressource aus.
Klicken Sie auf beiden Seiten auf Speichern.

Im Admin-Steuerfeld anmelden

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

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

Zur Seite "IAP".
Wählen Sie Ihre Ressource aus der Liste aus.
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:

Hinweis: Wenn eine Warnung angezeigt wird, dass die Anwendung noch nicht bestätigt wurde, können Sie sie problemlos für Entwicklungszwecke umgehen. Weitere Informationen finden Sie unter Ausnahmen von den Voraussetzungen für die Überprüfung.
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. Anstatt den von IAP erstellten LOGIN_URL als Standard-authDomain zu verwenden, können Sie PROJECT_ID.firebaseapp.com verwenden.

Wenn du PROJECT_ID.firebaseapp.com als authDomain verwenden möchtest, Ändere signInFlow zu popup, um Probleme mit dem Drittanbieter-Speicherzugriff bei gängigen Browsern zu vermeiden(siehe Best Practices für die Verwendung von „signInWithWeiterleitung“ bei Browsern, die den Zugriff auf Drittanbieter-Speicher blockieren). Folgen Sie außerdem der Anleitung unter Autorisierte Weiterleitungs-URIs für Identitätsplattform-Anbieter festlegen , um PROJECT_ID.firebaseapp.com/__/auth/handler als eine der autorisierten Weiterleitungs-URIs oder ACS-URLs für den Identity Platform-Anbieter hinzuzufügen, mit dem sich Nutzer anmelden.

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",
        "signInFlow": "popup",
        "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,
        "signInFlow": "popup",
        "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,
        "signInFlow": "popup",
        "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:

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

Rufen Sie die Cloud Run Seite auf.
Wählen Sie die Instanz aus, die die Anmeldeseite hostet.
Klicken Sie auf NEUE ÜBERARBEITUNG BEARBEITEN UND BEREITSTELLEN.
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.
Klicken Sie auf Deploy.

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:

Führen Sie die Schritte unter Benutzerdefinierte Domains zuordnen aus, um eine benutzerdefinierte Domain für die Cloud Run-Instanz festzulegen.
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:

Führen Sie die Schritte in diesem Artikel aus, um die Authentifizierungsseite für die erste IAP-Ressource bereitzustellen.
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.
Stellen Sie den Cloud Run-Dienst neu bereit.

Fehlerbehebung

Drittanbieter-Cookies und Speicherpartitionierung in Browsern

Bei Browsern, in denen Cookies von Drittanbietern deaktiviert oder Speicherpartitionierung implementiert sind, funktioniert die Anmeldeseite oder die Admin-Seite möglicherweise nicht richtig. So beheben Sie das Problem:

Bringen Sie die Anmeldeseite noch einmal zum Laufen, um die neueste Version 1.0.1 zu verwenden.

Wenn Sie die Funktion Anmeldeseite anpassen verwenden, muss authDomain als LOGIN_URL festgelegt sein, die von IAP erstellt wurde. Alternativ können Sie authDomain auf PROJECT_ID.firebaseapp.com festlegen, wenn signInFlow auf popup gesetzt ist.

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

oder

{
  "AIzaSyC5DtmRUR...": {
    "authDomain": "PROJECT_ID.firebaseapp.com",
    "tenants": {
      "tenant-a-id": {
        ...
        "signInFlow": "popup"
        ...
      }
    }
    ...
  }
}

Nächste Schritte

Authentifizierungs-UI mit FirebaseUI erstellen
Benutzerdefinierte Authentifizierungs-UI erstellen
Mehr erfahren zur Funktionsweise von externen Identitäten mit IAP