Prispôsobenie prihlasovacej stránky pre Keycloak
1. Prehľad
Keycloak je autorizačný server tretej strany, ktorý sa používa na správu požiadaviek na autentizáciu a autorizáciu našich webových alebo mobilných aplikácií. Na prihlásenie používateľov v mene našej aplikácie používa predvolenú prihlasovaciu stránku.
V tejto príručke sa zameriame na ako môžeme prispôsobiť prihlasovaciu stránku pre náš server Keycloak aby sme to mohli mať iný vzhľad a cítenie. Uvidíme to ako pre samostatné, tak aj pre zabudované servery.
Aby sme to dosiahli, budeme stavať na prispôsobení tém pre výukový program Keycloak.
2. Prispôsobenie samostatného servera Keycloak
Pokračovanie v našom príklade zvyk tému, pozrime sa najskôr na samostatný server.
2.1. Nastavenia správcovskej konzoly
Ak chcete spustiť server, prejdime do adresára, kde je uložená naša distribúcia Keycloak, a spustime tento príkaz z jeho adresára kôš priečinok:
./standalone.sh -Djboss.socket.binding.port-offset = 100Po spustení servera stačí aktualizovať stránku, aby sa naše zmeny prejavili, a to vďaka zmenám, ktoré sme v serveri predtým vykonali standalone.xml.
Teraz vytvorme nový priečinok s názvom Prihlásiť sa, vnútri témy / vlastné adresár. Kvôli zjednodušeniu najskôr skopírujeme všetok obsah témy / keycloak / prihlásenie adresár tu. Toto je predvolený motív prihlasovacej stránky.
Potom prejdeme do administračnej konzoly a zadáme initial1/zaq1! QAZ poverenia a prejdite na stránku Témy karta pre našu ríšu:
Vyberieme zvyk pre Prihlasovacia téma a uložte naše zmeny.
S touto sadou teraz môžeme vyskúšať niektoré prispôsobenia. Ale predtým sa pozrime na predvolenú prihlasovaciu stránku:
2.2. Pridávanie prispôsobení
Teraz si povedzme, že musíme zmeniť pozadie. Za to otvoríme login / resources / css / login.css a zmeňte definíciu triedy:
.login-pf body {pozadie: # 39a5dc; veľkosť pozadia: obal; výška: 100%; }Ak chcete vidieť efekt, obnovme stránku:
Ďalej skúsime zmeniť štítky používateľského mena a hesla.
Aby sme to dosiahli, musíme vytvoriť nový súbor, messages_en.properties v téma / prihlásenie / správy priečinok. Tento súbor prepíše predvolený balík správ, ktorý sa používa pre dané vlastnosti:
usernameOrEmail = Zadajte užívateľské meno: heslo = Zadajte heslo:Ak to chcete otestovať, znova obnovte stránku:
Predpokladajme, že chceme zmeniť celý HTML alebo jeho časť, budeme musieť prepísať šablóny voľných značiek, ktoré Keycloak predvolene používa. Predvolené šablóny pre prihlasovaciu stránku sú uchované v základňa / prihlásenie adresár.
Povedzme, že chceme VITAJTE V BAELDUNGU ktoré sa majú zobraziť namiesto SPRINGBOOTKEYCLOAK.
Na to budeme musieť kopírovať base / login / template.ftl k nášmu vlastné / prihlásenie priečinok.
V skopírovanom súbore zmeňte riadok:
$ {kcSanitize (msg ("loginTitleHtml", (realm.displayNameHtml! ''))))? no_esc} Komu:
VITAJTE V BAELDUNGU Na prihlasovacej stránke by sa teraz namiesto názvu sféry zobrazovala naša vlastná správa.
3. Prispôsobenie zabudovaného servera Keycloak
Prvým krokom je pridanie všetkých artefaktov, ktoré sme zmenili pre samostatný server, do zdrojového kódu nášho zabudovaného autorizačného servera.
Vytvorme teda nový priečinok Prihlásiť sa vo vnútri src / main / resources / themes / custom s týmto obsahom:
Všetko, čo musíme urobiť, je pridať inštrukciu do nášho definičného súboru ríše, baeldung-realm.json tak že zvyk sa používa pre náš typ témy prihlásenia:
"loginTheme": "custom",Už sme presmerovaní na zvyk adresár tém, aby náš server vedel, odkiaľ má vyzdvihnúť súbory tém pre prihlasovaciu stránku.
Pre testovanie sa poďme prihlásiť na prihlasovaciu stránku:
Ako vidíme, tu sa zobrazujú všetky prispôsobenia vykonané predtým pre samostatný server, ako napríklad pozadie, názvy štítkov a názov stránky.
4. Obchádzanie prihlasovacej stránky Keycloak
Technicky môžeme prihlasovaciu stránku Keycloak úplne obísť pomocou toku hesla alebo prístupu s priamym prístupom. Avšak dôrazne sa odporúča, aby sa tento typ grantu nepoužíval vôbec.
V takom prípade neexistuje žiadny sprostredkovateľský krok, ktorým je získanie autorizačného kódu a výmena potom získanie prístupového tokenu. Namiesto toho môžeme priamo odoslať poverenia používateľa prostredníctvom volania REST API a ako odpoveď získať prístupový token.
To efektívne znamená, že môžeme pomocou našej prihlasovacej stránky zhromaždiť ID používateľa a heslo a spolu s ID klienta a tajomstvom ho odoslať spoločnosti Keycloak POST na jeho token koncový bod.
Ale opäť, pretože Keycloak ponúka bohatú sadu možností prihlásenia - ako napríklad zapamätať si ma, resetovať heslo a MFA - aby sme vymenovali aspoň niektoré, nie je dôvod obchádzať ich.
5. Záver
V tomto návode naučili sme sa, ako zmeniť predvolenú prihlasovaciu stránku pre Keycloak a pridať naše prispôsobenia.
Videli sme to pre samostatnú aj vloženú inštanciu.
Na záver sme si v krátkosti povedali, ako úplne obísť prihlasovaciu stránku Keycloak, a prečo tak neurobiť.
Ako vždy, zdrojový kód je k dispozícii na GitHub. Pre samostatný server je to v tutoriáloch GitHub a pre vloženú inštanciu v OAuth GitHub.
