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 dans Amazon WorkSpaces Secure Browser Vous pouvez personnaliser les écrans de connexion et de chargement qui apparaissent à vos utilisateurs finaux en modifiant les éléments visuels, le contenu textuel et les conditions d'utilisation. La personnalisation de l'image de marque permet de créer une expérience cohérente qui correspond à l'identité de votre organisation. **Présentation** La personnalisation de l'image de marque vous permet de personnaliser les aspects suivants de l'expérience utilisateur : + **Éléments visuels** : importez le logo, le favicon et le fond d'écran, puis sélectionnez des thèmes de couleurs correspondant à l'identité de votre marque. + **Contenu textuel** : personnalisez les messages de bienvenue, le titre de l'onglet du navigateur et les autres champs de texte facultatifs pour conserver la voix de votre marque tout au long du processus de connexion. Si vous ne spécifiez pas de texte personnalisé pour certains champs, le texte par défaut sera utilisé. Pour en savoir plus, consultez [Directives de personnalisation](customization-guideline.md). + **Conditions d'utilisation (facultatif)** - Ajoutez les conditions d'utilisation de votre organisation que les utilisateurs doivent accepter avant de démarrer une session. **Note** Vous pouvez également personnaliser le nom de domaine de votre portail. Pour en savoir plus, consultez [Configuration d'un domaine personnalisé pour votre portail](custom-domains.md). **Topics** + [Configuration de la personnalisation de l'image de marque pour votre portail](configure-branding-customization.md) + [Directives de personnalisation](customization-guideline.md) # Configuration de la personnalisation de l'image de marque pour votre portail ## Comment ça marche Lorsque vous configurez la personnalisation de l'image de marque : + Les éléments visuels et textuels sont appliqués à la fois à l'écran de connexion et à l'écran de chargement. + L'onglet du navigateur affiche votre favicon et votre titre personnalisés. + Les utilisateurs finaux verront vos modifications de personnalisation lorsqu'ils démarreront une nouvelle session. Dans certains cas, quelques minutes peuvent s'écouler avant que vos modifications ne soient visibles. + Si les conditions d'utilisation sont configurées, les utilisateurs finaux doivent accepter les vôtres avant de démarrer leur session de streaming. Notez qu'ils seront demandés au début de chaque session. ## Conditions préalables Avant de commencer : + Assurez-vous de disposer des autorisations nécessaires pour modifier les paramètres du portail, voir[AWS politiques gérées pour WorkSpaces Secure Browser](security-iam-awsmanpol.md). + Préparez vos actifs de marque (logo, favicon, fond d'écran) conformément aux spécifications indiquées dans[Directives de personnalisation](customization-guideline.md). ## Prise en main Pour configurer la personnalisation de la marque, procédez comme suit. 1. Ouvrez la console WorkSpaces Secure Browser à l'adresse[https://console.aws.amazon.com/workspaces-web/home?region=us-east-1#/](https://console.aws.amazon.com/workspaces-web/home?region=us-east-1#/). 1. Choisissez **WorkSpaces Secure Browser**, **Portails Web**, puis choisissez votre portail Web. 1. Sélectionnez votre portail et cliquez sur l'onglet **Paramètres utilisateur**. 1. Dans la section **Personnalisation de l'image de marque**, choisissez **Modifier**. 1. Configurez les sections suivantes selon vos besoins : + Dans l'**éditeur de contenu** : téléchargez tous les éléments visuels (le logo de votre entreprise, votre favicon et un fond d'écran optionnel) et sélectionnez le thème de couleur. Vous pouvez télécharger les fichiers depuis votre ordinateur local ou depuis un compartiment S3. Pour plus d'informations sur la configuration des autorisations du compartiment S3, consultez[Configuration des autorisations du compartiment S3](#branding-s3-permissions). + Dans l'**éditeur de texte** : personnalisez le texte qui apparaît sur l'écran de connexion. + Dans l'**éditeur des conditions d'utilisation**, ajoutez éventuellement des termes que les utilisateurs doivent accepter. 1. Sélectionnez **Enregistrer les modifications**. Pour obtenir des instructions détaillées sur chaque option de personnalisation, consultez[Directives de personnalisation](customization-guideline.md). ## Configuration des autorisations du compartiment S3 Vous pouvez télécharger des fichiers de marque directement depuis votre ordinateur ou sélectionner des objets existants dans vos compartiments S3. Si vous choisissez de télécharger les fichiers des éléments visuels (le logo de votre entreprise, votre favicon et un fond d'écran) à partir d'un compartiment S3, assurez-vous de configurer les autorisations appropriées pour le compartiment S3. **Sélection d'objets S3 dans le même compte** Si votre utilisateur ou votre rôle IAM possède déjà `s3:GetObject` l'autorisation d'accéder au compartiment contenant vos actifs de marque, aucune configuration supplémentaire n'est requise. **Sélection d'objets S3 dans un autre compte** Pour sélectionner un compartiment S3 dans un autre AWS compte, vous devez configurer à la fois la politique de compartiment dans le compte source et la politique IAM dans votre compte administrateur. **Exemple de politique de compartiment (dans le compte source) :** Appliquez cette politique au compartiment S3 du compte source. *123456789012*Remplacez-le par votre identifiant de compte administrateur et *source-account-bucket-name* par le nom réel de votre bucket. ``` { "Version": "2012-10-17", "Statement": [ { "Sid": "AllowCrossAccountAccess", "Effect": "Allow", "Principal": { "AWS": "arn:aws:iam::123456789012:root" }, "Action": [ "s3:GetObject" ], "Resource": [ "arn:aws:s3:::source-account-bucket-name", "arn:aws:s3:::source-account-bucket-name/*" ] } ] } ``` **Exemple de politique IAM (dans votre compte administrateur) :** Associez cette politique à l'utilisateur ou au rôle IAM dans votre compte d'administrateur. *source-account-bucket-name*Remplacez-le par le nom réel du compartiment indiqué dans le compte source. ``` { "Version": "2012-10-17", "Statement": [ { "Sid": "AllowCrossAccountS3Access", "Effect": "Allow", "Action": [ "s3:GetObject" ], "Resource": [ "arn:aws:s3:::source-account-bucket-name", "arn:aws:s3:::source-account-bucket-name/*" ] } ] } ``` Pour des informations détaillées sur l'accès entre comptes, voir [S3 Access accorde un accès entre comptes](https://docs.aws.amazon.com/AmazonS3/latest/userguide/access-grants-cross-accounts.html). # Directives de personnalisation Personnalisez l'expérience de connexion et de chargement pour vos utilisateurs finaux en mettant à jour les éléments de marque et le texte sur les pages de connexion et de chargement. Vous pouvez modifier les éléments visuels tels que les logos et les fonds d'écran, modifier des éléments de texte tels que les messages de bienvenue et les en-têtes, et éventuellement configurer un accord de conditions d'utilisation que les utilisateurs doivent accepter avant de démarrer leur session. ![\[alt text not found\]](http://docs.aws.amazon.com/fr_fr/workspaces-web/latest/adminguide/images/branding/customization-main.png) ## Éditeur de contenu ### Logo de l'entreprise Le logo apparaît sur l’écran de connexion et sur l’écran de chargement, offrant une marque cohérente tout au long de l’expérience utilisateur. ![\[alt text not found\]](http://docs.aws.amazon.com/fr_fr/workspaces-web/latest/adminguide/images/branding/logo.png) + Formats pris en charge : JPG ou ICO ou PNG + Taille maximale du fichier : 100 Ko **Faire** ![\[alt text not found\]](http://docs.aws.amazon.com/fr_fr/workspaces-web/latest/adminguide/images/branding/logo-do.png) + Si vous avez différentes variantes de logo (telles que des couleurs ou des styles différents), choisissez celui qui offre le meilleur contraste avec le fond d'écran que vous avez sélectionné. **Ne** ![\[alt text not found\]](http://docs.aws.amazon.com/fr_fr/workspaces-web/latest/adminguide/images/branding/logo-dont.png) + N'ignorez pas les proportions lorsque vous redimensionnez votre logo. + N'utilisez pas de logos mal dimensionnés au préalable car ils peuvent sembler déformés. ### Favicon Un favicon est une petite icône qui apparaît dans les onglets du navigateur pour aider les utilisateurs à identifier votre application parmi plusieurs onglets ouverts. ![\[alt text not found\]](http://docs.aws.amazon.com/fr_fr/workspaces-web/latest/adminguide/images/branding/favicon.png) + Formats pris en charge : JPG ou ICO ou PNG + Taille maximale du fichier : 100 Ko + Rapport hauteur/largeur recommandé : 1:1 ### Papier peint - facultatif Le fond d’écran sert d’image de fond sur tous les écrans, créant ainsi une expérience visuelle cohérente. Si vous ne téléchargez pas de fond d'écran personnalisé, le fond d'écran par défaut illustré ci-dessous sera utilisé. Choisissez une image qui complète votre marque sans nuire à la lisibilité du contenu. ![\[alt text not found\]](http://docs.aws.amazon.com/fr_fr/workspaces-web/latest/adminguide/images/branding/wallpaper.png) + Formats pris en charge : JPG ou PNG + Taille de fichier maximale : 5 Mo + Rapport hauteur/largeur recommandé : 16:9 + Résolution minimale recommandée : 1920 x 1080 **Faire** ![\[alt text not found\]](http://docs.aws.amazon.com/fr_fr/workspaces-web/latest/adminguide/images/branding/wallpaper-do.png) + Utilisez des fonds d'écran subtils à faible contraste ou des images floues qui n'interfèrent pas avec le contenu du premier plan. + Envisagez un positionnement prédéfini du texte pour éviter les zones encombrées derrière le texte. + Utilisez les couleurs de la marque et utilisez des superpositions pour créer un meilleur contraste et une meilleure lisibilité. **Ne** ![\[alt text not found\]](http://docs.aws.amazon.com/fr_fr/workspaces-web/latest/adminguide/images/branding/wallpaper-dont.png) + N'utilisez pas d'images surchargées, saturées ou très détaillées juste derrière un texte important. + N'utilisez pas d'images visuellement complexes ou d'images présentant des transitions nettes qui limiteraient la lisibilité avec des emplacements de texte prédéfinis. + Ne vous fiez pas uniquement à la couleur pour séparer le texte de l'arrière-plan sans un contraste suffisant. ### Thème de couleurs Choisissez entre des thèmes clairs ou foncés qui reflètent les polices, les boutons et les modaux. + Thème clair : idéal pour les arrière-plans sombres, offrant un contraste clair et réduisant la fatigue oculaire lorsque vous travaillez dans des environnements peu éclairés. + Thème foncé : idéal pour les arrière-plans clairs, offrant un affichage confortable et un éblouissement réduit dans les environnements lumineux. **Faire** ![\[alt text not found\]](http://docs.aws.amazon.com/fr_fr/workspaces-web/latest/adminguide/images/branding/theme-do.png) + Garantissez un fort contraste avec les éléments d'arrière/le papier peint. + Utilisez un thème de couleur foncée sur des arrière-plans clairs. + Utilisez un thème de couleur claire sur des arrière-plans sombres. **Ne** ![\[alt text not found\]](http://docs.aws.amazon.com/fr_fr/workspaces-web/latest/adminguide/images/branding/theme-dont.png) + Ne placez pas de polices claires ou foncées sur des images ou des fonds d'écran complexes. ## Éditeur de texte L’éditeur de texte vous permet de personnaliser le texte qui apparaît sur l’écran de connexion de vos utilisateurs finaux. Pour activer la personnalisation de la marque, vous devez ajouter au moins une langue. **Pour les nouveaux utilisateurs :** nous détectons la langue préférée de votre navigateur et affichons la page du portail dans cette langue si vous l’avez configurée dans les langues de votre marque. Si la langue de votre navigateur n’est pas dans les langues que vous avez configurées, nous utilisons par défaut l’anglais (en-US) si disponible. Si vous n’avez pas configuré l’anglais, nous utilisons la première langue dans l’ordre alphabétique des langues que vous avez configurées. **Pour les utilisateurs récurrents :** nous stockons les préférences linguistiques de votre session précédente dans un cookie de navigateur. Si cette langue figure dans les langues de marque que vous avez configurées, nous l’utilisons. Sinon, nous suivons la même logique de repli : anglais (en-US) si disponible, ou première langue configurée par ordre alphabétique. Les paramètres régionaux (codes de langue) suivants sont pris en charge : + Allemand (de-DE) + Anglais (en-US) + Espagnol (es-ES) + Français (fr-FR) + Indonésien (id-ID) + Italien (it-IT) + Japonais (ja-JP) + Coréen (ko-KR) + Portugais (pt-PT) + Chinois simplifié (zh-CN) + Chinois traditionnel (zh-TW) Pour des raisons de sécurité, les caractères suivants sont bloqués dans tous les champs de texte : + < (inférieur à) + > (supérieur à) + & (esperluette) + ’ (apostrophe droite) + ` (guillemet arrière/accent grave) + \$1 (tilde) + \$1 (barre oblique inverse) ### Titre de l'onglet du navigateur Texte affiché dans l’onglet du navigateur. 25 caractères maximum. ![\[alt text not found\]](http://docs.aws.amazon.com/fr_fr/workspaces-web/latest/adminguide/images/branding/browser-tab.png) **Recommandation** Pensez à utiliser des titres courts et clairs afin qu'ils restent lisibles même lorsque plusieurs onglets sont ouverts. ### Description du message de bienvenue Brève description à côté du logo de votre entreprise sur l’écran de connexion. 150 caractères maximum. ![\[alt text not found\]](http://docs.aws.amazon.com/fr_fr/workspaces-web/latest/adminguide/images/branding/welcome.png) **Recommandation** Veillez à ce que le texte soit concis pour une meilleure lisibilité. Notez qu'un texte plus long sera automatiquement redimensionné pour une taille de police plus petite, tandis que les messages plus courts s'afficheront de manière plus visible. ### Section de contact **Bouton de contact : facultatif** Texte du bouton de contact sur l’écran de connexion. Si ce champ est laissé vide, « Contactez-nous » s'affichera. 30 caractères maximum. **Lien de contact : facultatif** Texte du bouton de contact sur l’écran de connexion. Vous pouvez utiliser : + URL HTTPS pour diriger les utilisateurs vers une page Web + Un lien mailto : pour ouvrir le client de messagerie de l’utilisateur S’il est laissé vide, le bouton de contact est masqué à l’écran. ![\[alt text not found\]](http://docs.aws.amazon.com/fr_fr/workspaces-web/latest/adminguide/images/branding/contact-link.png) **Recommandation** Faites en sorte que le texte soit court, idéalement 2 à 3 mots. ### Section de connexion **En-tête de connexion : facultatif** En-tête de la section de connexion de la page de connexion. Si ce champ est laissé vide, le message « Se connecter » s’affiche. 100 caractères maximum. **Description de connexion : facultatif** Texte de description de la section de connexion. Si ce champ est laissé vide, « Connectez-vous à votre session de navigation WorkSpaces sécurisée » s'affichera. 250 caractères maximum. **Bouton Se connecter : facultatif** Texte affiché sur le bouton de connexion. Si ce champ est laissé vide, le message « Se connecter » s’affiche. 30 caractères maximum. ![\[alt text not found\]](http://docs.aws.amazon.com/fr_fr/workspaces-web/latest/adminguide/images/branding/sign-in.png) **Recommandations** + Faites en sorte que le texte soit court. + Sachez que le bouton de connexion dirige les utilisateurs vers le fournisseur d'identité configuré pour votre portail. Vous pouvez personnaliser le texte du bouton pour qu'il reflète votre fournisseur d'identité spécifique. ### Description du chargement Texte affiché lors de la connexion sur l’écran de chargement. Si ce champ est laissé vide, « Connexion en cours... » s’affiche. 300 caractères maximum. ![\[alt text not found\]](http://docs.aws.amazon.com/fr_fr/workspaces-web/latest/adminguide/images/branding/loading.png) **Recommandation** Ce message n'est affiché que pendant le chargement de la session, de sorte que les utilisateurs finaux n'auront peut-être pas le temps de le lire. Essayez d'éviter de le rendre trop long. ## Conditions d’utilisation : facultatif Vous pouvez personnaliser les conditions d’utilisation que les utilisateurs finaux doivent consulter et accepter avant de démarrer une session de streaming. Ce contenu peut être ajouté en téléchargeant un fichier Markdown ou en utilisant l’éditeur Markdown intégré. Les conditions d’utilisation sont présentées aux utilisateurs une fois qu’ils se sont connectés avec succès. Ils doivent parcourir le document dans son intégralité et cliquer sur le bouton « Accepter » pour accéder à leur session Secure Browser. Si l’utilisateur clique sur « Refuser », il est redirigé vers la page de connexion. Notez qu’il s’agit d’un paramètre facultatif. Si vous n’ajoutez pas de conditions d’utilisation, les utilisateurs accèdent directement à leurs sessions après s’être connectés. **Formatage pris en charge :** + Styles de texte de base (gras, italique) + En-têtes + Listes ordonnées et non ordonnées + Citations en blocs + Règles horizontales + Paragraphes et sauts de ligne simples **Pour des raisons de sécurité, les éléments suivants sont bloqués :** + Exécution de scripts et de code + Éléments interactifs tels que des formulaires et des iframes + Protocoles et chemins de fichiers non sécurisés + Attributs et style HTML + Liens externes et tableaux N’oubliez pas que la taille de votre fichier de conditions d’utilisation ne doit pas dépasser 150 Ko.