Nous avons reconstruit notre page de connexion, et la technique derrière
La page de connexion est le seul écran que chaque utilisateur de PixelUnion voit, généralement plusieurs fois par semaine. Jusqu’ici, c’était l’apparence par défaut de Keycloak avec notre logo au-dessus. Ça fonctionnait. Ça ressemblait aussi à un logiciel d’entreprise de 2014, et ça ne vous disait rien sur l’endroit où vos photos sont réellement stockées. Nous l’avons donc reconstruite, avec l’espace compte qui se trouve derrière.
Petit rappel : depuis notre passage à Keycloak, Keycloak est notre fournisseur d’identité (IdP). Il gère votre mot de passe, l’authentification à deux facteurs, les clés d’accès et “Se connecter avec Google”, pour qu’Immich n’ait jamais à le faire lui-même. Cette partie ne change pas. Ce qui change, c’est tout ce que vous voyez pendant ce travail.
Pourquoi nous avons utilisé Keycloakify
Les thèmes Keycloak sont écrits en FreeMarker, un langage de templates côté serveur issu du monde Java. On copie les templates de Keycloak, on les modifie, on redémarre le serveur et on vérifie le résultat en parcourant le vrai parcours de connexion. Pour changer un logo, ça suffit. Pour une refonte, c’est pénible, car certaines pages n’apparaissent que dans des situations rares : une page expirée, un deuxième authentificateur, un compte Google qui correspond à une adresse e-mail existante.
Keycloakify règle ce problème. C’est un projet open source, lancé par Joseph Garrone, qui permet d’écrire des thèmes Keycloak sous forme de composants React. Ils sont compilés en un fichier jar de thème classique, que Keycloak charge comme n’importe quel autre plugin. Son modèle de démarrage est publié sous codegouvfr, l’organisation open source du gouvernement français, ce qui nous semble un joli détail pour un projet européen. Le code source est sur GitHub.
Ce qui nous a fait gagner le plus de temps, c’est Storybook. Keycloakify fournit des données d’exemple pour chaque page de Keycloak, ce qui nous a permis d’afficher toutes les pages, dans tous leurs états, sans serveur Keycloak en marche. Nous sommes arrivés à 112 états de page, vérifiés en largeur ordinateur et téléphone, en mode clair et sombre.
Nous avons respecté une règle stricte : nous n’avons changé que le balisage et la mise en forme. Chaque nom de champ, identifiant et champ caché est identique à ceux des pages de Keycloak. Keycloak ne sait pas que quelque chose a changé, et sa logique de sécurité fonctionne exactement comme avant. Le compromis, c’est à nous de l’assumer. Chaque page que nous avons repensée est désormais du code que nous maintenons, et que nous devons revérifier à chaque nouvelle version de Keycloak. Pour les pages les plus importantes, cela en vaut la peine.
Ce qui a changé pour la confidentialité et l’accessibilité
Une page de connexion est un drôle d’endroit pour faire des économies sur la confidentialité, alors nous avons essayé de l’éviter.
- Pas de polices tierces. Les deux polices sont intégrées au thème et servies par nous. Votre navigateur ne contacte ni Google Fonts ni aucun autre CDN de polices (réseau de diffusion de contenu).
- Nos propres copies des photos. Les photos de la page de connexion sont stockées et servies par nous, et non chargées directement depuis le site photo. Chaque visite charge un ensemble de quatre photos, environ 60 à 120 Ko. Les téléphones ne les chargent pas du tout, car le panneau photo n’y est pas affiché.
Côté accessibilité, chaque bouton et chaque lien fait au moins 44 pixels de haut, pour être facile à toucher avec le pouce. Les champs de texte utilisent une taille de 16 pixels, ce qui empêche les iPhone de zoomer quand vous les touchez. Tout le texte atteint un rapport de contraste de 4.5:1 avec son arrière-plan, y compris en mode sombre. Sur ordinateur, la page de connexion suit le réglage clair ou sombre de votre système, et sur téléphone, elle est toujours sombre.
Une page de connexion est-elle la partie la plus importante d’un service photo ? Non. Ce sont vos photos. Mais c’est la porte d’entrée, et elle doit donner l’impression que quelqu’un prend soin de la maison. Nous allons continuer à améliorer les deux.
Découvrez ce que nous proposons →
Crédits photo
Les photos de la page de connexion proviennent d’Unsplash et sont utilisées sous la licence Unsplash. L’attribution n’est pas obligatoire, mais ces photographes ont donné son apparence à la page, alors les voici. Merci.