Reconstruímos a nossa página de início de sessão, e a tecnologia por baixo dela
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.
Um breve lembrete: desde a nossa mudança para o 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 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, 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.
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.
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.
Créditos das fotos
As fotos da página de início de sessão vêm do Unsplash e são usadas ao abrigo da licença Unsplash. A atribuição não é obrigatória, mas estes fotógrafos deram à página o aspeto que tem, por isso aqui estão. Obrigado.