--- title: "Vi har byggt om vår inloggningssida, och tekniken under den" description: "PixelUnion har en ny inloggningssida och en ny kontosida. Så här byggde vi om dem på Keycloak med open source-projektet Keycloakify, vad vi ändrade för integritet och tillgänglighet, och vilka avvägningar vi gjorde." url: "https://pixelunion.eu/sv/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"] --- Inloggningssidan är den enda skärm som alla PixelUnion-användare ser, oftast flera gånger i veckan. Hittills var det Keycloaks standardutseende med vår logotyp ovanpå. Det fungerade. Det såg också ut som företagsprogramvara från 2014, och det sa ingenting om var dina foton faktiskt finns. Så vi byggde om den, tillsammans med kontosidan bakom. ![Den nya inloggningssidan för PixelUnion](header.png) En kort påminnelse: sedan vår [flytt till Keycloak](/sv/blog/identity-provider-migration-keycloak/) är Keycloak vår identitetsleverantör (IdP). Den hanterar ditt lösenord, tvåfaktorsautentisering, passkeys och "Logga in med Google", så att Immich aldrig behöver göra det själv. Den delen är exakt densamma. Det som har ändrats är allt du ser medan det arbetet görs. ## Varför vi använde Keycloakify Keycloak-teman skrivs i FreeMarker, ett mallspråk för servern från Java-världen. Du kopierar Keycloaks mallar, redigerar dem, startar om servern och kontrollerar resultatet genom att klicka dig igenom det riktiga inloggningsflödet. För att byta logotyp räcker det. För en omdesign är det jobbigt, eftersom vissa sidor bara visas i ovanliga situationer: en sida som har gått ut, en andra autentiserare, ett Google-konto som matchar en befintlig e-postadress. [Keycloakify](https://www.keycloakify.dev) löser det. Det är ett open source-projekt, startat av Joseph Garrone, som låter dig skriva Keycloak-teman som React-komponenter. De kompileras till en vanlig tema-jar som Keycloak laddar som vilket annat plugin som helst. Startmallen publiceras under [codegouvfr](https://github.com/codegouvfr), den franska regeringens open source-organisation, vilket vi tycker är en fin detalj för ett europeiskt projekt. Källkoden finns på [GitHub](https://github.com/keycloakify/keycloakify). Det som sparade oss mest tid var Storybook. Keycloakify har exempeldata för varje Keycloak-sida, så vi kunde visa alla sidor, i alla lägen, utan en Keycloak-server igång. Det blev 112 sidlägen, som vi kontrollerade i dator- och mobilbredd, i ljust och mörkt läge. En regel höll vi strikt: vi ändrade bara markeringen och utseendet. Varje fältnamn, id och dolt fält är detsamma som på Keycloaks egna sidor. Keycloak vet inte att något har ändrats, och dess säkerhetslogik fungerar exakt som förut. Avvägningen bär vi själva. Varje sida vi har gjort om är nu kod som vi underhåller och måste kontrollera igen vid varje ny version av Keycloak. För de viktigaste sidorna tycker vi att det är värt det. ![Den nya kontosidan](account.png) ## Vad som ändrades för integritet och tillgänglighet En inloggningssida är ett konstigt ställe att snåla med integriteten på, så vi försökte låta bli. - **Inga typsnitt från tredje part.** Båda typsnitten ingår i temat och levereras av oss. Din webbläsare kontaktar inte Google Fonts eller något annat typsnitts-CDN (content delivery network). - **Egna kopior av fotona.** Fotona på inloggningssidan lagras och levereras av oss, de hämtas inte direkt från fotosajten. Varje besök laddar en uppsättning med fyra foton, ungefär 60 till 120 KB. Mobiler laddar dem inte alls, eftersom fotopanelen inte visas där. När det gäller tillgänglighet är varje knapp och länk minst 44 pixlar hög, så att den är lätt att träffa med tummen. Textfält använder 16 pixlar stor text, vilket gör att iPhone inte zoomar in när du trycker på dem. All text når ett kontrastförhållande på 4.5:1 mot bakgrunden, även i mörkt läge. På en dator följer inloggningssidan systemets ljusa eller mörka inställning, och på en mobil är den alltid mörk. Är inloggningssidan den viktigaste delen av en fototjänst? Nej. Det är dina foton. Men det är ytterdörren, och den ska se ut som att någon bryr sig om huset. Vi kommer att fortsätta förbättra båda. [Se vad vi erbjuder →](https://pixelunion.eu) ## Fotografer Fotona på inloggningssidan kommer från [Unsplash](https://unsplash.com) och används enligt [Unsplash-licensen](https://unsplash.com/license). Det krävs ingen namnangivelse, men de här fotograferna har gett sidan dess utseende, så här är de. Tack. - [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)