Personnalisation de l'interface utilisateur de l'application intégrée pour inscrire et connecter des utilisateurs - Amazon Cognito

Personnalisation de l'interface utilisateur de l'application intégrée pour inscrire et connecter des utilisateurs

Original console
Note

L'onglet Personnalisation de l'interface utilisateur s'affiche uniquement lorsque vous modifiez un groupe d'utilisateurs existant.

Dans l'onglet UI customization (Personnalisation de l'interface utilisateur), vous pouvez ajouter vos propres personnalisations à l'interface utilisateur par défaut de l'application. Pour obtenir des informations détaillées sur chacun des champs personnalisés, consultez Personnalisation des pages web intégrées d'inscription et de connexion.

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 saisissant 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 personnaliser l'IU de l'application intégrée

  1. Sous Client d'application à personnaliser, choisissez les clients d'application précédemment créés dans le menu déroulant.

  2. Pour ajouter un logo à l'interface utilisateur par défaut de l'application, choisissez Choose a file (Choisir un fichier) ou faites glisser un fichier dans la zone Logo.

  3. Sous CSS customizations (optional) (Personnalisations CSS (facultatif)), vous pouvez personnaliser l'apparence de l'application en affectant aux propriétés CSS de l'interface utilisateur des valeurs autres que les valeurs par défaut.

  4. Choisissez Enregistrer les modifications.

New console

Avec Personnalisation de l'interface utilisateur dans l'onglet Intégration d'application, vous pouvez ajouter vos propres personnalisations à l'interface utilisateur par défaut de l'application.

Vous pouvez également personnaliser l'interface hébergée pour un client d'application. Choisissez le client d'application dans l'onglet tab and locate (Intégration d'application) et localisez Hosted UI customization (Personnalisation de l'interface hébergée). Choisissez Utiliser les paramètres au niveau du client pour accéder à l'écran de personnalisation de l'interface utilisateur pour ce client d'application uniquement.

Pour obtenir des informations détaillées sur chacun des champs personnalisés, consultez Personnalisation des pages web intégrées d'inscription et de connexion.

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.

Vous pouvez également lancer l'interface utilisateur hébergée pour un client d'application sur lequel elle est activée. Choisissez le client de l'application dans l'onglet App integration (Intégration d'application) et localisez Hosted UI settings (Paramètres d'interface hébergée). Choisissez Afficher l'interface hébergée.

Pour personnaliser l'IU de l'application intégrée

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

  2. Pour personnaliser le CSS pour l'interface 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. Une fois que vous avez personnalisé le CSS, choisissez Choisir un fichier ou Remplacer le fichier actuel pour télécharger votre CSS personnalisé.

  3. Choisissez Enregistrer les modifications.