Przebudowaliśmy naszą stronę logowania, i technologię pod nią
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ą.
Krótkie przypomnienie: od naszej przeprowadzki na Keycloaka 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 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, organizacji open source francuskiego rządu, co uważamy za miły szczegół jak na europejski projekt. Kod źródłowy jest na GitHubie.
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.
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.
Autorzy zdjęć
Zdjęcia na stronie logowania pochodzą z Unsplash i są używane na licencji Unsplash. Podanie autora nie jest wymagane, ale to ci fotografowie nadali stronie jej wygląd, więc oto oni. Dziękujemy.