Anpassen der integrierten Registrierungs- und Anmeldungswebseiten - Amazon Cognito
Angabe eines benutzerdefinierten Logos für die AppAngabe von CSS-Anpassungen für die AppAngabe von App-Anpassungseinstellungen für die Benutzeroberfläche eines Benutzerpools (AWS Management Console)Angeben von Anpassungseinstellungen für die App-Benutzeroberfläche eines Benutzerpools (AWS CLI- and AWS-API)

Die vorliegende Übersetzung wurde maschinell erstellt. Im Falle eines Konflikts oder eines Widerspruchs zwischen dieser übersetzten Fassung und der englischen Fassung (einschließlich infolge von Verzögerungen bei der Übersetzung) ist die englische Fassung maßgeblich.

Anpassen der integrierten Registrierungs- und Anmeldungswebseiten

Verwenden Sie die AWS Management Console oder AWS CLI oder API, um Anpassungseinstellungen für die integrierte App-Benutzeroberfläche anzugeben. Sie können ein benutzerdefiniertes Logo-Image hochladen, das Sie in der App anzeigen möchten. Sie können auch Cascading Stylesheets (CSS) verwenden, um das Layout der Benutzeroberfläche anzupassen.

Sie können die Einstellungen für die Anpassung der App-Benutzeroberfläche für einen einzelnen Client angeben (mit einem spezifischen clientId), oder für alle Clients (durch Festlegen der clientId auf ALL). Wenn Sie ALL angeben, wird die Standard-Konfiguration für jeden Client verwende, für den zuvor keine Anpassung der Benutzeroberfläche eingestellt wurde. Wenn Sie die Benutzeroberflächen-Einstellungen für einen bestimmten Client angeben, greift er nicht mehr auf die Konfiguration ALL zurück.

Die Anforderung, die die Anpassung Ihrer Benutzeroberfläche festlegt, darf eine Größe von 135 KB nicht überschreiten. In seltenen Fällen kann es sein, dass die Anforderungs-Header, Ihre CSS-Datei und Ihr Logo zusammen 135 KB überschreiten. Amazon Cognito codiert die Bilddatei in Base64. Dadurch erhöht sich die Größe eines Bilds mit 100 KB auf 130 KB, so dass fünf KB für Anforderungs-Header und Ihre CSS-Datei übrig bleiben. Wenn die Anforderung zu groß ist, gibt die AWS Management Console oder Ihre API-Anforderung SetUICustomization einen Fehler request parameters too large zurück. Passen Sie Ihr Logobild so an, dass es nicht größer als 100 KB ist, und Ihre CSS-Datei so, dass sie nicht größer als 3 KB ist. Sie können CSS- und Logo-Anpassungen nicht separat festlegen.

Anmerkung

Um Ihre Benutzeroberfläche anzupassen, müssen Sie eine Domain für Ihren Benutzerpool einrichten.

Amazon Cognito zentriert Ihr benutzerdefiniertes Logo über den Eingabefeldern auf dem Login-Endpunkt.

Wählen Sie für Ihr benutzerdefiniertes gehostetes Logo der Benutzeroberfläche eine PNG-, JPG- oder JPEG-Datei, die auf 350 mal 178 Pixel skaliert werden kann. Ihre Logodatei darf nicht größer als 100 KB bzw. 130 KB nach der Codierung in Base64 durch Amazon Cognito sein. Um eine ImageFile in SetUICustomization in der API festzulegen, können Sie Ihre Datei in eine Base64-codierte Textzeichenfolge konvertieren oder in der AWS CLI einen Dateipfad angeben und Amazon Cognito die Codierung überlassen.

Angabe von CSS-Anpassungen für die App

