streamalism.org

1. Overzicht

Keycloak is een autorisatieserver van derden die wordt gebruikt om de authenticatie- en autorisatievereisten van onze web- of mobiele applicaties te beheren. Het gebruikt een standaard inlogpagina om gebruikers in te loggen namens onze app.

In deze tutorial zullen we ons concentreren op hoe we de inlogpagina voor onze Keycloak-server kunnen aanpassen zodat we er een andere look en feel voor kunnen hebben. We zullen dit zien voor zowel standalone als embedded servers.

We bouwen voort op het aanpassen van thema's voor de Keycloak-zelfstudie om dat te doen.

2. Een zelfstandige Keycloak-server aanpassen

We gaan verder met ons voorbeeld van de Op maat thema, laten we eerst de stand-alone server bekijken.

2.1. Admin Console-instellingen

Om de server te starten, gaan we naar de directory waar onze Keycloak-distributie wordt bewaard, en voeren we deze opdracht uit vanaf zijn bak map:

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

Zodra de server is gestart, hoeven we de pagina alleen maar te verversen om onze wijzigingen weerspiegeld te zien, dankzij de wijzigingen die we eerder hebben aangebracht in de standalone.xml.

Laten we nu een nieuwe map maken met de naam Log in, binnen in de thema's / aangepast directory. Om het simpel te houden, kopiëren we eerst alle inhoud van het thema's / keycloak / login directory hier. Dit is het standaardthema van de aanmeldingspagina.

Vervolgens gaan we naar de beheerconsole, toets het initial1/zaq1! QAZ referenties en ga naar het Thema's tabblad voor ons rijk:

We zullen selecteren Op maat voor de Login-thema en sla onze wijzigingen op.

Met die set kunnen we nu enkele aanpassingen proberen. Maar laten we eerst eens kijken naar de standaard inlogpagina:

2.2. Aanpassingen toevoegen

Laten we nu zeggen dat we de achtergrond moeten veranderen. Daarvoor openen we login / resources / css / login.css en verander de klassendefinitie:

.login-pf body {achtergrond: # 39a5dc; achtergrondgrootte: omslag; hoogte: 100%; }

Laten we de pagina vernieuwen om het effect te zien:

Laten we vervolgens proberen de labels voor de gebruikersnaam en het wachtwoord te wijzigen.

Om dat te bereiken, moeten we een nieuw bestand maken, messages_nl.properties in de thema / login / berichten map. Dit bestand overschrijft de standaard berichtenbundel die wordt gebruikt voor de gegeven eigenschappen:

usernameOrEmail = Voer gebruikersnaam in: wachtwoord = Voer wachtwoord in:

Vernieuw de pagina om te testen:

Stel dat we de hele HTML of een deel ervan willen wijzigen, dan moeten we de freemarker-sjablonen die Keycloak standaard gebruikt, overschrijven. De standaardsjablonen voor de inlogpagina worden bewaard in het basis / login directory.

Laten we zeggen dat we willen WELKOM BIJ BAELDUNG worden weergegeven in plaats van LENTE BOOTKEYCLOAK.

Daarvoor moeten we kopiëren base / login / template.ftl naar onze aangepast / login map.

Wijzig de regel in het gekopieerde bestand:

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

Naar:

 WELKOM BIJ BAELDUNG 

De inlogpagina zou nu ons aangepaste bericht weergeven in plaats van de realm-naam.

3. Een Embedded Keycloak Server aanpassen

De eerste stap hier is om alle artefacten die we hebben gewijzigd voor de stand-alone server toe te voegen aan de broncode van onze embedded autorisatieserver.

Laten we dus een nieuwe map maken Log in binnen src / main / resources / themes / custom met deze inhoud:

Nu hoeven we alleen nog maar instructies toe te voegen aan ons realm-definitiebestand, baeldung-realm.json zodat Op maat wordt gebruikt voor ons inlogthema-type:

"loginTheme": "aangepast",

We zijn al omgeleid naar het Op maat themamap, zodat onze server weet waar hij de themabestanden voor de inlogpagina kan ophalen.

Om te testen, gaan we naar de inlogpagina:

Zoals we kunnen zien, worden alle aanpassingen die eerder zijn gedaan voor de zelfstandige server, zoals de achtergrond, labelnamen en paginatitel, hier weergegeven.

4. De aanmeldingspagina van Keycloak omzeilen

Technisch gezien kunnen we de Keycloak-inlogpagina volledig omzeilen door het wachtwoord of de directe toegangsstroom te gebruiken. Echter, Het wordt ten zeerste aanbevolen dit type toekenning helemaal niet te gebruiken.

In dit geval is er geen tussenstap om een ​​autorisatiecode te krijgen en vervolgens het toegangstoken in ruil te ontvangen. In plaats daarvan kunnen we de gebruikersreferenties rechtstreeks verzenden via een REST API-aanroep en als antwoord het toegangstoken krijgen.

Dit betekent effectief dat we onze inlogpagina kunnen gebruiken om de gebruikersnaam en het wachtwoord van de gebruiker te verzamelen, en samen met de client-id en het geheim, deze naar Keycloak kunnen sturen in een POST naar zijn teken eindpunt.

Maar nogmaals, aangezien Keycloak een uitgebreide reeks inlogopties biedt - zoals onthoud mij, wachtwoord opnieuw instellen en MFA - om er maar een paar te noemen, is er weinig reden om het te omzeilen.

5. Conclusie

In deze tutorial we hebben geleerd hoe we de standaard inlogpagina voor Keycloak kunnen wijzigen en onze aanpassingen kunnen toevoegen.

We hebben dit gezien voor zowel een zelfstandige als een ingesloten instantie.

Ten slotte hebben we kort besproken hoe we de inlogpagina van Keycloak volledig kunnen omzeilen en waarom we dat niet doen.

Zoals altijd is de broncode beschikbaar op GitHub. Voor de zelfstandige server staat deze op de tutorials GitHub en voor de ingesloten instantie op de OAuth GitHub.