--- title: "Przebudowaliśmy naszą stronę logowania, i technologię pod nią" description: "PixelUnion ma nową stronę logowania i nowy panel konta. Oto jak przebudowaliśmy je na Keycloaku z pomocą projektu open source Keycloakify, co zmieniliśmy pod kątem prywatności i dostępności, i na jakie kompromisy się zgodziliśmy." url: "https://pixelunion.eu/pl/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"] --- Strona logowania to jedyny ekran, który widzi każdy użytkownik PixelUnion, zwykle kilka razy w tygodniu. Do tej pory był to standardowy wygląd Keycloaka z naszym logo na górze. Działało. Wyglądało też jak oprogramowanie firmowe z 2014 roku i nic nie mówiło o tym, gdzie naprawdę są twoje zdjęcia. Dlatego przebudowaliśmy ją, razem z panelem konta, który jest za nią. ![Nowa strona logowania PixelUnion](header.png) Krótkie przypomnienie: od naszej [przeprowadzki na Keycloaka](/pl/blog/identity-provider-migration-keycloak/) Keycloak jest naszym dostawcą tożsamości (IdP). Obsługuje twoje hasło, uwierzytelnianie dwuskładnikowe, klucze dostępu i "Zaloguj się przez Google", żeby Immich nigdy nie musiał robić tego sam. Ta część zostaje dokładnie taka sama. Zmieniło się wszystko, co widzisz, kiedy ta praca się odbywa. ## Dlaczego użyliśmy Keycloakify Motywy Keycloaka pisze się w FreeMarkerze, serwerowym języku szablonów ze świata Javy. Kopiujesz szablony Keycloaka, edytujesz je, restartujesz serwer i sprawdzasz efekt, przeklikując się przez prawdziwy proces logowania. Do podmiany logo to wystarczy. Przy przeprojektowaniu jest to męczące, bo niektóre strony pojawiają się tylko w rzadkich sytuacjach: wygasła strona, drugi uwierzytelniacz, konto Google pasujące do istniejącego adresu e-mail. [Keycloakify](https://www.keycloakify.dev) rozwiązuje ten problem. To projekt open source, zapoczątkowany przez Josepha Garrone'a, który pozwala pisać motywy Keycloaka jako komponenty React. Są one kompilowane do zwykłego pliku jar z motywem, który Keycloak ładuje jak każdą inną wtyczkę. Jego szablon startowy jest publikowany w [codegouvfr](https://github.com/codegouvfr), organizacji open source francuskiego rządu, co uważamy za miły szczegół jak na europejski projekt. Kod źródłowy jest na [GitHubie](https://github.com/keycloakify/keycloakify). Najwięcej czasu zaoszczędził nam Storybook. Keycloakify zawiera przykładowe dane dla każdej strony Keycloaka, więc mogliśmy wyświetlić je wszystkie, w każdym stanie, bez działającego serwera Keycloak. Wyszło 112 stanów stron, które sprawdziliśmy w szerokości komputera i telefonu, w trybie jasnym i ciemnym. Trzymaliśmy się jednej ścisłej zasady: zmieniliśmy tylko znaczniki i wygląd. Każda nazwa pola, id i ukryte pole jest takie samo jak na stronach samego Keycloaka. Keycloak nie wie, że cokolwiek się zmieniło, a jego logika bezpieczeństwa działa dokładnie tak jak wcześniej. Koszt tego kompromisu ponosimy my. Każda przeprojektowana strona to teraz kod, który utrzymujemy i który musimy ponownie sprawdzać przy każdej nowej wersji Keycloaka. Dla najważniejszych stron uważamy, że warto. ![Nowy panel konta](account.png) ## Co zmieniło się w prywatności i dostępności Strona logowania to dziwne miejsce na oszczędzanie na prywatności, więc staraliśmy się tego nie robić. - **Bez czcionek z zewnątrz.** Oba kroje pisma są wbudowane w motyw i serwowane przez nas. Twoja przeglądarka nie łączy się z Google Fonts ani z żadnym innym CDN czcionek (siecią dostarczania treści). - **Własne kopie zdjęć.** Zdjęcia na stronie logowania przechowujemy i serwujemy sami, nie są ładowane bezpośrednio ze strony ze zdjęciami. Każda wizyta ładuje jeden zestaw czterech zdjęć, około 60 do 120 KB. Telefony w ogóle ich nie ładują, bo panel ze zdjęciami nie jest tam wyświetlany. Jeśli chodzi o dostępność, każdy przycisk i link ma co najmniej 44 piksele wysokości, żeby łatwo było trafić w niego kciukiem. Pola tekstowe używają tekstu o wielkości 16 pikseli, dzięki czemu iPhone nie powiększa ekranu po ich dotknięciu. Cały tekst osiąga współczynnik kontrastu 4.5:1 względem tła, także w trybie ciemnym. Na komputerze strona logowania stosuje jasne lub ciemne ustawienie twojego systemu, a na telefonie jest zawsze ciemna. Czy strona logowania to najważniejsza część usługi ze zdjęciami? Nie. Najważniejsze są twoje zdjęcia. Ale to drzwi wejściowe, i powinny wyglądać tak, jakby komuś zależało na domu. Będziemy dalej ulepszać jedno i drugie. [Zobacz, co oferujemy →](https://pixelunion.eu) ## Autorzy zdjęć Zdjęcia na stronie logowania pochodzą z [Unsplash](https://unsplash.com) i są używane na [licencji Unsplash](https://unsplash.com/license). Podanie autora nie jest wymagane, ale to ci fotografowie nadali stronie jej wygląd, więc oto oni. Dziękujemy. - [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)