Passer au contenu principal

Personnaliser la page de connexion dans Casdoor : style personnalisé de l'interface d'authentification sans fork

· Lecture de 11 minutes
Yang Luo
Yang Luo
Casdoor Maintainer

Oui, Casdoor prend en charge le style personnalisé de son interface d'authentification, et vous n'avez pas besoin de forker le frontend pour y accéder. Chaque application dispose d'un onglet UI Customization où vous définissez le logo, le favicon, l'image d'arrière-plan, le CSS personnalisé pour ordinateur et mobile, la position du formulaire, un panneau latéral, le HTML du pied de page et un thème. Deux tableaux, Signin items et Signup items, déterminent quels champs sont affichés sur les pages de connexion et d'inscription, dans quel ordre, avec quelles étiquettes et quels espaces réservés. Tout est stocké par application dans la base de données, afin qu'une instance Casdoor puisse servir de nombreuses pages de connexion avec des marques différentes, et que les administrateurs d'organisation puissent modifier leurs propres pages dans des limites sûres.

Quoi modifier et où​

Ce que vous souhaitez modifierOù dans CasdoorDocs
Couleur principale, rayon des coins, style sombre ou compactTheme de l'organisation, ou de l'application avec Follow organization theme désactivéCustomize the theme
Un look complet prêt à l'emploiIdentity → Marketplace, thèmes de connexionMarketplace
Logo, logo sombre, favicon, titre de la pagePage de modification de l'applicationApplication settings
Image d'arrière-plan (ordinateur et téléphone)Background URL, Background URL MobileUI customization
Apparence du formulaireCustom CSS, Custom CSS MobileUI customization
Formulaire à gauche, au centre ou à droite, ou à côté d'un panneauForm position, Side panel HTMLUI customization
Texte sous le formulaireFooter HTMLApplication settings
Quels champs afficher sur la page de connexion, ordre, espaces réservésSignin itemsSign-in items table
Mot de passe, code, lien magique, WebAuthn, LDAP et leur ordreSignin methodsSign-in methods
Champs d'inscription, indicateurs obligatoires, étiquettes, regexSignup itemsSign-up items table
Sélecteur de langueÉlément de connexion Languages, Languages de l'organisationSign-in items table
Permettre aux utilisateurs de choisir ou de saisir leur organisationOrg choice modeSpecify login organization

Dans la console chinoise, l'onglet s'appelle 界面定制 et le tableau de connexion 登录项 ; si vous cherchez comment modifier le 登录界面 d'une application, commencez là.

Thèmes : organisation, application et Marketplace​

