Keycloak: Twój motyw jest gotowy do edycji

Ta dokumentacja jest częścią przewodnika Dostosuj wygląd. Pełny przewodnik znajdziesz tutaj: Łatwo dostosuj strony logowania, konsolę konta oraz e-maile Keycloak na Stackhero: ustaw swoje kolory, logo, teksty, a nawet twórz w pełni własne motywy za pomocą wbudowanego edytora online..

👋 Witamy w dokumentacji Stackhero!

Stackhero oferuje usługę Keycloak cloud, która umożliwia szybkie wdrożenie gotowego do produkcji dostawcy tożsamości w zaledwie 2 minuty:

• Nieograniczona liczba użytkowników, realms i klientów
• Obsługa OpenID Connect, OAuth 2.0, SAML 2.0, logowania społecznościowego, federacji LDAP oraz Active Directory
• Własna nazwa domeny z wbudowanym HTTPS dla bezpiecznego dostępu (na przykład https://login.twoja-firma.com)
• Własne motywy: łatwo dostosuj strony logowania, konsolę konta i wiadomości email za pomocą wbudowanego edytora online
• Dedykowany serwer email z obsługą SPF, DKIM i DMARC – potwierdzenia konta i resetowanie hasła obsługiwane są automatycznie
• Wbudowana baza danych PostgreSQL, z konsolą administracyjną dostępną na osobnym, zamykanym porcie
• Aktualizacje jednym kliknięciem pozwalają utrzymać system zawsze aktualny bez ręcznej ingerencji

Skup się na rozwoju, nie na konfiguracji: możesz przetestować rozwiązanie Keycloak cloud od Stackhero w mniej niż 5 minut.

Otwórz themes/, a znajdziesz katalog default/. To Twój aktywny motyw, już używany przez instancję Keycloak. Nie musisz nic wybierać: po prostu edytuj pliki i obserwuj natychmiastowe efekty.

Nie musisz znać się wcześniej na motywach Keycloak. Każdy plik zawiera już najczęściej zmieniane ustawienia, pokazując aktualną wartość Keycloak jako zakomentowany przykład. Aby zaktualizować wartość, usuń znak komentarza, zmień wartość i zapisz.

Jeśli linia pozostanie zakomentowana, Keycloak użyje wartości domyślnej. Dzięki temu Twoja usługa zawsze zachowuje standardowe zachowanie Keycloak, nawet po aktualizacjach.

Aktualizacja logo

Otwórz default/login/resources/img/. W środku zobaczysz dwa obrazy aktualnie używane na stronie logowania. Prześlij własne logo, używając tej samej nazwy pliku, keycloak-logo-text.svg, i odśwież stronę logowania za pomocą Ctrl+F5 (Cmd+Shift+R na macOS).

To wszystko. Nie musisz edytować plików ani restartować usługi: zmiany są widoczne od razu po zapisaniu. Aby zmienić tło, zaktualizuj keycloak-bg-darken.svg w tym samym folderze.

Jeśli wolisz użyć innych nazw plików, zaktualizuj odwołania w default/login/resources/css/stackhero.css w sekcji "Your logo".

Ustawianie kolorów

W pliku stackhero.css znajdziesz zmienne już wpisane z aktualnymi wartościami:

:root {
  /* ---------- Colors ---------- */
  /* The buttons */
  /* --pf-v5-global--primary-color--100: #06c; */
  /* The buttons, while hovered */
  /* --pf-v5-global--primary-color--200: #004080; */
  /* The links */
  /* --pf-v5-global--link--Color: #06c; */
  /* The colored line on top of the login box */
  /* --keycloak-card-top-color: #06c; */

Aby zastosować zmianę, usuń znaki komentarza, ustaw swój kolor, zapisz i odśwież stronę. To wszystko.

Podczas pracy: Przeglądarka buforuje CSS motywu, obrazy i skrypty przez godzinę. Podczas testowania zawsze odświeżaj stronę za pomocą Ctrl+F5, aby zobaczyć najnowsze zmiany. Twoi użytkownicy zobaczą aktualizacje w ciągu godziny.

Masz pełną kontrolę: plik to zwykły CSS i ładuje się jako ostatni, więc możesz nadpisać dowolny styl. Użyj narzędzi deweloperskich przeglądarki (F12), aby sprawdzić elementy. Keycloak 26 korzysta z PatternFly design system, więc większość zmiennych kolorów ma nazwę --pf-v5-global--* i można je nadpisać w :root.

Ustawianie nazwy firmy

Nie musisz edytować motywu. W konsoli administracyjnej otwórz Realm settings > General i ustaw Display name. Ta nazwa pojawi się na stronach logowania i w e-mailach.

Zmiana tekstów w wielu językach

Możesz zmieniać teksty bez edycji CSS czy HTML. W pliku default/login/messages/messages_en.properties znajdziesz wszystkie teksty formularza logowania z domyślnym brzmieniem. Aby zmienić linię, usuń #, wpisz własny tekst i zapisz:

loginAccountTitle=Sign in to Acme
doLogIn=Sign in
doForgotPassword=I forgot my password

Dodaj pliki takie jak messages_fr.properties dla francuskiego czy messages_de.properties dla niemieckiego, a następnie włącz te języki w konsoli administracyjnej w Realm settings > Localization.

Wskazówka: Zakładka Localization posiada także sekcję Realm overrides, która pozwala zmieniać teksty bezpośrednio w konsoli – bez edycji plików i restartu. Wybierz metodę najlepiej pasującą do Twojego procesu pracy.

Personalizacja e-maili

Keycloak wysyła e-maile dotyczące potwierdzenia adresu, resetowania hasła oraz zaproszeń użytkowników. W pliku default/email/messages/messages_en.properties znajdziesz standardowe tematy i treści gotowe do edycji:

emailVerificationSubject=Confirm your Acme account
passwordResetSubject=Reset your Acme password

Podczas edycji treści e-maili pamiętaj:

• Zachowaj znaczniki {0}, {1}, {2} (Keycloak uzupełni je linkiem, nazwą wyświetlaną i opóźnieniem).
• Apostrofy należy zapisywać podwójnie (don''t).

Aby nadpisać HTML e-maila, skopiuj wybrany szablon z Keycloak base email theme do default/email/html/, a następnie edytuj swoją kopię.

Stackhero konfiguruje wysyłkę e-maili za Ciebie, z ustawionymi SPF, DKIM i DMARC. Skonfiguruj to w Realm settings > Email używając hosta i portu podanych na stronie Twojej usługi.

Jeśli musisz zresetować motyw

Jeśli coś pójdzie nie tak, możesz usunąć cały katalog default i zrestartować usługę. Stackhero utworzy nowy domyślny motyw, przywracając standardowy wygląd Keycloak.

Twoje realmy, użytkownicy i klienci są przechowywani w bazie danych i pozostają nienaruszone.