--- title: "Reconstruímos a nossa página de início de sessão, e a tecnologia por baixo dela" description: "O PixelUnion tem uma nova página de início de sessão e uma nova área de conta. Eis como as reconstruímos sobre o Keycloak com o projeto open source Keycloakify, o que mudámos em privacidade e acessibilidade, e os compromissos que aceitámos." url: "https://pixelunion.eu/pt/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"] --- A página de início de sessão é o único ecrã que todos os utilizadores do PixelUnion veem, normalmente várias vezes por semana. Até agora era o aspeto padrão do Keycloak com o nosso logótipo por cima. Funcionava. Também parecia software empresarial de 2014, e não te dizia nada sobre onde as tuas fotos estão realmente guardadas. Por isso reconstruímo-la, juntamente com a área de conta que está por trás. ![A nova página de início de sessão do PixelUnion](header.png) Um breve lembrete: desde a nossa [mudança para o Keycloak](/blog/identity-provider-migration-keycloak/), o Keycloak é o nosso fornecedor de identidade (IdP). Trata da tua palavra-passe, da autenticação de dois fatores, das chaves de acesso e de "Iniciar sessão com o Google", para que o Immich nunca tenha de o fazer. Essa parte mantém-se exatamente igual. O que mudou foi tudo o que vês enquanto esse trabalho acontece. ## Porque usámos o Keycloakify Os temas do Keycloak são escritos em FreeMarker, uma linguagem de templates do lado do servidor que vem do mundo Java. Copias os templates do Keycloak, editas, reinicias o servidor e verificas o resultado clicando no verdadeiro fluxo de início de sessão. Para trocar um logótipo, chega. Para um redesign é penoso, porque algumas páginas só aparecem em situações raras: uma página expirada, um segundo autenticador, uma conta Google que corresponde a um email já existente. O [Keycloakify](https://www.keycloakify.dev) resolve isso. É um projeto open source, iniciado por Joseph Garrone, que permite escrever temas do Keycloak como componentes React. São compilados num ficheiro jar de tema normal, que o Keycloak carrega como qualquer outro plugin. O seu template inicial é publicado em [codegouvfr](https://github.com/codegouvfr), a organização open source do governo francês, o que achamos um belo pormenor para um projeto europeu. O código-fonte está no [GitHub](https://github.com/keycloakify/keycloakify). O que nos poupou mais tempo foi o Storybook. O Keycloakify inclui dados de exemplo para cada página do Keycloak, por isso conseguimos mostrar todas, em todos os estados, sem um servidor Keycloak a correr. Chegámos a 112 estados de página, que verificámos em largura de computador e de telemóvel, em modo claro e escuro. Mantivemos uma regra rigorosa: só mudámos a marcação e o estilo. Cada nome de campo, id e campo oculto é igual ao das páginas do próprio Keycloak. O Keycloak não sabe que algo mudou, e a sua lógica de segurança funciona exatamente como antes. O compromisso fica do nosso lado. Cada página que redesenhámos é agora código que mantemos, e que temos de voltar a verificar a cada nova versão do Keycloak. Para as páginas mais importantes, achamos que vale a pena. ![A nova área de conta](account.png) ## O que mudou em privacidade e acessibilidade Uma página de início de sessão é um sítio estranho para cortar na privacidade, por isso tentámos não o fazer. - **Sem tipos de letra de terceiros.** Os dois tipos de letra vêm incluídos no tema e são servidos por nós. O teu navegador não contacta o Google Fonts nem qualquer outro CDN de tipos de letra (rede de distribuição de conteúdos). - **As nossas próprias cópias das fotos.** As fotos da página de início de sessão são guardadas e servidas por nós, não carregadas diretamente do site de fotos. Cada visita carrega um conjunto de quatro, cerca de 60 a 120 KB. Os telemóveis não as carregam de todo, porque o painel de fotos não é mostrado lá. Quanto à acessibilidade, cada botão e cada ligação tem pelo menos 44 píxeis de altura, para ser fácil de tocar com o polegar. Os campos de texto usam texto de 16 píxeis, o que impede o iPhone de fazer zoom quando lhes tocas. Todo o texto atinge uma relação de contraste de 4.5:1 com o fundo, também no modo escuro. No computador, a página segue a definição clara ou escura do teu sistema, e no telemóvel é sempre escura. Será a página de início de sessão a parte mais importante de um serviço de fotos? Não. São as tuas fotos. Mas é a porta de entrada, e deve parecer que alguém cuida da casa. Vamos continuar a melhorar as duas. [Vê o que oferecemos →](https://pixelunion.eu) ## Créditos das fotos As fotos da página de início de sessão vêm do [Unsplash](https://unsplash.com) e são usadas ao abrigo da [licença Unsplash](https://unsplash.com/license). A atribuição não é obrigatória, mas estes fotógrafos deram à página o aspeto que tem, por isso aqui estão. Obrigado. - [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)