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 des Brandings für gehostete Benutzeroberflächen (klassisch) Sie können die AWS-Managementkonsole API oder oder verwenden, um klassische Anpassungseinstellungen für die gehostete Benutzeroberfläche anzugeben. AWS CLI Sie können ein benutzerdefiniertes Logo-Image hochladen, das Sie in der App anzeigen möchten. Sie können auch einige Cascading Style Sheets (CSS) -Optionen auf das Erscheinungsbild der Benutzeroberfläche anwenden. Sie können die Standardeinstellungen der Benutzeroberfläche anpassen und einzelne [App-Clients](cognito-terms.md#term-appclient) mit bestimmten Einstellungen überschreiben. Amazon Cognito wendet die Standardkonfiguration auf jeden App-Client an, der keine Einstellungen auf Client-Ebene hat. In der Amazon Cognito Cognito-Konsole und in API-Anfragen darf die Anfrage, die Ihre UI-Anpassung festlegt, 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 Anfrage zu groß ist, gibt die AWS-Managementkonsole oder Ihre `SetUICustomization` API-Anfrage einen `request parameters too large` Fehler 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. ## Spezifizierung eines benutzerdefinierten Logos im klassischen Branding Amazon Cognito zentriert Ihr benutzerdefiniertes Logo über den Eingabefeldern auf dem [Login-Endpunkt](login-endpoint.md). 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 ein `ImageFile` [https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_SetUICustomization.html](https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_SetUICustomization.html)in der API festzulegen, konvertieren Sie Ihre Datei in eine Base64-kodierte Textzeichenfolge oder geben Sie in der AWS CLI einen Dateipfad an und lassen Sie Amazon Cognito ihn für Sie kodieren. ## Spezifizierung von CSS-Anpassungen im klassischen Branding 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. + **color** ist die Textfarbe. Muss ein [zulässiger CSS-Farbwert](https://www.w3schools.com/cssref/css_colors_legal.php) sein. **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. + **color** ist die Textfarbe. Muss ein [zulässiger CSS-Farbwert](https://www.w3schools.com/cssref/css_colors_legal.php) sein. **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. + **Farbe** ist die Textfarbe für IdP-Abschnittsüberschriften, zum Beispiel **Melden Sie sich mit Ihrer Unternehmens-ID an**. Muss ein [zulässiger CSS-Farbwert](https://www.w3schools.com/cssref/css_colors_legal.php) sein. **Rechtliche Hinweise** + **color** ist die Textfarbe. Dabei kann es sich um jeden standardmäßigen CSS-Farbwert handeln. + **font-size** ist die Schriftgröße. 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. + **background-color** ist die Hintergrundfarbe für Protokolle mit transparenten Abschnitten. Muss ein [zulässiger CSS-Farbwert](https://www.w3schools.com/cssref/css_colors_legal.php) sein. **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. ## Anpassen der gehosteten Benutzeroberfläche mit klassischem Branding in AWS-Managementkonsole Sie können das verwenden AWS-Managementkonsole , um die Einstellungen für die Anpassung der Benutzeroberfläche für Ihre App festzulegen. **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:///login?response_type=code&client_id=&redirect_uri=` 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](https://console.aws.amazon.com/cognito/home) an. 1. Wählen Sie im Navigationsbereich **User Pools** (Benutzerpools) aus und anschließend den Benutzerpool, den Sie bearbeiten möchten. 1. [Erstellen Sie über den Domain-Tab eine](cognito-user-pools-assign-domain.md) **Domain** oder aktualisieren Sie Ihre bestehende Domain. Stellen Sie unter **Branding-Version** Ihre Domain so ein, dass sie **Hosted UI (klassisch)** verwendet. 1. Wählen Sie das Menü **Verwaltete Anmeldung**. 1. Um die UI-Einstellungen für alle App-Clients anzupassen, suchen Sie **Style** unter **Einstellungen für gehostete Benutzeroberflächen** und wählen Sie **Bearbeiten** aus. 1. Um die UI-Einstellungen für einen App-Client anzupassen, rufen Sie das Menü **App-Clients** auf und wählen Sie den App-Client aus, den Sie ändern möchten. Suchen Sie dann nach dem **Stil der gehosteten Benutzeroberfläche (klassisch)** und wählen Sie **Überschreiben** aus. Wählen Sie **Bearbeiten** aus. 1. Um Ihre eigene Logo-Bilddatei hochzuladen, wählen Sie **Choose file** (Datei auswählen) oder **Replace current file** (Aktuelle Datei ersetzen) aus. 1. 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. ## Anpassen der gehosteten Benutzeroberfläche mit klassischem Branding in der Benutzerpools-API und mit AWS CLI 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.** + AWS CLI: `aws cognito-idp get-ui-customization` + AWS API: [https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_GetUICustomization.html](https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_GetUICustomization.html) **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 aus der Bilddatei: `aws cognito-idp set-ui-customization --user-pool-id --client-id --image-file fileb://"" --css ".label-customizable{ color: ;}"` + AWS CLI mit einem Bild, das als Base64-Binärtext codiert ist: `aws cognito-idp set-ui-customization --user-pool-id --client-id --image-file --css ".label-customizable{ color: ;}"` + AWS API: [https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_SetUICustomization.html](https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_SetUICustomization.html)