Le changement le plus rapide est le thème. Un thème dans Casdoor est un petit objet contenant un style (Default, Dark, Document ou Blossom dans l'éditeur), une couleur principale, un rayon de bordure et un interrupteur compact. Vous pouvez le définir au niveau de l'organisation, où il s'applique à la console pour ses membres et aux pages d'entrée de chaque application qui suit le thème de l'organisation, ou sur une seule application en désactivant Follow organization theme. La page de modification de l'application propose un aperçu en direct, afin que vous puissiez voir le résultat avant d'enregistrer.

Si vous souhaitez aller plus loin que les couleurs, le Casdoor Marketplace propose des thèmes de connexion. L'installation d'un thème écrit les données du thème, la position du formulaire, le CSS du formulaire pour ordinateur et mobile, le HTML du panneau latéral, le HTML du pied de page et les URLs d'arrière-plan d'une application. Le dépôt casdoor-integrations contient actuellement 24 thèmes, de Midnight et Split à Terminal, Nord et Solarized. La désinstallation d'un thème restaure ce que l'application avait auparavant, donc essayer un thème ne coûte rien. Parcourez-les sur marketplace.casdoor.com.

Image de marque : logo, favicon et arrière-plan​

Chaque application possède son propre Logo, Favicon et Title, distincts de ceux de l'organisation. Une organisation peut faire tourner plusieurs produits qui partagent les mêmes utilisateurs mais affichent des logos différents. Il existe également un champ optionnel Logo dark, affiché lorsque la page est en mode sombre ; sans lui, Casdoor continue d'utiliser le logo normal.

Background URL définit l'image derrière le formulaire. Définissez également Background URL Mobile si l'image pour ordinateur est mal recadrée sur les téléphones. L'aperçu se met à jour dès que l'URL est chargée.

CSS personnalisé et mise en page du formulaire​

Custom CSS accepte des règles CSS simples ; Casdoor les enveloppe lui-même dans un élément style, donc n'ajoutez pas le vôtre. Les principaux conteneurs à cibler sont .login-panel et .login-form :

.login-panel {
  border-radius: 12px;
  background-color: #ffffff;
  box-shadow: 0 0 30px 20px rgba(0, 0, 0, 0.2);
}

Custom CSS Mobile contient les règles pour les téléphones, afin que vous n'ayez pas à écrire de requêtes média pour le cas courant.

Form position place le formulaire à gauche, au centre ou à droite. La quatrième option, Enable side panel, centre le formulaire et ajoute un panneau à côté dont le contenu provient de Side panel HTML. Ce champ accepte du HTML, donc un élément style à l'intérieur est autorisé.

Footer HTML est rendu sous les formulaires de connexion et d'inscription. Si l'application est l'application par défaut de son organisation, son pied de page remplace également "Powered by Casdoor" dans la console d'administration pour les utilisateurs de cette organisation.

Lorsque vous êtes satisfait d'un design sur la préproduction, Export JSON en bas de la page de modification de l'application copie le look (logo, favicon, arrière-plans, CSS, position du formulaire, panneau latéral, thème et champs HTML personnalisés) dans le presse-papiers, et Import JSON sur la même application dans une autre instance l'applique. L'exportation ne contient aucun secret ni fournisseur.

Champs, étiquettes et ordre​

Le tableau Signin items liste chaque élément de la page de connexion : le logo, les champs nom d'utilisateur et mot de passe, le lien « Mot de passe oublié », la case à cocher des conditions d'utilisation, le sélecteur de langue, le captcha, les boutons des fournisseurs, etc. Pour chaque ligne, vous pouvez définir Visible, un Placeholder personnalisé, du Custom CSS par élément et une règle, ainsi que déplacer l'élément vers le haut ou vers le bas. Vous pouvez également ajouter des éléments personnalisés dont le libellé est en HTML.

Quelques règles utiles à connaître :

  • Masquer Forgot password? désactive également la réinitialisation du mot de passe dans l'API, et pas seulement le lien.
  • La règle Captcha permet de choisir entre un captcha pop-up et un captcha intégré. Si vous choisissez un fournisseur de captcha, consultez Comparaison des fournisseurs CAPTCHA pour les pages de connexion.
  • La règle Languages permet de choisir entre une icône globe et un sélecteur avec libellés. La liste elle-même est limitée aux Languages de l'organisation, donc une organisation qui ne sert que des utilisateurs anglophones et japonais n'affichera que ces deux langues.

Les méthodes de connexion (mot de passe, code de vérification, lien magique, WebAuthn, LDAP, Face ID et autres) sont dans un tableau séparé, Signin methods, avec son propre ordre et ses propres noms d'affichage.

Le tableau Signup items fait la même chose pour l'inscription, avec les options Required, la validation Regex, un Label personnalisé et des règles telles que "No verification" pour l'e-mail. POST /api/signup efface également tous les champs dont l'élément est masqué, afin que les clients API ne puissent pas définir des champs que votre formulaire n'affiche pas. L'option Prompted demande aux utilisateurs les champs manquants, tels qu'un numéro de téléphone, après qu'ils se sont connectés via un fournisseur qui n'en a pas fourni.

Spécifier l'organisation de connexion​

Si plusieurs organisations partagent un seul Casdoor, les utilisateurs ont besoin d'un moyen d'accéder à la bonne. Le mode Org choice mode sur l'application par défaut d'une organisation (ou sur app-built-in) ajoute une étape de sélection d'organisation à /login : Input affiche un champ texte, Select affiche une liste déroulante. Après la sélection de l'utilisateur, Casdoor le redirige vers /login/<organization>, qui affiche la page stylisée propre à cette organisation. Le navigateur mémorise la dernière organisation dans localStorage, de sorte qu'un utilisateur dont la session console a expiré arrive à nouveau sur sa propre page de connexion.

Ce que les administrateurs de tenant peuvent modifier en toute sécurité​

Permettre à chaque client de personnaliser sa propre page de connexion soulève une question évidente : qu'empêche un administrateur d'organisation d'ajouter un script qui copie les mots de passe, ou un sélecteur CSS qui fuit chaque caractère tapé via des requêtes d'images d'arrière-plan ? Casdoor vérifie cela côté serveur. Lorsqu'un administrateur qui n'est pas un administrateur global ajoute ou sauvegarde une application, chaque champ HTML et CSS personnalisé modifié est validé, et la sauvegarde est rejetée si l'un d'entre eux viole les règles :

  • Le HTML ne peut utiliser que des éléments de mise en page et de texte tels que div, span, p, titres, listes, liens, images, tableaux, style et formes SVG de base. script, form, input et iframe sont refusés, tout comme les gestionnaires d'événements on..., srcset, formaction, srcdoc et attributs similaires. href n'est autorisé que sur les liens avec des URL relatives, http, https, mailto ou tel.
  • CSS may not contain backslashes, <, image(, image-set( and a few other functions. Every url() must be relative, a data: URL, or start with an allowed prefix: Google Fonts, Fontsource on jsDelivr, the Casdoor CDNs, this Casdoor's own origin, the domains of the global storage providers, or an entry of formCssAllowedUrls.
  • @import n'est autorisé que depuis Google Fonts et Fontsource, car une feuille de style importée n'est pas vérifiée elle-même.

Pour permettre aux tenants de charger des images depuis votre propre hôte, ajoutez-le dans conf/app.conf (voir Configuration) :

formCssAllowedUrls = "https://img.example.com/"

En plus de la vérification lors de la sauvegarde, les pages de connexion assainissent le HTML personnalisé avant le rendu, sauf si l'application appartient à l'organisation built-in ou si un administrateur global a activé Enable custom scripts pour celle-ci. Seul un administrateur global peut activer cet interrupteur, et tant qu'il est activé, seul un administrateur global peut modifier le HTML de cette application. Les mêmes règles s'appliquent lorsqu'un tenant installe un thème Marketplace : un thème qui viole ces règles ne peut être installé que par un administrateur global.

Signin HTML et Signup HTML méritent une note séparée : ils remplacent toute la page intégrée, y compris le formulaire. Comme les tenants ne peuvent pas ajouter de formulaires ou de scripts, ces deux champs sont principalement destinés aux administrateurs globaux ; pour le branding, le CSS, le panneau latéral et le pied de page sont de meilleurs outils.

Page de connexion hébergée ou votre propre interface ?​

Vous pouvez créer votre propre écran de connexion sur l'API de Casdoor, mais la page hébergée est généralement le meilleur choix. Avec OAuth 2.0 ou OpenID Connect, les utilisateurs saisissent leur mot de passe uniquement sur l'origine de Casdoor et votre application reçoit un code d'autorisation, jamais les identifiants. Captcha, MFA, fournisseurs sociaux et d'entreprise, mot de passe oublié, validation d'inscription et sélecteur d'organisation continuent de fonctionner sans code de votre côté, et ils continuent de recevoir des correctifs lorsque vous mettez à jour Casdoor. Une interface personnalisée doit réimplémenter chacun de ces flux et fait passer les mots de passe par vos propres serveurs. Guides pour intégrer la page hébergée dans une application : SSO Spring Boot avec OIDC et Authentification SSO Nginx.

D'autres fournisseurs hébergés font le même compromis. Idura Verify, par exemple, vous permet d'ajouter une URL de feuille de style et du HTML personnalisé autour de sa zone de connexion depuis son tableau de bord, sous une Content Security Policy stricte avec une liste explicite d'origines de styles pour les polices et les images. formCssAllowedUrls de Casdoor joue le même rôle, avec la différence que Casdoor est open source et auto-hébergé, donc vous contrôlez la liste.

Références​