Prilagođavanje stranice za prijavu za Keycloak

1. Pregled

Keycloak je nezavisni poslužitelj za autorizaciju koji se koristi za upravljanje provjerom autentičnosti i autorizacijom naših web ili mobilnih aplikacija. Koristi zadanu stranicu za prijavu za prijavu korisnika u ime naše aplikacije.

U ovom uputstvu usredotočit ćemo se na kako možemo prilagoditi stranicu za prijavu za naš poslužitelj Keycloak kako bismo mogli imati drugačiji izgled i osjećaj za to. To ćemo vidjeti i za samostalne i za ugrađene poslužitelje.

Nadgradit ćemo se na prilagođavanje tema za tutorijal Keycloak-a da to učini.

2. Prilagođavanje samostalnog poslužitelja Keycloak-a

Nastavljajući s našim primjerom prilagođen tema, prvo da vidimo samostalni poslužitelj.

2.1. Postavke Admin Console

Da bismo pokrenuli poslužitelj, idemo do direktorija u kojem se nalazi naša distribucija Keycloak-a i pokrenimo ovu naredbu iz njegove kanta za smeće mapa:

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

Jednom kada se poslužitelj pokrene, trebamo samo osvježiti stranicu da bi se vidjele naše promjene, zahvaljujući izmjenama koje smo prethodno napravili na samostalni.xml.

Ajmo sada stvoriti novu mapu, nazvanu prijaviti se, unutar teme / običaj imenik. Da bi stvari bile jednostavne, prvo ćemo kopirati sav sadržaj datoteke themes / keycloak / login direktorij ovdje. Ovo je zadana tema stranice za prijavu.

Zatim idemo na administratorsku konzolu s ključem početni1/zaq1! QAZ vjerodajnice i idite na Teme kartica za naše područje:

Mi ćemo odabrati prilagođen za Tema za prijavu i spremite naše promjene.

S tim setom sada možemo isprobati neke prilagodbe. Ali prije toga, pogledajmo zadanu stranicu za prijavu:

2.2. Dodavanje prilagodbi

Sad recimo da moramo promijeniti pozadinu. Za to ćemo otvoriti prijava / resursi / css / login.css i promijenite definiciju klase:

.login-pf tijelo {background: # 39a5dc; veličina pozadine: naslovnica; visina: 100%; }

Da bismo vidjeli učinak, osvježimo stranicu:

Dalje, pokušajmo promijeniti oznake za korisničko ime i lozinku.

Da bismo to postigli, moramo stvoriti novu datoteku, messages_en.properties u tema / prijava / poruke mapu. Ova datoteka poništava zadani paket poruka koji se koristi za zadana svojstva:

usernameOrEmail = Unesite korisničko ime: lozinka = Unesite lozinku:

Da biste testirali, ponovno osvježite stranicu:

Pretpostavimo da želimo promijeniti cijeli HTML ili njegov dio, morat ćemo nadjačati predloške slobodnih znakova koje Keycloak koristi prema zadanim postavkama. Zadani predlošci za stranicu za prijavu čuvaju se u baza / prijava imenik.

Recimo da želimo DOBRO DOŠLI U BAELDUNG biti prikazan umjesto PROLJEČNI KLJUČ KLIK.

Za to ćemo morati kopirati baza / prijava / predložak.ftl našem običaj / prijava mapu.

U kopiranoj datoteci promijenite redak:

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

Do:

 DOBRO DOŠLI U BAELDUNG 

Stranica za prijavu sada bi prikazivala našu prilagođenu poruku umjesto imena carstva.

3. Prilagođavanje ugrađenog poslužitelja Keycloak

Prvi korak ovdje je dodavanje svih artefakata koje smo promijenili za samostalni poslužitelj u izvorni kod našeg ugrađenog poslužitelja za autorizaciju.

Dakle, stvorimo novu mapu prijaviti se iznutra src / main / resources / themes / custom sa ovim sadržajima:

Sada sve što trebamo učiniti je dodati upute u našu datoteku definicije carstva, baeldung-carstvo.json tako da prilagođen koristi se za naš tip teme za prijavu:

"loginTheme": "prilagođeno",

Već smo preusmjerili na prilagođen direktorij tema kako bi naš poslužitelj znao odakle pokupiti datoteke tema za stranicu za prijavu.

Za testiranje, hajdemo na stranicu za prijavu:

Kao što vidimo, ovdje se pojavljuju sve prilagodbe rađene ranije za samostalni poslužitelj, poput pozadine, naziva oznaka i naslova stranice.

4. Zaobilaženje stranice za prijavu Keycloak-a

Tehnički možemo potpuno zaobići stranicu za prijavu Keycloak koristeći lozinku ili tijek odobrenja izravnog pristupa. Međutim, toplo se preporučuje da se ova vrsta potpore uopće ne smije koristiti.

U ovom slučaju nema posredničkog koraka za dobivanje autorizacijskog koda i primanje pristupnog tokena u zamjenu. Umjesto toga, možemo izravno poslati vjerodajnice korisnika putem poziva REST API i odgovoriti na token pristupa.

To učinkovito znači da našu stranicu za prijavu možemo koristiti za prikupljanje korisničkog ID-a i lozinke, a zajedno s ID-om i tajnom klijenta, poslati ih Keycloak-u u POST-u na njegov znak krajnja točka.

Ali opet, budući da Keycloak nudi bogat skup mogućnosti za prijavu - poput zapamti me, resetiraj lozinku i MFA - da nabrojimo samo neke, malo je razloga da ga zaobiđemo.

5. Zaključak

U ovom vodiču, naučili smo kako promijeniti zadanu stranicu za prijavu za Keycloak i dodati naše prilagodbe.

To smo vidjeli i za samostalnu i za ugrađenu instancu.

Na kraju, ukratko smo razmotrili kako u potpunosti zaobići stranicu za prijavu Keycloaka i zašto to ne bismo učinili.

Kao i uvijek, izvorni kod dostupan je na GitHub-u. Za samostalni poslužitelj nalazi se na vodičima GitHub, a za ugrađenu instancu na OAuth GitHub.


$config[zx-auto] not found$config[zx-overlay] not found