Les traductions sont fournies par des outils de traduction automatique. En cas de conflit entre le contenu d'une traduction et celui de la version originale en anglais, la version anglaise prévaudra. # Personnalisation de l'image de marque (classique) de l'interface utilisateur hébergée Vous pouvez utiliser l' AWS Management Console API ou ou pour définir les AWS CLI paramètres de personnalisation classiques de l'interface utilisateur hébergée. Vous pouvez télécharger une image de logo personnalisé à afficher dans l'application. Vous pouvez également appliquer certaines options de feuilles de style en cascade (CSS) à l'apparence de l'interface utilisateur. Vous pouvez personnaliser les paramètres par défaut de l'interface utilisateur et remplacer les [clients d'applications](cognito-terms.md#term-appclient) individuels par des paramètres spécifiques. Amazon Cognito applique la configuration par défaut à chaque client d'application qui ne possède pas de paramètres au niveau du client. Dans la console Amazon Cognito et dans les demandes d'API, la demande qui définit la personnalisation de votre interface utilisateur ne doit pas dépasser 135 Ko. Dans de rares cas, la somme des en-têtes de la demande, de votre fichier CSS et de votre logo peut dépasser 135 Ko. Amazon Cognito code le fichier image en Base64. Cela augmente la taille d'une image de 100 Ko à 130 Ko, ce qui laisse 5 Ko pour les en-têtes de demande et votre fichier CSS. Si la demande est trop importante, la AWS Management Console ou votre demande `SetUICustomization` d'API renvoie une `request parameters too large` erreur. Faites en sorte que l'image de votre logo ne dépasse pas 100 Ko et que votre fichier CSS ne dépasse pas 3 Ko. Vous ne pouvez pas définir la personnalisation du CSS et du logo séparément. **Note** Pour personnaliser votre IU, vous devez configurer un domaine pour votre groupe d'utilisateurs. ## Spécification d'un logo personnalisé dans le cadre d'une stratégie de marque classique Amazon Cognito centre votre logo personnalisé au-dessus des champs de saisie du [Point de terminaison de connexion](login-endpoint.md). Choisissez un fichier PNG, JPG ou JPEG qui puisse être redimensionné à 350 x 178 pixels pour le logo personnalisé de votre interface utilisateur hébergée. La taille de votre fichier de logo ne doit pas dépasser 100 Ko, ou 130 Ko une fois qu'Amazon Cognito l'a codé au format Base64. Pour définir un `ImageFile` in [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)dans l'API, convertissez votre fichier en une chaîne de texte codée en Base64 ou, dans le AWS CLI, indiquez un chemin de fichier et laissez Amazon Cognito l'encoder pour vous. ## Spécifier les personnalisations CSS dans le cadre d'une stratégie de marque classique Vous pouvez personnaliser le CSS pour les pages d'application hébergée, avec les restrictions suivantes : + Vous pouvez utiliser l'un des noms de classe CSS suivants : + `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` + Les valeurs de propriétés peuvent contenir du code HTML, à l'exception des valeurs suivantes : `@import`,`@supports`,`@page`, ou `@media` ou Javascript. Vous pouvez personnaliser les propriétés CSS suivantes. **Étiquettes** + **épaisseur de police** est un multiple de 100, de 100 à 900. + **couleur** est la couleur du texte. Il doit s'agir d'une [valeur de couleur CSS légale](https://www.w3schools.com/cssref/css_colors_legal.php). **Champs de saisie** + **largeur** représente la largeur du bloc contenant en pourcentage. + **hauteur** est la hauteur du champ d'entrée en pixels (px). + **couleur** est la couleur du texte. Il peut s'agir de toute valeur de couleur CSS standard. + **couleur d'arrière-plan** est la couleur d'arrière-plan du champ d'entrée. Il peut s'agir de toute valeur de couleur CSS standard. + **bordure** est une valeur de bordure CSS standard qui spécifie la largeur, la transparence et la couleur de la bordure de la fenêtre de votre application. La valeur de la largeur peut être comprise entre 1px et 100px. La transparence peut être solide ou inexistante. La couleur peut être toute valeur de couleur standard. **Descriptions texte** + **marge supérieure** est la quantité de remplissage au-dessus de la description du texte. + **marge inférieure** est la quantité de remplissage au-dessous de la description du texte. + **affichage** peut être `block` ou `inline`. + **taille de police** est la taille de la police pour les descriptions de texte. + **couleur** est la couleur du texte. Il doit s'agir d'une [valeur de couleur CSS légale](https://www.w3schools.com/cssref/css_colors_legal.php). **Bouton de soumission** + **taille de police** est la taille de la police pour le texte du bouton. + **épaisseur de la police** est l'épaisseur de la police du texte du bouton : `bold`, `italic` ou `normal`. + **marge** est une chaîne de 4 valeurs indiquant la taille des marges en haut, à droite, en bas et à gauche pour le bouton. + **taille de police** est la taille de la police pour les descriptions de texte. + **largeur** est la largeur du bouton en pourcentage du texte du bloc contenant. + **hauteur** est la hauteur du bouton en pixels (px). + **couleur** est la couleur du texte du bouton. Il peut s'agir de toute valeur de couleur CSS standard. + **couleur d'arrière-plan** est la couleur d'arrière-plan du bouton. Il peut s'agir de toute valeur de couleur standard. **Bannière** + **remplissage** est une chaîne de 4 valeurs indiquant la taille du remplissage en haut, à droite, en bas et à gauche pour la bannière. + **couleur d'arrière-plan** est la couleur d'arrière-plan de la bannière. Il peut s'agir de toute valeur de couleur CSS standard. **Info-bulle de bouton de soumission** + **couleur** est la couleur de premier plan du bouton lorsque vous le survolez. Il peut s'agir de toute valeur de couleur CSS standard. + **couleur d'arrière-plan** est la couleur d'arrière-plan du bouton lorsque vous le survolez. Il peut s'agir de toute valeur de couleur CSS standard. **Info-bulle de bouton de fournisseur d'identité** + **couleur** est la couleur de premier plan du bouton lorsque vous le survolez. Il peut s'agir de toute valeur de couleur CSS standard. + **couleur d'arrière-plan** est la couleur d'arrière-plan du bouton lorsque vous le survolez. Il peut s'agir de toute valeur de couleur CSS standard. **Vérification de mot de passe non valide** + **couleur** est la couleur du texte du message `"Password check not valid"`. Il peut s'agir de toute valeur de couleur CSS standard. **Contexte** + **couleur d'arrière-plan** est la couleur d'arrière-plan de la fenêtre de l'application. Il peut s'agir de toute valeur de couleur CSS standard. **Messages d'erreur** + **marge** est une chaîne de 4 valeurs indiquant la taille des marges en haut, à droite, en bas et à gauche. + **remplissage** est la taille de remplissage. + **taille de police** est la taille de la police. + **largeur** est la largeur du message d'erreur sous forme de pourcentage du bloc contenant. + **arrière-plan** est la couleur d'arrière-plan du message d'erreur. Il peut s'agir de toute valeur de couleur CSS standard. + **bordure** est une chaîne de 3 valeurs spécifiant la largeur, la transparence et la couleur de la bordure. + **couleur** est la couleur du texte du message. Il peut s'agir de toute valeur de couleur CSS standard. + **Dimension de la boîte** est utilisé pour indiquer au navigateur les propriétés de dimensions (largeur et hauteur). **Boutons de fournisseur d'identité** + **hauteur** est la hauteur du bouton en pixels (px). + **largeur** est la largeur du texte du bouton sous forme de pourcentage du bloc contenant. + **alignement du texte** est le paramètre d'alignement du texte. Il peut être `left`, `right` ou `center`. + **marge inférieure** est le paramètre de la marge inférieure. + **couleur** est la couleur du texte du bouton. Il peut s'agir de toute valeur de couleur CSS standard. + **couleur d'arrière-plan** est la couleur d'arrière-plan du bouton. Il peut s'agir de toute valeur de couleur CSS standard. + **couleur de bordure** est la couleur de la bordure du bouton. Il peut s'agir de toute valeur de couleur CSS standard. **Descriptions de fournisseur d'identité** + **marge supérieure** est la quantité de remplissage au-dessus de la description. + **marge inférieure** est la quantité de remplissage au-dessous de la description. + **affichage** peut être `block` ou `inline`. + **taille de police** est la taille de la police pour les descriptions. + **color** est la couleur du texte pour les en-têtes des sections IdP, par exemple, **connectez-vous avec votre** identifiant d'entreprise. Il doit s'agir d'une [valeur de couleur CSS légale](https://www.w3schools.com/cssref/css_colors_legal.php). **Texte légal** + **couleur** est la couleur du texte. Il peut s'agir de toute valeur de couleur CSS standard. + **taille de police** est la taille de la police. Lorsque vous personnalisez le **Texte juridique**, vous personnalisez la messagerie. **Nous ne publierons aucun de vos comptes sans demander au préalable** ce qui s'affiche sous les fournisseurs d'identité sociale sur la page de connexion. **Logo** + **largeur max** est la largeur maximum sous forme de pourcentage du bloc contenant. + **hauteur max** est la hauteur maximum sous forme de pourcentage du bloc contenant. + **la** couleur d'arrière-plan est la couleur de fond des bûches dont les sections sont transparentes. Il doit s'agir d'une [valeur de couleur CSS légale](https://www.w3schools.com/cssref/css_colors_legal.php). **Focus sur le champ de saisie** + **couleur de bordure** est la couleur du champ de saisie. Il peut s'agir de toute valeur de couleur CSS standard. + **contour** est la largeur de la bordure du champ de saisie en pixels (px). **Bouton de réseaux sociaux** + **hauteur** est la hauteur du bouton en pixels (px). + **alignement du texte** est le paramètre d'alignement du texte. Il peut être `left`, `right` ou `center`. + **largeur** est la largeur du texte du bouton sous forme de pourcentage du bloc contenant. + **marge inférieure** est le paramètre de la marge inférieure. **Vérification de mot de passe valide** + **couleur** est la couleur du texte du message `"Password check valid"`. Il peut s'agir de toute valeur de couleur CSS standard. ## Personnalisation de l'interface utilisateur hébergée avec une image de marque classique dans AWS Management Console Vous pouvez utiliser le AWS Management Console pour définir les paramètres de personnalisation de l'interface utilisateur de votre application. **Note** Vous pouvez afficher l'IU hébergée avec vos personnalisations en construisant l'URL suivante avec les spécificités de votre groupe d'utilisateurs, puis en la tapant dans votre navigateur : ` https:///login?response_type=code&client_id=&redirect_uri=` Une minute d'attente sera probablement nécessaire pour actualiser votre navigateur avant que les modifications appliquées à votre console n'apparaissent. Votre domaine est affiché sur le site **Intégration d'applications** onglet sous **Domaine**. Votre ID de client d'application et votre URL de rappel s'affichent dans l'onglet **Clients d'application**. **Pour spécifier les paramètres de personnalisation de l'interface utilisateur de l'application** 1. Connectez-vous à la [console Amazon Cognito](https://console.aws.amazon.com/cognito/home). 1. Dans le volet de navigation, choisissez **Groupes d'utilisateurs**, puis choisissez le groupe d'utilisateurs que vous souhaitez modifier. 1. [Créez un domaine](cognito-user-pools-assign-domain.md) depuis l'onglet **Domaine** ou mettez à jour votre domaine existant. Sous **Version de marque**, configurez votre domaine pour qu'il utilise l'**interface utilisateur hébergée (classique)**. 1. Choisissez le menu **Connexion gérée**. 1. Pour personnaliser les paramètres de l'interface utilisateur pour tous les clients de l'application, recherchez **Style** sous **Paramètres de l'interface utilisateur hébergée** et sélectionnez **Modifier**. 1. Pour personnaliser les paramètres de l'interface utilisateur pour un client d'application, accédez au menu **Clients de l'application** et sélectionnez le client d'application que vous souhaitez modifier, puis recherchez le **style d'interface utilisateur hébergée (classique)** et sélectionnez **Remplacer**. Tâche de sélection **Modifier**. 1. Pour télécharger votre propre fichier image de logo, choisissez **Choisir un fichier** ou **Remplacer le fichier actuel**. 1. Pour personnaliser le fichier CSS d'interface utilisateur hébergée, téléchargez **CSS template.css** et modifiez le modèle avec les valeurs que vous souhaitez personnaliser. Seules les clés incluses dans le modèle peuvent être utilisées avec l'interface utilisateur hébergée. Les clés CSS ajoutées ne seront pas reflétées dans votre interface utilisateur. Après avoir personnalisé le fichier CSS, choisissez **Choisir un fichier** ou **Remplacer le fichier actuel** pour télécharger votre fichier CSS personnalisé. ## Personnalisation de l'interface utilisateur hébergée avec une image de marque classique dans l'API des groupes d'utilisateurs et avec AWS CLI Utilisez les commandes suivantes pour spécifier les paramètres de personnalisation de l'IU pour votre groupe d'utilisateurs. **Pour obtenir les paramètres de personnalisation de l'IU de l'application intégrée d'un groupe d'utilisateurs, utilisez les opérations d'API suivantes.** + 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) **Pour définir les paramètres de personnalisation de l'IU de l'application intégrée d'un groupe d'utilisateurs, utilisez les opérations d'API suivantes.** + AWS CLI depuis un fichier image : `aws cognito-idp set-ui-customization --user-pool-id --client-id --image-file fileb://"" --css ".label-customizable{ color: ;}"` + AWS CLI avec image codée sous forme de texte binaire Base64 : `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)