Remplacement de la feuille de style

Introduction

Bien que les pages d'utilisateur final associées à l'authentification dans IBM Security Verify puissent être complètement personnalisées en remplaçant leurs modèles HTML dans le paquet de thème, le launchpad d'utilisateur final, le self-service d'utilisateur final et les pages de campagne de certification d'utilisateur final ne peuvent pas être personnalisées de cette façon.

Cependant, vous pouvez toujours apporter des modifications à l'apparence de ces pages. Cela est possible parce que le modèle CSS dans le thème par défaut est chargé par toutes les pages d'utilisateur final.

Dans ce guide, vous apprendrez comment mettre à jour le modèle de feuille de style dans le thème par défaut pour remplacer les styles par défaut des éléments sur les pages d'utilisateur final intégrées.

Prérequis

Vous devrez obtenir un jeton d'accès autorisé à gérer les thèmes. La façon la plus simple de procéder est de créer un client API avec le droit Manage Templates puis d'exécuter le flux de type Client Credentials pour obtenir un jeton d'accès.

Vous aurez besoin de l'utilitaire en ligne de commande curl. Il est intégré à la plupart des systèmes Linux et MacOS. Cependant, si nécessaire, vous pouvez télécharger curl ici.

Variables

Dans ce guide, les variables suivantes sont utilisées :

Vous devriez définir ces variables sur la ligne de commande comme ceci :

export tenant_url=tenant.verify.ibm.com
export access_token=iZ5Gfz66HsNYSoJxhVe7N3u6cdBCHFYWgDOCAsNF

Exporter le fichier CSS du thème par défaut

Étant donné que le fichier CSS par défaut dans le modèle par défaut est vide, vous pourriez simplement créer un nouveau fichier et le téléverser. Cependant, au cas où il y aurait déjà du contenu personnalisé dans le modèle, c'est une bonne idée d'exporter la version actuelle comme point de départ pour apporter des modifications.

Vous pouvez télécharger le fichier en utilisant l'API REST de thème.

Le point de terminaison REST inclut l'ID du thème (default) et le chemin vers le modèle (common/page_components/default/page_style.css).

Utilisez la commande curl suivante pour télécharger le fichier page_style.css dans le répertoire courant de votre machine :

curl -H "Authorization: Bearer ${access_token}" -X GET "https://${tenant_url}/v1.0/branding/themes/default/common/page_components/default/page_style.css" -o page_style.css

Modifier le fichier CSS exporté

Modifier le fichier téléchargé

Ouvrez le fichier page_style.css téléchargé dans votre éditeur de texte favori et collez le contenu ci-dessous :

/* css for customization
   Add styling here to override classes from <tenant>/usc/css/stateless.css
*/

/* Login button on login page */
.login-main button {
  float: left;
  background-color: #810ffe;
}

/* Various buttons in the end user UI */
button.cs-button, a.cs-link-button, a.bx--btn--primary,
  .ovd--bx-btn-secondary, button.bx--content-switcher--selected {
  background-color: #810ffe !important;
  color: #fefefe !important;
}

/* Make graphics on buttons light */
.ovd--bx-btn-secondary svg {
  fill: #fefefe !important;
}

/* Links on MFA registration page */
a.method-action, button.bx--btn--ghost {
  color: #810ffe !important;
}

/* signature and user presence enable/disable toggle */
div.verify-toggle {
  --cds-support-02: #810ffe !important;
}

/* Lock icons on user profile page */
div.usc--field-w-icon svg {
  fill: #810ffe !important;
}

/* Left-hand panel of profile page */
div.usc--profile-left {
  display: none;
}

/* Header row of tables */
.bx--data-table tbody th, .bx--data-table th,
 .bx--data-table th.bx--table-column-checkbox,
  .bx--data-table thead, .bx--table-sort {
    background: #bd9de0;
}

Enregistrez le fichier mis à jour.

Ces modifications CSS sont simples mais montrent des changements sur la plupart des pages d'utilisateur final. Les modifications incluent :

• Couleur et position du bouton de connexion sur la page de connexion Cloud Directory
• Couleur du bouton de retour à l'accueil sur la page de déconnexion
• Couleur des boutons sur la page App center de l'utilisateur final
• Couleur du bouton sur la page My requests
• Couleur du bouton de sélection sur l'onglet Access certifications de la page Task manager
• Couleur des icônes de verrouillage sur l'onglet Profile sous Profiles & settings
• Couleur des liens de sélection de méthode sur la page de sélection MFA
• Couleur du bouton sur la page d'enregistrement de facteur
• Couleur des icônes de basculement pour les méthodes Verify sur la page d'enregistrement de facteur
• Couleur des barres d'en-tête de tableau dans toute l'interface utilisateur final

Remplacer le fichier CSS dans le thème par défaut

Pour remplacer le modèle CSS dans le thème par défaut, utilisez la commande curl suivante. Cela utilise le même point de terminaison REST que l'exportation sauf que la méthode est PUT au lieu de GET :

curl -H "Authorization: Bearer ${access_token}" -X PUT "https://${tenant_url}/v1.0/branding/themes/default/common/page_components/default/page_style.css" -F file="@page_style.css"

Une fois l'importation terminée, le nouveau CSS est immédiatement actif pour tous les utilisateurs. Cependant, les modifications peuvent ne pas être vues jusqu'à ce qu'un rechargement forcé du navigateur soit effectué pour effacer toute copie mise en cache du fichier CSS original.

Tester la feuille de style mise à jour

En utilisant un navigateur, naviguez vers l'interface utilisateur final de votre locataire IBM Security Verify. Une page de connexion sera affichée. Vous devriez voir que la couleur et la position du bouton de connexion ont changé :

Si vous vous connectez, vous verrez que la couleur des boutons sur le launchpad a changé :

Si vous naviguez vers My requests et Task manager, vous verrez également des changements de couleur sur ces pages.

Sélectionnez l'icône de profil en haut à droite de l'écran et sélectionnez Profile & settings dans le menu contextuel. Cela ouvre le profil utilisateur. Vous verrez que le panneau de gauche de cette page (qui montre habituellement juste une grande icône de profil) a été supprimé. La couleur des icônes de verrouillage a également été modifiée :

Sélectionnez l'onglet Security. Vous devrez compléter l'authentification multifacteur. Sur l'écran de sélection de facteur, notez que la couleur des liens de sélection a été modifiée.

Sur l'écran d'enregistrement de facteur, notez que la couleur du lien Add factor a été modifiée. Si vous avez une application Verify enregistrée, développez les propriétés et vous verrez que la couleur de l'icône de basculement de méthode a été modifiée :

Réinitialiser le fichier CSS dans le thème par défaut à l'état original

Vous pouvez rétablir un CSS personnalisé à son état original en appelant son point de terminaison avec la méthode DELETE. Si vous voulez annuler les modifications que vous avez apportées, utilisez la commande curl suivante :

curl -H "Authorization: Bearer ${access_token}" -X DELETE "https://${tenant_url}/v1.0/branding/themes/default/common/page_components/default/page_style.css"

Les modifications du CSS prennent effet immédiatement. Cependant, les pages modifiées peuvent encore being vues jusqu'à ce qu'un rechargement forcé du navigateur soit effectué pour effacer toute copie mise en cache du fichier CSS modifié.

💎

Jon Harry, IBM Security