Sie können CSS für die gehosteten App-Seiten anpassen. Dabei gelten die folgenden Einschränkungen:

  • Sie können einen der folgenden CSS-Klassennamen verwenden:

    • background-customizable

    • banner-customizable

    • errorMessage-customizable

    • idpButton-customizable

    • idpButton-customizable:hover

    • idpDescription-customizable

    • inputField-customizable

    • inputField-customizable:focus

    • label-customizable

    • legalText-customizable

    • logo-customizable

    • passwordCheck-valid-customizable

    • passwordCheck-notValid-customizable

    • redirect-customizable

    • socialButton-customizable

    • submitButton-customizable

    • submitButton-customizable:hover

    • textDescription-customizable

  • Eigenschaftswerte können HTML enthalten, mit Ausnahme der folgenden Werte: @import, @supports, @page, @media-Anweisungen oder JavaScript.

Sie können die folgenden CSS-Eigenschaften anpassen:

Bezeichnungen

  • font-weight ist ein Vielfaches von 100 von 100 bis 900.

Eingabefelder

  • width ist die Breite als Prozentsatz des umschließenden Blocks.

  • height ist die Höhe des Eingabefeldes in Pixel (px).

  • color ist die Textfarbe. Dabei kann es sich um jeden standardmäßigen CSS-Farbwert handeln.

  • background-color ist die Hintergrundfarbe des Eingabefeldes. Dabei kann es sich um jeden standardmäßigen CSS-Farbwert handeln.

  • border ist ein standardmäßiger CSS-Rahmenwert, der die Breite, Transparenz und Farbe des Rahmens Ihres App-Fensters angibt. Die Breite kann ein beliebiger Wert zwischen 1px zu 100px sein. Transparenz kann vollständig oder nicht transparent sein. Bei der Farbe kann es sich um jeden standardmäßigen Farbwert handeln.

Textbeschreibungen

  • padding-top ist der Abstand oberhalb der Beschreibung.

  • padding-bottom ist der Abstand unterhalb der Beschreibung.

  • display kann block oder inline sein.

  • font-size ist die Schriftgröße für Textbeschreibungen.

Absenden-Schaltfläche

  • font-size ist die Schriftgröße für den Schaltflächentext.

  • font-weight ist die Schriftauszeichnung für den Schaltflächentext: bold, italic oder normal.

  • margin ist eine Zeichenfolge aus 4 Werten, die die Seitenränder oben, rechts, unten und links für die Schaltfläche angeben.

  • font-size ist die Schriftgröße für Textbeschreibungen.

  • width ist die Breite des Schaltflächentexts als Prozentwert des umschließenden Blocks.

  • height ist die Höhe der Schaltfläche in Pixel (px).

  • color ist die Farbe der Schaltfläche. Dabei kann es sich um jeden standardmäßigen CSS-Farbwert handeln.

  • background-color ist die Hintergrundfarbe der Schaltfläche. Dabei kann es sich um jeden standardmäßigen Farbwert handeln.

Banner

  • padding ist eine Zeichenfolge aus 4 Werten, die die Abstandsgrößen oben, rechts, unten und links für das Banner angeben.

  • background-color ist die Hintergrundfarbe der Banners. Dabei kann es sich um jeden standardmäßigen CSS-Farbwert handeln.

Absenden-Schaltfläche, wenn der Mauszeiger auf sie geschoben wird

  • color ist die Vordergrundfarbe der Schaltfläche, wenn Sie den Mauszeiger auf sie schieben. Dabei kann es sich um jeden standardmäßigen CSS-Farbwert handeln.

  • background-color ist die Hintergrundfarbe der Schaltfläche, wenn Sie den Mauszeiger auf sie schieben. Dabei kann es sich um jeden standardmäßigen CSS-Farbwert handeln.

Identitätsanbieter-Schaltfläche, wenn der Mauszeiger auf sie geschoben wird

  • color ist die Vordergrundfarbe der Schaltfläche, wenn Sie den Mauszeiger auf sie schieben. Dabei kann es sich um jeden standardmäßigen CSS-Farbwert handeln.

  • background-color ist die Hintergrundfarbe der Schaltfläche, wenn Sie den Mauszeiger auf sie schieben. Dabei kann es sich um jeden standardmäßigen CSS-Farbwert handeln.

