A bejelentkezési oldal testreszabása a Keycloak számára

1. Áttekintés

A Keycloak egy harmadik féltől származó engedélyezési szerver, amelyet webes vagy mobilalkalmazásaink hitelesítési és hitelesítési követelményeinek kezelésére használnak. Alapértelmezett bejelentkezési oldalt használ a felhasználók bejelentkezéséhez alkalmazásunk nevében.

Ebben az oktatóanyagban a következőkre fogunk összpontosítani hogyan tudjuk testre szabni a bejelentkezési oldalt a Keycloak szerverhez hogy más kinézetet és érzést tudjunk érezni benne. Látni fogjuk ezt mind az önálló, mind a beágyazott szerverek esetében.

A témák testreszabására építünk a Keycloak oktatóprogram számára.

2. Önálló Keycloak kiszolgáló testreszabása

Folytatva a egyedi téma, nézzük meg először az önálló szervert.

2.1. A Kezelői konzol beállításai

A kiszolgáló indításához lépjünk át abba a könyvtárba, ahol a Keycloak disztribúciónkat tároljuk, és futtassuk le ezt a parancsot onnan kuka mappa:

./standalone.sh -Djboss.socket.binding.port-offset = 100

A kiszolgáló elindítása után csak frissítenünk kell az oldalt, hogy a változtatásaink tükröződjenek, a korábban a önálló.xml.

Most hozzunk létre egy új nevű mappát Belépés, benne témák / egyéni Könyvtár. A dolgok egyszerűségének érdekében először átmásoljuk a themes / kulcstartó / login könyvtárat itt. Ez az alapértelmezett bejelentkezési téma.

Ezután megyünk az adminisztrációs konzolhoz, írja be a kezdő1/zaq1! QAZ bizonylatokat, és menjen a Témák fül a birodalmunk számára:

Kiválasztjuk egyedi a Bejelentkezés téma és mentse a változásainkat.

Ezzel a készlettel most kipróbálhatunk néhány testreszabást. De előtte nézzük meg az alapértelmezett bejelentkezési oldalt:

2.2. Testreszabások hozzáadása

Most tegyük fel, hogy meg kell változtatnunk a hátteret. Erre nyitunk login / resources / css / login.css és változtassa meg az osztály definícióját:

.login-pf body {háttér: # 39a5dc; háttérméret: borító; magasság: 100%; }

A hatás megtekintéséhez frissítsük az oldalt:

Ezután próbáljuk meg megváltoztatni a felhasználónév és a jelszó címkéit.

Ennek eléréséhez létre kell hoznunk egy új fájlt, üzenetek_hu.tulajdonságok ban,-ben téma / bejelentkezés / üzenetek mappába. Ez a fájl felülbírálja az adott tulajdonságokhoz használt alapértelmezett üzenetcsomagot:

usernameOrEmail = Felhasználónév megadása: jelszó = Jelszó megadása:

A teszteléshez frissítse újra az oldalt:

Tegyük fel, hogy a teljes HTML-t vagy annak egy részét meg akarjuk változtatni, felül kell írnunk azokat a freemarker-sablonokat, amelyeket a Keycloak alapértelmezés szerint használ. A bejelentkezési oldal alapértelmezett sablonjait a alap / bejelentkezés Könyvtár.

Mondjuk akarjuk ÜDVÖZÖLJÜK a BAELDUNG-nál helyett kell megjeleníteni SPRINGBOOTKEYCLOAK.

Ehhez le kell másolnunk base / login / template.ftl a miénknek custom / login mappába.

A másolt fájlban módosítsa a sort:

 $ {kcSanitize (msg ("loginTitleHtml", (realm.displayNameHtml! '')))? no_esc} 

Nak nek:

 ÜDVÖZÖLJÜK a BAELDUNG-nál 

A bejelentkezési oldalon az egyéni üzenet jelenik meg a tartomány neve helyett.

3. Beágyazott Keycloak kiszolgáló testreszabása

Az első lépés az, hogy hozzáadjuk az önálló kiszolgálóhoz módosított összes műterméket a beágyazott hitelesítési szerverünk forráskódjához.

Hozzunk létre egy új mappát Belépés belül src / main / resources / themes / custom a következő tartalommal:

Most már csak annyit kell tennünk, hogy adjunk hozzá utasításokat a tartomány definíciós fájlunkba, baeldung-realm.json úgy hogy egyedi a bejelentkezési téma típusunkhoz használatos:

"loginTheme": "custom",

Már átirányítottuk a egyedi téma könyvtár, hogy szerverünk tudja, honnan vegye fel a bejelentkezési oldal témájú fájljait.

A teszteléshez nyissuk meg a bejelentkezési oldalt:

Mint láthatjuk, itt jelennek meg az önálló kiszolgáló minden korábban elvégzett testreszabása, például a háttér, a címke neve és az oldal címe.

4. A Keycloak bejelentkezési oldalának megkerülése

Technikailag teljes mértékben megkerülhetjük a Keycloak bejelentkezési oldalát a jelszó vagy a közvetlen hozzáférés megadásával. Azonban, erősen ajánlott, hogy ezt a támogatási típust egyáltalán ne használja.

Ebben az esetben nincs közbenső lépés az engedélyezési kód megszerzéséhez, majd a hozzáférési token cserébe történő megkapásához. Ehelyett közvetlenül elküldhetjük a felhasználói hitelesítő adatokat egy REST API-híváson keresztül, és válaszként megkaphatjuk a hozzáférési jogkivonatot.

Ez gyakorlatilag azt jelenti, hogy a bejelentkezési oldalunkon keresztül összegyűjthetjük a felhasználó azonosítóját és jelszavát, és az ügyfél azonosítójával és titkával együtt elküldhetjük a Keycloaknak POST-ban a jelképes végpont.

De ismételten, mivel a Keycloak a bejelentkezési lehetőségek gazdag funkcióival rendelkezik - például emlékezzen rám, a jelszó visszaállítására és az MFA-ra -, hogy csak néhányat említsünk, kevés oka van annak megkerülésére.

5. Következtetés

Ebben az oktatóanyagban megtanultuk, hogyan lehet megváltoztatni a Keycloak alapértelmezett bejelentkezési oldalát, és hogyan adhatjuk hozzá testreszabásainkat.

Ezt láttuk mind önálló, mind beágyazott példány esetében.

Végül röviden áttekintettük, hogyan lehet teljesen megkerülni Keycloak bejelentkezési oldalát, és miért ne tennénk ezt.

Mint mindig, a forráskód is elérhető a GitHubon. Az önálló kiszolgálón a GitHub oktatóanyagoknál, a beágyazott példánynál pedig az OAuth GitHubon található.