Personnalisation des pages web intégrées d'inscription et de connexion - Amazon Cognito

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.

Note

Pour utiliser cette fonction, votre groupe d'utilisateurs doit avoir un domaine qui y est associé.

La taille maximum autorisée pour le fichier d'une image de logo est de 100 Ko.

Spécifier des 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

    • inputField-customizable

    • inputField-customizable:focus

    • label-customizable

    • legalText-customizable

    • logo-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.

Original console
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 s'affiche dans l'onglet Nom de domaine. Votre ID de client d'application et URL de rappel s'affichent dans l'onglet Paramètres généraux.

Pour spécifier les paramètres de personnalisation de l'interface utilisateur de l'application

  1. Connectez-vous à la console Amazon Cognito. Si vous y êtes invité, saisissez vos informations d'identification AWS.

  2. Dans le volet de navigation, choisissez Gérer les groupes d'utilisateurs, puis choisissez le groupe d'utilisateurs que vous souhaitez modifier.

  3. Cliquez sur l'onglet UI customization (Personnalisation de l'interface utilisateur).

  4. Sous Client d'application à personnaliser, choisissez l'application que vous souhaiter personnaliser depuis le menu déroulant des clients d'application précédemment créé dans l'onglet Clients d'application.

  5. Pour charger votre propre fichier logo, choisissez Choose a file (Choisir un fichier) ou faites glisser un fichier dans la zone Logo (facultatif).

  6. Sous Personnalisations CSS (facultatif), vous pouvez customiser l'apparence d'une application en modifiant les propriétés depuis ses valeurs par défaut.

New console
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. Cliquez sur l'onglet 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, recherchez Clients d'application et sélectionnez le client d'application que vous souhaitez modifier, puis localisez Personnalisation de l'interface utilisateur hébergéeet 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 CSS d'interface utilisateur hébergée, téléchargez CSS modèle.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 pour l'IU d'application intégrée d'un groupe d'utilisateurs

Pour définir les paramètres de personnalisation de l'IU pour l'IU d'application intégrée d'un groupe d'utilisateurs

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

  • API AWS : SetUICustomization