Password-Prüfung nicht gültig

  • color ist die Textfarbe der "Password check not valid"-Meldung. Dabei kann es sich um jeden standardmäßigen CSS-Farbwert handeln.

Hintergrund

  • background-color ist die Hintergrundfarbe des App-Fensters. Dabei kann es sich um jeden standardmäßigen CSS-Farbwert handeln.

Fehlermeldungen

  • margin ist eine Zeichenfolge aus 4 Werten, die die Seitenränder oben, rechts, unten und links angeben.

  • padding ist die Abstandsgröße.

  • font-size ist die Schriftgröße.

  • width ist die Breite der Fehlermeldung als Prozentsatz des umschließenden Blocks.

  • background ist die Hintergrundfarbe der Fehlermeldung. Dabei kann es sich um jeden standardmäßigen CSS-Farbwert handeln.

  • border ist eine Zeichenfolge von 3 Werten für die Breite, Transparenz und Farbe des Rahmens angeben.

  • color ist die Textfarbe der Fehlermeldung. Dabei kann es sich um jeden standardmäßigen CSS-Farbwert handeln.

  • box-sizing wird verwendet, um dem Browser mitzuteilen, welche Größeneigenschaften (Breite und Höhe) verwendet werden sollen.

Identitätsanbieter-Schaltflächen

  • height ist die Höhe der Schaltfläche in Pixel (px).

  • width ist die Breite des Schaltflächentexts als Prozentwert des umschließenden Blocks.

  • text-align ist die Einstellung für die Textausrichtung. Sie kann left, right oder center sein.

  • margin-bottom ist die Einstellung für den unteren Rand.

  • color ist die Farbe der Schaltfläche. Dabei kann es sich um jeden standardmäßigen CSS-Farbwert handeln.

  • background-color ist die Hintergrundfarbe der Schaltfläche. Dabei kann es sich um jeden standardmäßigen CSS-Farbwert handeln.

  • border-color ist die Farbe des Schaltflächenrahmens. Dabei kann es sich um jeden standardmäßigen CSS-Farbwert handeln.

Identitätsanbieter-Beschreibung

  • padding-top ist der Abstand oberhalb der Beschreibung.

  • padding-bottom ist der Abstand unterhalb der Beschreibung.

  • display kann block oder inline sein.

  • font-size ist die Schriftgröße für Beschreibungen.

Rechtliche Hinweise

  • color ist die Textfarbe. Dabei kann es sich um jeden standardmäßigen CSS-Farbwert handeln.

  • font-size ist die Schriftgröße.

Anmerkung

Wenn Sie rechtliche Hinweise anpassen, passen Sie die Nachricht Wir werden auf keinem Ihrer Konten posten, ohne vorher zu fragen an, die auf der Anmeldeseite unter Social-Identity-Anbieter angezeigt wird.

Logo

  • max-width ist die maximale Breite als Prozentsatz des umschließenden Blocks.

  • max-height ist die maximale Höhe als Prozentsatz des umschließenden Blocks.

Eingabefeld-Fokus

  • border-color ist die Farbe des Eingabefelds. Dabei kann es sich um jeden standardmäßigen CSS-Farbwert handeln.

  • outline ist die Rahmenbreite des Eingabefeldes in Pixel (px).

Sozial-Schaltfläche

  • height ist die Höhe der Schaltfläche in Pixel (px).

  • text-align ist die Einstellung für die Textausrichtung. Sie kann left, right oder center sein.

  • width ist die Breite des Schaltflächentexts als Prozentwert des umschließenden Blocks.

  • margin-bottom ist die Einstellung für den unteren Rand.

Password-Prüfung gültig

  • color ist die Textfarbe der "Password check valid"-Meldung. Dabei kann es sich um jeden standardmäßigen CSS-Farbwert handeln.

Angabe von App-Anpassungseinstellungen für die Benutzeroberfläche eines Benutzerpools (AWS Management Console)

Sie können die AWS Management Console verwenden, um Anpassungen für die App-Benutzeroberflächen-Einstellungen für Ihre App anzugeben.

Anmerkung

