We hebben onze inlogpagina opnieuw gebouwd, en de techniek eronder
De inlogpagina is het ene scherm dat elke PixelUnion-gebruiker ziet, meestal meerdere keren per week. Tot nu toe was het de standaard Keycloak-look met ons logo erboven. Het werkte. Het zag er ook uit als bedrijfssoftware uit 2014, en het vertelde je niets over waar je foto’s eigenlijk staan. Dus hebben we hem opnieuw gebouwd, samen met de accountomgeving erachter.
Even ter herinnering: sinds onze overstap naar Keycloak is Keycloak onze identity provider (IdP). Die regelt je wachtwoord, tweestapsverificatie, passkeys en “Inloggen met Google”, zodat Immich dat zelf nooit hoeft te doen. Dat deel blijft precies hetzelfde. Wat veranderd is, is alles wat je ziet terwijl dat gebeurt.
Waarom we Keycloakify gebruikten
Keycloak-thema’s worden geschreven in FreeMarker, een templatetaal voor de server uit de Java-wereld. Je kopieert de templates van Keycloak, past ze aan, herstart de server en controleert het resultaat door de echte inlogflow door te klikken. Voor het vervangen van een logo is dat prima. Voor een nieuw ontwerp is het pijnlijk, omdat sommige pagina’s alleen in zeldzame situaties verschijnen: een verlopen pagina, een tweede authenticator, een Google-account dat overeenkomt met een bestaand e-mailadres.
Keycloakify lost dat op. Het is een open-source project, gestart door Joseph Garrone, waarmee je Keycloak-thema’s schrijft als React-componenten. Die worden gebundeld tot een gewone thema-jar die Keycloak laadt zoals elke andere plugin. Het starttemplate wordt gepubliceerd onder codegouvfr, de open-source organisatie van de Franse overheid, en dat vinden we een mooi detail voor een Europees project. De broncode staat op GitHub.
Wat ons de meeste tijd bespaarde, is Storybook. Keycloakify levert voorbeelddata mee voor elke Keycloak-pagina, zodat we ze allemaal konden tonen, in elke toestand, zonder dat er een Keycloak-server hoefde te draaien. Zo kwamen we uit op 112 paginatoestanden, die we hebben gecontroleerd op desktop- en telefoonbreedte, in licht en donker.
Eén regel hielden we streng aan: we veranderden alleen de opmaak en de vormgeving. Elke veldnaam, id en verborgen invoer is hetzelfde als in de pagina’s van Keycloak zelf. Keycloak merkt niet dat er iets veranderd is, en de beveiligingslogica werkt precies zoals voorheen. Die afweging dragen we zelf. Elke pagina die we opnieuw ontworpen hebben, is nu code die wij onderhouden, en die we opnieuw moeten controleren bij elke nieuwe versie van Keycloak. Voor de pagina’s die er het meest toe doen, vinden we dat het waard.
Wat er veranderde voor privacy en toegankelijkheid
Een inlogpagina is een vreemde plek om te bezuinigen op privacy, dus dat hebben we geprobeerd te vermijden.
- Geen lettertypen van derden. Beide lettertypen zitten in het thema en worden door ons geserveerd. Je browser maakt geen contact met Google Fonts of een ander font-CDN (content delivery network).
- Onze eigen kopieën van de foto’s. De foto’s op de inlogpagina worden door ons opgeslagen en geserveerd, niet rechtstreeks van de fotosite geladen. Elk bezoek laadt één set van vier, ongeveer 60 tot 120 KB. Telefoons laden ze helemaal niet, omdat het fotopaneel daar niet wordt getoond.
Wat toegankelijkheid betreft: elke knop en link is minstens 44 pixels hoog, zodat je hem makkelijk met je duim raakt. Tekstvelden gebruiken tekst van 16 pixels, waardoor iPhones niet inzoomen als je erop tikt. Alle tekst haalt een contrastverhouding van 4.5:1 ten opzichte van de achtergrond, ook in de donkere modus. Op een computer volgt de inlogpagina de lichte of donkere instelling van je systeem, op een telefoon is hij altijd donker.
Is een inlogpagina het belangrijkste onderdeel van een fotodienst? Nee. Dat zijn je foto’s. Maar het is de voordeur, en die mag eruitzien alsof iemand om het huis geeft. We blijven aan allebei werken.
Fotoverantwoording
De foto’s op de inlogpagina komen van Unsplash en worden gebruikt onder de Unsplash-licentie. Naamsvermelding is niet verplicht, maar deze fotografen hebben de pagina gemaakt tot wat hij is, dus hier zijn ze. Bedankt.