Hemos reconstruido nuestra página de inicio de sesión, y la tecnología que hay debajo
La página de inicio de sesión es la única pantalla que ve todo usuario de PixelUnion, normalmente varias veces por semana. Hasta ahora era el aspecto estándar de Keycloak con nuestro logo encima. Funcionaba. También parecía software empresarial de 2014, y no te decía nada sobre dónde están realmente tus fotos. Así que la hemos reconstruido, junto con el panel de cuenta que hay detrás.
Un breve recordatorio: desde nuestro cambio a Keycloak, Keycloak es nuestro proveedor de identidad (IdP). Se encarga de tu contraseña, la autenticación en dos pasos, las llaves de acceso y “Iniciar sesión con Google”, para que Immich nunca tenga que hacerlo. Esa parte sigue exactamente igual. Lo que ha cambiado es todo lo que ves mientras hace ese trabajo.
Por qué usamos Keycloakify
Los temas de Keycloak se escriben en FreeMarker, un lenguaje de plantillas del lado del servidor que viene del mundo Java. Copias las plantillas de Keycloak, las editas, reinicias el servidor y compruebas el resultado recorriendo el flujo real de inicio de sesión. Para cambiar un logo, sirve. Para un rediseño es un suplicio, porque algunas páginas solo aparecen en situaciones poco frecuentes: una página caducada, un segundo autenticador, una cuenta de Google que coincide con un correo electrónico existente.
Keycloakify lo resuelve. Es un proyecto de código abierto, iniciado por Joseph Garrone, que permite escribir temas de Keycloak como componentes de React. Se compilan en un archivo jar de tema normal, que Keycloak carga como cualquier otro plugin. Su plantilla de inicio se publica en codegouvfr, la organización de código abierto del Gobierno francés, algo que nos parece un buen detalle para un proyecto europeo. El código fuente está en GitHub.
Lo que más tiempo nos ahorró fue Storybook. Keycloakify incluye datos de ejemplo para cada página de Keycloak, así que pudimos mostrarlas todas, en todos sus estados, sin un servidor de Keycloak en marcha. Al final fueron 112 estados de página, que revisamos en ancho de escritorio y de móvil, en modo claro y oscuro.
Mantuvimos una regla estricta: solo cambiamos el marcado y el diseño. Cada nombre de campo, id y campo oculto es igual que en las páginas del propio Keycloak. Keycloak no sabe que algo ha cambiado, y su lógica de seguridad funciona exactamente como antes. La contrapartida la asumimos nosotros. Cada página que hemos rediseñado es ahora código que mantenemos, y que tenemos que volver a revisar con cada nueva versión de Keycloak. Para las páginas más importantes, creemos que merece la pena.
Qué ha cambiado en privacidad y accesibilidad
Una página de inicio de sesión es un lugar extraño para recortar en privacidad, así que intentamos no hacerlo.
- Sin fuentes de terceros. Las dos tipografías van incluidas en el tema y las servimos nosotros. Tu navegador no contacta con Google Fonts ni con ningún otro CDN de fuentes (red de distribución de contenidos).
- Nuestras propias copias de las fotos. Las fotos de la página de inicio de sesión las guardamos y servimos nosotros, no se cargan directamente desde la web de fotos. Cada visita carga un grupo de cuatro, unos 60 a 120 KB. Los móviles no las cargan, porque allí no se muestra el panel de fotos.
En cuanto a accesibilidad, cada botón y cada enlace mide al menos 44 píxeles de alto, para que sea fácil tocarlo con el pulgar. Los campos de texto usan texto de 16 píxeles, lo que evita que el iPhone haga zoom al tocarlos. Todo el texto alcanza una relación de contraste de 4.5:1 con su fondo, también en modo oscuro. En el ordenador, la página sigue el ajuste claro u oscuro de tu sistema, y en el móvil siempre es oscura.
¿Es la página de inicio de sesión lo más importante de un servicio de fotos? No. Lo son tus fotos. Pero es la puerta de entrada, y debería parecer que a alguien le importa la casa. Vamos a seguir mejorando las dos cosas.
Créditos de las fotos
Las fotos de la página de inicio de sesión proceden de Unsplash y se usan bajo la licencia de Unsplash. La atribución no es obligatoria, pero estos fotógrafos le han dado a la página el aspecto que tiene, así que aquí están. Gracias.