Sie sehen die gehostete Benutzeroberfläche mit Ihren Anpassungen, indem Sie die folgende URL mit den spezifischen Angaben für Ihren Benutzerpool erstellen und in einen Browser eingeben: https://<your_domain>/login?response_type=code&client_id=<your_app_client_id>&redirect_uri=<your_callback_url> Möglicherweise müssen Sie bis zu einer Minute warten, um Ihren Browser zu aktualisieren, damit die auf der Konsole vorgenommenen Änderungen angezeigt werden.

Ihre Domäne wird auf der Registerkarte App integration (Anwendungsintegration) unter Domain (Domäne) angezeigt. Die App-Client-ID und die Rückruf-URL werden unter App clients (App-Clients) angezeigt.

So geben Sie die App-Anpassungseinstellungen für Ihre Benutzeroberfläche an

  1. Melden Sie sich bei der Amazon Cognito-Konsole an.

  2. Wählen Sie im Navigationsbereich User Pools (Benutzerpools) aus und anschließend den Benutzerpool, den Sie bearbeiten möchten.

  3. Wählen Sie die Registerkarte App integration (Anwendungsintegration) aus.

  4. Um die UI-Einstellungen für alle App-Clients anzupassen, suchen Sie nach Hosted UI customization (Anpassung der gehosteten Benutzeroberfläche) und wählen Edit (Bearbeiten) aus.

  5. Um die UI-Einstellungen für einen App-Client anzupassen, suchen Sie nach App-Clients, und wählen Sie den App-Client aus, den Sie ändern möchten. Suchen Sie dann nach Anpassung der gehosteten Benutzeroberfläche, und wählen Sie Bearbeiten aus. Um für einen App-Client von der Standardkonfiguration des Benutzerpools zur Client-spezifischen Anpassung zu wechseln, wählen Sie Use client-level settings (Client-Level-Einstellungen) aus.

  6. Um Ihre eigene Logo-Bilddatei hochzuladen, wählen Sie Choose file (Datei auswählen) oder Replace current file (Aktuelle Datei ersetzen) aus.

  7. Um das gehostete UI-CSS anzupassen, laden Sie CSS template.css herunter und ändern Sie die Vorlage mit den Werten, die Sie anpassen möchten. Nur die Schlüssel, die in der Vorlage enthalten sind, können mit der gehosteten Benutzeroberfläche verwendet werden. Hinzugefügte CSS-Schlüssel werden nicht in Ihrer Benutzeroberfläche wiedergegeben. Nachdem Sie die CSS-Datei angepasst haben, wählen Sie Choose file (Datei auswählen) oder Replace current file (Aktuelle Datei ersetzen), um Ihre benutzerdefinierte CSS-Datei hochzuladen.

Angeben von Anpassungseinstellungen für die App-Benutzeroberfläche eines Benutzerpools (AWS CLI- and AWS-API)

Verwenden Sie die folgenden Befehle für die Angabe von Einstellungen der Anpassung der App-Benutzeroberfläche für Ihren Benutzerpool.

Verwenden Sie die folgenden API-Operationen, um die Einstellungen für die Anpassung der Benutzeroberfläche für eine integrierte App-Benutzeroberfläche eines Benutzerpools abzurufen.
Verwenden Sie die folgenden API-Operationen, um die Einstellungen für die Anpassung der Benutzeroberfläche für eine integrierte App-Benutzeroberfläche eines Benutzerpools festzulegen.

  • AWS CLI von Bilddatei: aws cognito-idp set-ui-customization --user-pool-id <your-user-pool-id> --client-id <your-app-client-id> --image-file fileb://"<path-to-logo-image-file>" --css ".label-customizable{ color: <color>;}"

  • AWS CLI mit Bild, das als Base64-Binärtext codiert ist: aws cognito-idp set-ui-customization --user-pool-id <your-user-pool-id> --client-id <your-app-client-id> --image-file <base64-encoded-image-file> --css ".label-customizable{ color: <color>;}"

  • AWS-API: SetUICustomization