--- title: "Abbiamo ricostruito la nostra pagina di accesso, e la tecnologia che c'è sotto" description: "PixelUnion ha una nuova pagina di accesso e una nuova area account. Ecco come le abbiamo ricostruite su Keycloak con il progetto open source Keycloakify, cosa abbiamo cambiato per privacy e accessibilità, e quali compromessi abbiamo accettato." url: "https://pixelunion.eu/it/blog/2026/10/new-login-page/" date: "2026-10-02" author: "Marc" categories: ["deep-dive","development"] tags: ["Keycloak","Keycloakify","Identity Provider","Open Source","Privacy","Accessibility"] --- 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. ![La nuova pagina di accesso di PixelUnion](header.png) Un breve promemoria: dal nostro [passaggio a Keycloak](/it/blog/identity-provider-migration-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](https://www.keycloakify.dev) 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](https://github.com/codegouvfr), l'organizzazione open source del governo francese, un bel dettaglio per un progetto europeo. Il codice sorgente è su [GitHub](https://github.com/keycloakify/keycloakify). 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. ![La nuova area account](account.png) ## 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. [Scopri cosa offriamo →](https://pixelunion.eu) ## Crediti fotografici Le foto della pagina di accesso provengono da [Unsplash](https://unsplash.com) e sono usate secondo la [licenza Unsplash](https://unsplash.com/license). L'attribuzione non è obbligatoria, ma questi fotografi hanno dato alla pagina il suo aspetto, quindi eccoli. Grazie. - [Tim Mossholder](https://unsplash.com/photos/Gsl6YSpbc9g) - [Wagner Santos](https://unsplash.com/photos/DDLWZN03tkw) - [Leif Niemczik](https://unsplash.com/photos/xQQShnDWY-Q) - [Saara Sanamo](https://unsplash.com/photos/s_WRfcC0CBM) - [Nate](https://unsplash.com/photos/dHDUFf9ggb4) - [Nathan Dumlao](https://unsplash.com/photos/As8zq82LBpw) - [Daniel J. Schwarz](https://unsplash.com/photos/YtY724tdl7Y) - [Kevin Schmid](https://unsplash.com/photos/eIdHV6cwl9s) - [Ardian Lumi](https://unsplash.com/photos/72uqWSqAiWg) - [veronika](https://unsplash.com/photos/OwEC3vvEopU) - [Wim van 't Einde](https://unsplash.com/photos/bdDUK0q0Hw8) - [Annie Spratt](https://unsplash.com/photos/LyU1BVDAGNs) - [Jessica Hearn](https://unsplash.com/photos/M4eOZ3j5Q4g) - [Moustafa Neamatalla](https://unsplash.com/photos/peqAQReOaYI) - [Mauro Fossati](https://unsplash.com/photos/fzPCw717sPs) - [Johannes Schenk](https://unsplash.com/photos/ar2-gHCM_-g) - [Elijah Cobb](https://unsplash.com/photos/JLYw4IkR6-Y) - [Alex Tonoyan](https://unsplash.com/photos/B8RYxHB_fFw) - [Alejandra Ponce](https://unsplash.com/photos/M9E78hJWKlU) - [Max Bürgi](https://unsplash.com/photos/jKuQsF67I14) - [Kevin Schmid](https://unsplash.com/photos/Mta8r0bxhbo) - [Ale Romo](https://unsplash.com/photos/IJTqEElHBXk) - [Jael Rodriguez](https://unsplash.com/photos/L36zkjYTp14) - [Ross Sneddon](https://unsplash.com/photos/iExLjkqFf68)