Aller au contenu

Marque

Personnalisez l'apparence de Hosted Auth avec les couleurs, polices, rayons, logos et CSS personnalisé.

Afficher en Markdown

Options de marque

La configuration de marque contrôle l’apparence visuelle des pages Hosted Auth, de l’écran de consentement et des modèles d’e-mail. Chaque organisation peut remplacer les valeurs par défaut au niveau de l’instance.

Option Description
Couleur principale Couleur d’action principale utilisée pour les boutons, liens et anneaux de focus. Accepte des valeurs CSS hex ou oklch.
Couleur d’arrière-plan Arrière-plan des pages pour les écrans Hosted Auth.
Couleur d’accent Couleur de mise en évidence secondaire utilisée pour les étiquettes et les éléments décoratifs.
Rayon de bordure Rayon de bordure appliqué aux cartes, champs et boutons. Choisir parmi aucun, petit, moyen, grand ou plein.
Famille de police Nom de police Google Fonts ou URL de police CDN personnalisée. Retombe sur la pile sans-serif système.
Logo (clair) PNG ou SVG affiché sur les pages en thème clair. Stocké dans R2.
Logo (sombre) PNG ou SVG affiché sur les pages en thème sombre. Retombe sur le logo clair si non défini.

Marque par organisation

Chaque organisation peut remplacer la marque au niveau de l’instance avec son propre logo, ses couleurs et son arrière-plan. Le Login Worker résout la configuration de marque par organisation, en retombant sur les valeurs par défaut de l’instance si aucune surcharge d’organisation n’est définie. Les lectures du cache de marque se terminent en moins de 2 ms au P50.

Point de terminaison de l’API de gestion

Mettez à jour la marque de l’organisation avec une requête PATCH. Seuls les champs présents dans le corps de la requête sont modifiés. Passez null pour vider un champ et restaurer la valeur par défaut parente.

curl -X PATCH https://xid.dev/v1/organizations/org_xxx/branding \
  -H 'Authorization: Bearer sk_live_xxx' \
  -H 'Content-Type: application/json' \
  -d '{
    "primary_color": "#6366f1",
    "border_radius": "medium",
    "font_family": "Inter",
    "hide_xid_branding": true
  }'

Contraintes CSS personnalisées

  • La taille maximale est de 50 Ko par organisation.
  • Le filtre CSP supprime les règles @import et les références url() pointant en dehors de la liste d’autorisation. Seules les déclarations de propriétés CSS pures survivent.
  • L’exécution de scripts externes depuis le CSS personnalisé est bloquée. Utilisez le CSS personnalisé uniquement pour des surcharges visuelles, pas pour de la logique comportementale.
  • Les modifications sont prévisualisées dans un bac à sable iframe avant publication. Les états de prévisualisation et de production sont maintenus séparément.

Marque des modèles d’e-mail

Les modèles d’e-mail transactionnels (vérification, lien magique, OTP, réinitialisation de mot de passe et invitations) récupèrent automatiquement le logo et la couleur principale de l’organisation. Des modèles HTML d’e-mail personnalisés peuvent être téléchargés par organisation via la console.

Navigation

Saisissez votre recherche...

Utilisez les touches fléchées pour naviguerAppuyez sur Entrée pour sélectionnerAppuyez sur Échap pour fermer