Tilpasning af login-siden til Keycloak

1. Oversigt

Keycloak er en tredjeparts autorisationsserver, der bruges til at styre vores web- eller mobilapplikationers godkendelses- og autorisationskrav. Det bruger en standard login-side til at logge på brugere på vores apps vegne.

I denne vejledning fokuserer vi på hvordan vi kan tilpasse login-siden til vores Keycloak-server så vi kan få et andet udseende og føle på det. Vi ser dette for både enkeltstående såvel som indlejrede servere.

Vi bygger på toppen af at tilpasse temaer til Keycloak-tutorialen for at gøre det.

2. Tilpasning af en enkeltstående Keycloak-server

Fortsætter med vores eksempel på brugerdefinerede tema, lad os først se den enkeltstående server.

2.1. Administrationskonsolindstillinger

For at starte serveren, lad os navigere til det bibliotek, hvor vores Keycloak-distribution holdes, og køre denne kommando fra dens beholder folder:

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

Når serveren er startet, behøver vi kun at opdatere siden for at se vores ændringer reflekteret takket være de ændringer, vi tidligere har foretaget i standalone.xml.

Lad os nu oprette en ny mappe, der hedder Log på, inde i temaer / brugerdefinerede vejviser. For at holde tingene enkle kopierer vi først alt indholdet af temaer / nøglelak / login katalog her. Dette er standard-login-sidetemaet.

Derefter går vi til administrationskonsollen, indtaster initial1/zaq1! QAZ legitimationsoplysninger og gå til Temaer fane til vores rige:

Vi vælger brugerdefinerede til Login-tema og gem vores ændringer.

Med dette sæt kan vi nu prøve nogle tilpasninger. Men inden det, lad os se på standard login-siden:

2.2. Tilføjelse af tilpasninger

Lad os nu sige, at vi er nødt til at ændre baggrunden. For det åbner vi login / ressourcer / css / login.css og ændre klassedefinitionen:

.login-pf-krop {baggrund: # 39a5dc; baggrundsstørrelse: omslag; højde: 100%; }

Lad os opdatere siden for at se effekten:

Lad os derefter prøve at ændre etiketterne for brugernavnet og adgangskoden.

For at opnå det er vi nødt til at oprette en ny fil, beskeder_da.egenskaber i tema / login / beskeder folder. Denne fil tilsidesætter standardbeskedpakken, der bruges til de givne egenskaber:

brugernavnOrEmail = Indtast brugernavn: adgangskode = Indtast adgangskode:

For at teste skal du opdatere siden igen:

Antag, at vi vil ændre hele HTML'en eller en del af den, vi bliver nødt til at tilsidesætte de freemarker-skabeloner, som Keycloak bruger som standard. Standardskabelonerne til login-siden opbevares i base / login vejviser.

Lad os sige, at vi vil have VELKOMMEN TIL BAELDUNG skal vises i stedet for SPRINGBOOTKEYCLOAK.

Til det bliver vi nødt til at kopiere base / login / template.ftl til vores brugerdefineret / login folder.

Skift linjen i den kopierede fil:

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

Til:

 VELKOMMEN TIL BAELDUNG

3. Tilpasning af en integreret Keycloak-server

Det første trin her er at tilføje alle de artefakter, vi har ændret til den enkeltstående server, til kildekoden på vores integrerede autorisationsserver.

Så lad os oprette en ny mappe Log på inde src / main / ressourcer / temaer / brugerdefineret med dette indhold:

Nu er alt, hvad vi skal gøre, at tilføje instruktion i vores realm-definitionsfil, baeldung-realm.json så det brugerdefinerede bruges til vores login-tematype:

"loginTheme": "tilpasset",

Vi har allerede omdirigeret til brugerdefinerede temakatalog, så vores server ved, hvorfra temafilerne skal hentes til login-siden.

Lad os ramme login-siden til test:

Som vi kan se, vises alle tilpasninger, der er foretaget tidligere for den uafhængige server, såsom baggrund, etiketnavne og sidetitel, her.

4. Omgå login-side til nøgleblok

Teknisk set kan vi helt omgå Keycloak-login-siden ved hjælp af adgangskoden eller tildelingsflowet for direkte adgang. Imidlertid, Det anbefales kraftigt, at denne tilskudstype slet ikke skal bruges.

I dette tilfælde er der intet mellemliggende trin for at få en autorisationskode og derefter modtage adgangstokenet i bytte. I stedet kan vi sende brugeroplysningerne direkte via et REST API-opkald og få adgangstokenet som svar.

Dette betyder effektivt, at vi kan bruge vores login-side til at indsamle brugerens id og adgangskode og sammen med klient-id og hemmelighed sende det til Keycloak i en POST til sin polet slutpunkt.

Men igen, da Keycloak tilbyder et rigt sæt af loginindstillinger - såsom husk mig, nulstilling af adgangskode og MFA - for at nævne nogle få, er der ringe grund til at omgå det.

5. Konklusion

I denne vejledning vi lærte at ændre standard login-siden til Keycloak og tilføje vores tilpasninger.

Vi så dette for både en enkeltstående og en indlejret instans.

Endelig gik vi kort over, hvordan man helt kan omgå Keycloaks login-side, og hvorfor ikke gøre det.

Som altid er kildekoden tilgængelig på GitHub. For den enkeltstående server er det på tutorials GitHub og for den integrerede forekomst på OAuth GitHub.

streamalism.org