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.
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:
Kopieren Sie nach der Auswahl Ihrer Anwendung die Login URL (Log-in-URL).
Wechseln Sie in der Google Cloud Console zur Seite Anmeldedaten.
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.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:
Klicken Sie auf Seite anpassen.
Legen Sie in der Konfigurationsdatei im JSON-Format
authDomain
aufPROJECT_ID.firebaseapp.com
undsignInFlow
aufpopup
fest.Klicken Sie auf Speichern, um die Konfiguration zu speichern.
Ersetzen Sie Folgendes:
LOGIN_URL
: die Domain Ihrer gehosteten AnmeldeseitePROJECT_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:
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. 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.
Rufen Sie in der Google Cloud Console die Seite Identity Platform-Anbieter auf.
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:
Öffnen Sie in einem neuen Tab die IAP-Seite.
Maximieren Sie das Menü Mehr anzeigen für Ihre Ressource und klicken Sie auf OAuth-Client bearbeiten.
Kopieren Sie die Felder Client-ID und Clientsecret in die Google-Anbieterkonfiguration für Identity Platform.
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
.
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
).
Rufen Sie in der Google Cloud Console die Seite IAP auf.
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: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:
Rufen Sie in der Google Cloud Console die Seite Cloud Run 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 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:
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:
Rufen Sie in der Google Cloud Console die Seite IAP auf.
Wählen Sie die durch IAP geschützte Ressource aus.
Wählen Sie in der Seitenleiste neben dem Feld Anmelde-URL () das Symbol Bearbeiten () aus.
Wählen Sie Vorhandene gehostete Anmeldeseite verwenden und wählen Sie Ihre Domain aus dem Drop-down-Menü aus.
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
Die Anmeldeseite funktioniert nicht in Browsern, in denen Drittanbieter-Cookies deaktiviert oder eine Speicherpartitionierung implementiert ist.
So beheben Sie das Problem:
Stellen Sie Ihre Anmeldeseite noch einmal bereit. Die neueste Version der Anmeldeseite verwendet die Domain der Anmeldeseite als
authDomain
.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
- Authentifizierungs-UI mit FirebaseUI erstellen
- Benutzerdefinierte Authentifizierungs-UI erstellen
- Mehr erfahren zur Funktionsweise von externen Identitäten mit IAP