Wir haben unsere Anmeldeseite neu gebaut, und die Technik darunter
Die Anmeldeseite ist der eine Bildschirm, den jeder PixelUnion-Nutzer sieht, meist mehrmals pro Woche. Bisher war es das Standard-Design von Keycloak mit unserem Logo darüber. Es funktionierte. Es sah aber auch aus wie Unternehmenssoftware aus dem Jahr 2014 und verriet Ihnen nichts darüber, wo Ihre Fotos eigentlich liegen. Also haben wir sie neu gebaut, zusammen mit der Kontoverwaltung dahinter.
Kurz zur Erinnerung: Seit unserem Umstieg auf Keycloak ist Keycloak unser Identity Provider (IdP). Er kümmert sich um Ihr Passwort, die Zwei-Faktor-Authentifizierung, Passkeys und “Mit Google anmelden”, damit Immich das nie selbst tun muss. Dieser Teil bleibt genau gleich. Geändert hat sich alles, was Sie dabei sehen.
Warum wir Keycloakify verwendet haben
Keycloak-Themes werden in FreeMarker geschrieben, einer serverseitigen Template-Sprache aus der Java-Welt. Man kopiert die Templates von Keycloak, bearbeitet sie, startet den Server neu und prüft das Ergebnis, indem man sich durch den echten Anmeldeablauf klickt. Um ein Logo auszutauschen, reicht das. Für ein Redesign ist es mühsam, weil manche Seiten nur in seltenen Situationen erscheinen: eine abgelaufene Seite, ein zweiter Authenticator, ein Google-Konto, das zu einer bestehenden E-Mail-Adresse passt.
Keycloakify löst das. Es ist ein Open-Source-Projekt, gestartet von Joseph Garrone, mit dem man Keycloak-Themes als React-Komponenten schreibt. Daraus entsteht ein normales Theme-Jar, das Keycloak wie jedes andere Plugin lädt. Die Startvorlage wird unter codegouvfr veröffentlicht, der Open-Source-Organisation der französischen Regierung, was wir für ein europäisches Projekt ein schönes Detail finden. Der Quellcode liegt auf GitHub.
Am meisten Zeit hat uns Storybook gespart. Keycloakify liefert Beispieldaten für jede Keycloak-Seite mit, sodass wir alle Seiten in jedem Zustand anzeigen konnten, ohne einen laufenden Keycloak-Server. Am Ende waren es 112 Seitenzustände, die wir in Desktop- und Smartphone-Breite geprüft haben, im hellen und im dunklen Modus.
Eine Regel haben wir streng eingehalten: Wir haben nur das Markup und die Gestaltung geändert. Jeder Feldname, jede ID und jedes versteckte Eingabefeld ist identisch mit den Seiten von Keycloak selbst. Keycloak merkt nicht, dass sich etwas geändert hat, und seine Sicherheitslogik läuft genau wie vorher. Den Kompromiss tragen wir selbst. Jede Seite, die wir neu gestaltet haben, ist jetzt Code, den wir pflegen und bei jeder neuen Keycloak-Version erneut prüfen müssen. Für die wichtigsten Seiten ist uns das die Mühe wert.
Was sich für Datenschutz und Barrierefreiheit geändert hat
Eine Anmeldeseite ist ein seltsamer Ort, um beim Datenschutz zu sparen, also haben wir es versucht zu vermeiden.
- Keine Schriften von Drittanbietern. Beide Schriftarten sind im Theme enthalten und werden von uns ausgeliefert. Ihr Browser kontaktiert weder Google Fonts noch ein anderes Font-CDN (Content Delivery Network).
- Eigene Kopien der Fotos. Die Fotos auf der Anmeldeseite werden von uns gespeichert und ausgeliefert, nicht direkt von der Fotoseite eingebunden. Jeder Besuch lädt einen Satz von vier Fotos, etwa 60 bis 120 KB. Smartphones laden sie gar nicht, weil das Fotofeld dort nicht angezeigt wird.
Zur Barrierefreiheit: Jede Schaltfläche und jeder Link ist mindestens 44 Pixel hoch, damit man sie gut mit dem Daumen trifft. Textfelder verwenden 16 Pixel große Schrift, damit iPhones beim Antippen nicht hineinzoomen. Alle Texte erreichen ein Kontrastverhältnis von 4.5:1 zum Hintergrund, auch im dunklen Modus. Auf dem Computer folgt die Anmeldeseite der hellen oder dunklen Einstellung Ihres Systems, auf dem Smartphone ist sie immer dunkel.
Ist eine Anmeldeseite der wichtigste Teil eines Fotodienstes? Nein. Das sind Ihre Fotos. Aber sie ist die Haustür, und die darf so aussehen, als würde sich jemand um das Haus kümmern. Wir arbeiten weiter an beidem.
Bildnachweise
Die Fotos auf der Anmeldeseite stammen von Unsplash und werden unter der Unsplash-Lizenz verwendet. Eine Namensnennung ist nicht erforderlich, aber diese Fotografinnen und Fotografen haben die Seite zu dem gemacht, was sie ist. Deshalb nennen wir sie hier. Danke.