Personnalisation des pages web intégrées d'inscription et de connexion - Amazon Cognito
Spécification d'un logo personnalisé pour l'applicationSpécification de personnalisations CSS pour l'applicationSpécification des paramètres de personnalisation de l'interface utilisateur de l'application pour un groupe d'utilisateurs (AWS Management Console)Spécification des paramètres de personnalisation de l'interface utilisateur de l'application pour un groupe d'utilisateurs (AWS CLI et API AWS)

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 des pages web intégrées d'inscription et de connexion

Vous pouvez utiliser AWS Management Console, l'AWS CLI ou l'API pour spécifier les paramètres de personnalisation pour l'expérience de l'interface utilisateur intégrée à l'application. Vous pouvez télécharger une image de logo personnalisé à afficher dans l'application. Vous pouvez également utiliser des feuilles de style en cascade (CSS) pour personnaliser l'apparence de l'interface utilisateur.

Vous pouvez spécifier les paramètres de personnalisation de l'IU de l'application pour un seul client (avec un clientId spécifique) ou pour tous les clients (en définissant les clientId sur ALL). Si vous spécifiez ALL, la configuration par défaut sera utilisée pour chaque client qui n'ayant aucune personnalisation d'IU définie au préalable. Si vous spécifiez des paramètres de personnalisation d'IU pour un client en particulier, il ne reviendra plus à la configuration ALL.

La taille de la demande qui définit votre personnalisation d'IU 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 volumineuse, la AWS Management Console ou votre demande d'API SetUICustomization renvoient une erreur request parameters too large. 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.

Amazon Cognito centre votre logo personnalisé au-dessus des champs de saisie du Point de terminaison de connexion.

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 élément ImageFile dans SetUICustomization, dans l'API, convertissez votre fichier en chaîne de texte codée en Base64 ou, dans l'interface AWS CLI, fournissez un chemin de fichier et laissez Amazon Cognito le coder à votre place.

Spécification de personnalisations CSS pour l'application

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.

Etiquettes

  • épaisseur de police est un multiple de 100, de 100 à 900.

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.

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.

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.

Note

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.

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.

Spécification des paramètres de personnalisation de l'interface utilisateur de l'application pour un groupe d'utilisateurs (AWS Management Console)

Vous pouvez utiliser AWS Management Console pour spécifier les paramètres de personnalisation de l'IU pour 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://<your_domain>/login?response_type=code&client_id=<your_app_client_id>&redirect_uri=<your_callback_url> 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.

  2. Dans le volet de navigation, choisissez Groupe d'utilisateurs, puis choisissez le groupe d'utilisateurs que vous souhaitez modifier.

  3. Choisissez l'onglet App integration (Intégration d'applications).

  4. Pour personnaliser les paramètres de l'interface utilisateur de tous les clients d'applications, recherchez Personnalisation de l'interface utilisateur hébergée et sélectionnez Modifier.

  5. Pour personnaliser les paramètres de l'interface utilisateur d'un client d'application, localisez Clients d'application et sélectionnez le client d'application que vous souhaitez modifier, puis localisez Personnalisation de l'interface utilisateur hébergée et sélectionnez Modifier. Pour passer d'un client d'application de la personnalisation par défaut du groupe d'utilisateurs à la personnalisation spécifique au client, sélectionnez Utiliser les paramètres au niveau du client.

  6. Pour télécharger votre propre fichier image logo, choisissez Choisir un fichier ou Remplacer le fichier actuel.

  7. 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é.

Spécification des paramètres de personnalisation de l'interface utilisateur de l'application pour un groupe d'utilisateurs (AWS CLI et API AWS)

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.
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 à partir du fichier image : 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 avec l'image codée sous forme de texte binaire Base64 : 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