Tilpasse påloggingssiden for Keycloak

1. Oversikt

Keycloak er en tredjeparts autorisasjonsserver som brukes til å administrere våre autentiserings- og autorisasjonskrav for nett- eller mobilapplikasjoner. Den bruker en standard påloggingsside for å logge på brukere på appens vegne.

I denne opplæringen vil vi fokusere på hvordan vi kan tilpasse påloggingssiden til vår Keycloak-server slik at vi kan ha et annet utseende og følelse for det. Vi ser dette for både frittstående så vel som innebygde servere.

Vi vil bygge på toppen av å tilpasse temaer for Keycloak-opplæringen for å gjøre det.

2. Tilpasse en frittstående Keycloak-server

Fortsetter med vårt eksempel på tilpasset tema, la oss se den frittstående serveren først.

2.1. Innstillinger for administrasjonskonsoll

For å starte serveren, la oss navigere til katalogen der Keycloak-distribusjonen vår holdes, og kjøre denne kommandoen fra dens søppel mappe:

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

Når serveren er startet, trenger vi bare å oppdatere siden for å se endringene gjenspeiles, takket være endringene vi tidligere har gjort i frittstående.xml.

La oss nå lage en ny mappe med navnet Logg Inn, inne i temaer / tilpasset katalog. For å gjøre ting enkelt, kopierer vi først alt innholdet i temaer / nøkkelring / pålogging katalog her. Dette er standard innloggingstema.

Deretter går vi til administrasjonskonsollen, taster inn initial1/zaq1! QAZ legitimasjon og gå til Temaer fane for vårt rike:

Vi velger tilpasset for Innloggingstema og lagre endringene våre.

Med det settet kan vi nå prøve noen tilpasninger. Men før det, la oss ta en titt på standard påloggingsside:

2.2. Legge til tilpasninger

La oss si at vi må endre bakgrunnen. For det åpner vi pålogging / ressurser / css / login.css og endre klassedefinisjonen:

.login-pf body {bakgrunn: # 39a5dc; bakgrunnsstørrelse: omslag; høyde: 100%; }

For å se effekten, la oss oppdatere siden:

Deretter, la oss prøve å endre etikettene for brukernavnet og passordet.

For å oppnå det, må vi opprette en ny fil, messages_en.properties i tema / pålogging / meldinger mappe. Denne filen overstyrer standard meldingspakke som brukes for de angitte egenskapene:

brukernavnOrEmail = Skriv inn brukernavn: passord = Skriv inn passord:

For å teste, oppdater siden på nytt:

Anta at vi vil endre hele HTML-en eller en del av den, vi må overstyre freemarker-malene som Keycloak bruker som standard. Standardmalene for påloggingssiden oppbevares i base / pålogging katalog.

La oss si at vi vil VELKOMMEN TIL BAELDUNG skal vises i stedet for SPRINGBOOTKEYCLOAK.

For det må vi kopiere base / login / template.ftl til vår tilpasset / innlogging mappe.

Endre linjen i den kopierte filen:

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

Til:

 VELKOMMEN TIL BAELDUNG 

Innloggingssiden viser nå vår tilpassede melding i stedet for rikets navn.

3. Tilpasse en innebygd Keycloak-server

Det første trinnet her er å legge til alle gjenstandene vi endret for den frittstående serveren til kildekoden til den innebygde autorisasjonsserveren vår.

Så la oss lage en ny mappe Logg Inn innsiden src / hoved / ressurser / temaer / tilpasset med dette innholdet:

Nå er alt vi trenger å gjøre å legge til instruksjon i rikets definisjonsfil, baeldung-realm.json så det tilpasset brukes til vår innloggingstema:

"loginTheme": "tilpasset",

Vi har allerede viderekoblet til tilpasset temakatalog slik at serveren vår vet hvor de skal hente temafilene for påloggingssiden.

For testing, la oss trykke på påloggingssiden:

Som vi kan se, vises alle tilpasningene som er gjort tidligere for den frittstående serveren, som bakgrunn, etikettnavn og sidetittel her.

4. Omgå side for pålogging av nøkkelring

Teknisk sett kan vi helt omgå Keycloak-innloggingssiden ved å bruke passordet eller direkte tilgangsflyt. Derimot, Det anbefales sterkt at denne tilskuddstypen ikke skal brukes i det hele tatt.

I dette tilfellet er det ingen mellomliggende trinn for å få en autorisasjonskode, og deretter motta tilgangstokenet i bytte. I stedet kan vi sende brukerlegitimasjonen direkte via en REST API-samtale og få tilgangstokenet som svar.

Dette betyr effektivt at vi kan bruke påloggingssiden vår til å samle inn brukerens id og passord, og sammen med klient-ID og hemmelighet, sende den til Keycloak i en POST til sin token endepunkt.

Men igjen, siden Keycloak har et rikt funksjonssett med påloggingsalternativer - for eksempel husk meg, tilbakestilling av passord og MFA - for å nevne noen, er det liten grunn til å omgå det.

5. Konklusjon

I denne veiledningen, vi lærte hvordan vi endrer standard påloggingsside for Keycloak og legger til våre tilpasninger.

Vi så dette for både en frittstående og en innebygd forekomst.

Til slutt gikk vi kort over hvordan du kan omgå Keycloaks påloggingsside helt og hvorfor ikke gjøre det.

Som alltid er kildekoden tilgjengelig på GitHub. For den frittstående serveren er det på veiledningene GitHub, og for den innebygde forekomsten, på OAuth GitHub.


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