Abbiamo ricostruito la nostra pagina di accesso, e la tecnologia che c'è sotto
La pagina di accesso è l’unica schermata che ogni utente di PixelUnion vede, di solito più volte alla settimana. Finora era l’aspetto standard di Keycloak con il nostro logo sopra. Funzionava. Sembrava anche un software aziendale del 2014, e non ti diceva nulla su dove si trovano davvero le tue foto. Così l’abbiamo ricostruita, insieme all’area account che c’è dietro.
Un breve promemoria: dal nostro passaggio a Keycloak, Keycloak è il nostro identity provider (IdP). Gestisce la tua password, l’autenticazione a due fattori, le passkey e “Accedi con Google”, così Immich non deve mai farlo da sé. Quella parte resta esattamente uguale. È cambiato tutto ciò che vedi mentre svolge quel lavoro.
Perché abbiamo usato Keycloakify
I temi di Keycloak si scrivono in FreeMarker, un linguaggio di template lato server che viene dal mondo Java. Copi i template di Keycloak, li modifichi, riavvii il server e controlli il risultato cliccando attraverso il vero flusso di accesso. Per sostituire un logo va bene. Per un nuovo design è faticoso, perché alcune pagine compaiono solo in situazioni rare: una pagina scaduta, un secondo autenticatore, un account Google che corrisponde a un indirizzo email esistente.
Keycloakify risolve il problema. È un progetto open source, avviato da Joseph Garrone, che permette di scrivere temi di Keycloak come componenti React. Vengono compilati in un normale file jar del tema, che Keycloak carica come qualsiasi altro plugin. Il suo template di partenza è pubblicato sotto codegouvfr, l’organizzazione open source del governo francese, un bel dettaglio per un progetto europeo. Il codice sorgente è su GitHub.
Quello che ci ha fatto risparmiare più tempo è Storybook. Keycloakify include dati di esempio per ogni pagina di Keycloak, così abbiamo potuto visualizzarle tutte, in ogni stato, senza un server Keycloak in esecuzione. Alla fine erano 112 stati di pagina, che abbiamo controllato in larghezza desktop e telefono, in modalità chiara e scura.
Abbiamo rispettato una regola rigida: abbiamo cambiato solo il markup e lo stile. Ogni nome di campo, id e campo nascosto è identico a quelli delle pagine di Keycloak. Keycloak non sa che qualcosa è cambiato, e la sua logica di sicurezza funziona esattamente come prima. Il compromesso lo portiamo noi. Ogni pagina che abbiamo ridisegnato è ora codice che manteniamo, e che dobbiamo ricontrollare a ogni nuova versione di Keycloak. Per le pagine più importanti, pensiamo che ne valga la pena.
Cosa è cambiato per privacy e accessibilità
Una pagina di accesso è uno strano posto per risparmiare sulla privacy, quindi abbiamo cercato di non farlo.
- Nessun font di terze parti. Entrambi i caratteri sono inclusi nel tema e serviti da noi. Il tuo browser non contatta Google Fonts né alcun altro CDN di font (content delivery network).
- Le nostre copie delle foto. Le foto della pagina di accesso sono archiviate e servite da noi, non caricate direttamente dal sito di foto. Ogni visita carica un gruppo di quattro foto, circa 60-120 KB. I telefoni non le caricano affatto, perché lì il pannello delle foto non viene mostrato.
Sul fronte dell’accessibilità, ogni pulsante e link è alto almeno 44 pixel, così è facile toccarlo con il pollice. I campi di testo usano un testo da 16 pixel, che impedisce agli iPhone di ingrandire quando li tocchi. Tutto il testo raggiunge un rapporto di contrasto di 4.5:1 con lo sfondo, anche in modalità scura. Sul computer la pagina di accesso segue l’impostazione chiara o scura del tuo sistema, sul telefono è sempre scura.
La pagina di accesso è la parte più importante di un servizio di foto? No. Lo sono le tue foto. Ma è la porta d’ingresso, e dovrebbe sembrare che qualcuno tenga alla casa. Continueremo a migliorare entrambe.
Crediti fotografici
Le foto della pagina di accesso provengono da Unsplash e sono usate secondo la licenza Unsplash. L’attribuzione non è obbligatoria, ma questi fotografi hanno dato alla pagina il suo aspetto, quindi eccoli. Grazie.