{"id":61890,"date":"2020-08-26T15:36:45","date_gmt":"2020-08-26T15:36:45","guid":{"rendered":"https:\/\/www.baeldung.com\/?p=86233"},"modified":"2020-08-26T15:36:45","modified_gmt":"2020-08-26T15:36:45","slug":"customizing-the-login-page-for-keycloak","status":"publish","type":"post","link":"https:\/\/itteacheritfreelance.hk\/wordpress\/index.php\/2020\/08\/26\/customizing-the-login-page-for-keycloak\/","title":{"rendered":"Customizing the Login Page for Keycloak"},"content":{"rendered":"

<\/p>\n

1. Overview<\/h2>\n
<\/div>\n

Keycloak<\/a> is a third-party authorization server used to manage our web or mobile applications’ authentication and authorization requirements. It uses a default login page to sign-in users on our app’s behalf.<\/p>\n

In this tutorial, we’ll focus on how we can customize the login page for our Keycloak server<\/strong> so that we can have a different look and feel for it. We’ll see this for both standalone as well as embedded servers.<\/p>\n

We’ll build on top of customizing themes for the Keycloak tutorial<\/a> to do that.<\/p>\n

2. Customizing a Standalone Keycloak Server<\/h2>\n
<\/div>\n

Continuing with our example of the\u00a0custom<\/em><\/a>\u00a0theme, let’s see the standalone server first.<\/p>\n

2.1. Admin Console Settings<\/h3>\n
<\/div>\n

To start the server, let’s navigate to the directory where our Keycloak distribution is kept, and run this command from its bin<\/em> folder:<\/p>\n

.\/standalone.sh -Djboss.socket.binding.port-offset=100<\/code><\/pre>\n
Once the server is started, we only need to refresh the page to see our changes reflected, thanks to the modifications we previously made to the\u00a0standalone.xml<\/em><\/a>.<\/p>\n
Now let’s create a new folder, named\u00a0login<\/em>, inside the themes\/custom<\/em> directory. To keep things simple, we’ll first copy all the contents of the\u00a0themes\/keycloak\/login<\/em> directory here. This is the default login page theme.<\/p>\n
Then, we’ll go to the admin console<\/a>, key-in the\u00a0initial1<\/em>\/zaq1!QAZ <\/em>credentials and go to the\u00a0Themes<\/em>\u00a0tab for our realm:<\/p>\n
\"\"<\/a><\/p>\n
We’ll select custom<\/em> for the Login Theme<\/em> and save our changes.<\/p>\n
With that set, we can now try some customizations. But before that, let’s have a look at the default login page<\/a>:<\/p>\n
\"\"<\/a><\/p>\n
 <\/p>\n
2.2. Adding Customizations<\/h3>\n
<\/div>\n
Now let’s say we need to change the background. For that, we’ll open login\/resources\/css\/login.css<\/em> and change the class definition:<\/p>\n
.login-pf body {\r\n    background: #39a5dc;\r\n    background-size: cover;\r\n    height: 100%;\r\n}<\/code><\/pre>\n
To see the effect, let’s refresh the page:<\/p>\n
\"\"<\/a><\/p>\n
Next, let’s try to change the labels for the username and password.<\/p>\n
To achieve that, we need to create a new file, messages_en.properties<\/em> in the\u00a0theme\/login\/messages <\/em>folder. This file overrides the default message bundle being used for the given properties:<\/p>\n
usernameOrEmail=Enter Username:\r\npassword=Enter Password:<\/code><\/pre>\n
To test, again refresh the page:<\/p>\n
\"\"<\/a><\/p>\n
Suppose we want to change the entire HTML or a part of it, we’ll need to override the freemarker templates that Keycloak uses by default. The default templates for the login page are kept in the base\/login<\/em> directory.<\/p>\n
Let’s say we want WELCOME TO BAELDUNG<\/em> to be displayed in place of SPRINGBOOTKEYCLOAK<\/em>.<\/p>\n
For that, we’ll need to copy base\/login\/template.ftl<\/em> to our custom\/login<\/em> folder.<\/p>\n
In the copied file, change the line:<\/p>\n
<div id=\"kc-header-wrapper\" class=\"${properties.kcHeaderWrapperClass!}\">\r\n    ${kcSanitize(msg(\"loginTitleHtml\",(realm.displayNameHtml!'')))?no_esc}\r\n<\/div><\/code><\/pre>\n
To:<\/p>\n
<div id=\"kc-header-wrapper\" class=\"${properties.kcHeaderWrapperClass!}\">\r\n    WELCOME TO BAELDUNG\r\n<\/div><\/code><\/pre>\n
The login page would now display our custom message instead of the realm name.<\/p>\n
3. Customizing an Embedded Keycloak Server<\/h2>\n
<\/div>\n
The first step here is to add all the artifacts we changed for the standalone server to the source code of our embedded authorization server.<\/p>\n
So, let’s create a new folder login<\/em> inside src\/main\/resources\/themes\/custom<\/em> with these contents:<\/p>\n
\"\"<\/a><\/p>\n
Now all we need to do is to add instruction in our realm definition file, baeldung-realm.json<\/em> so that custom<\/em> is used for our login theme type:<\/p>\n
 <\/p>\n
\"loginTheme\": \"custom\",<\/code><\/pre>\n
We’ve already redirected to the custom<\/em> theme directory<\/a> so that our server knows from where to pick up the theme files for the login page.<\/p>\n
For testing, let’s hit the login page<\/a>:<\/p>\n
\"\"<\/a><\/p>\n
As we can see, all the customizations done earlier for the standalone server, such as the background, label names, and page title, are appearing here.<\/p>\n
4. Bypassing Keycloak Login Page<\/h2>\n
<\/div>\n
Technically, we can completely bypass the Keycloak login page by using the password or direct access grant<\/a> flow. However, it’s strongly recommended that this grant type shouldn’t be used at all.<\/strong><\/p>\n
In this case, there is no intermediary step of getting an authorization code, and then receiving the access token in exchange. Instead, we can directly send the user credentials via a REST API call and get the access token in response.<\/p>\n
This effectively means that we can use our login page to collect the user’s id and password, and along with the client id and secret, send it to Keycloak in a POST to its token<\/em> endpoint.<\/p>\n
But again, since Keycloak provides a rich feature set of login options – such as remember me, password reset, and MFA – to name a few, there is little reason to bypass it.<\/p>\n
5. Conclusion<\/h2>\n
<\/div>\n
In this tutorial, we learned how to change the default login page for Keycloak and add our customizations<\/strong>.<\/p>\n
We saw this for both a standalone and an embedded instance.<\/p>\n
Lastly, we briefly went over how to bypass Keycloak’s login page entirely and why not to do that.<\/p>\n
As always, the source code is available over on GitHub<\/a>.<\/p>\n
\"\"<\/p>\n
<\/a> <\/a> <\/a> <\/a> <\/a> <\/a> <\/a> <\/a> <\/div>\n\n
\\\"IT\u96fb\u8166\u88dc\u7fd2
\u7acb\u523b\u8a3b\u518a\u53ca\u5831\u540d\u96fb\u8166\u88dc\u7fd2\u8ab2\u7a0b\u5427!<\/figcaption><\/figure>\r\n<\/br>Find A Teacher Form:\r\n<\/br>https:\/\/docs.google.com\/forms\/d\/1vREBnX5n262umf4wU5U2pyTwvk9O-JrAgblA-wH9GFQ\/viewform?edit_requested=true#responses\r\n<\/br><\/br>Email:\r\n<\/br>public1989two@gmail.com






\r\nwww.itsec.hk<\/a>
\r\nwww.itsec.vip<\/a>
\r\nwww.itseceu.uk<\/a>
<\/p>","protected":false},"excerpt":{"rendered":"
Learn how to change the default login page for Keycloak and add our customizations.<\/p>\n
<\/a> <\/a> <\/a> <\/a> <\/a> <\/a> <\/a> <\/a> <\/div>\n<\/div>","protected":false},"author":770,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"slim_seo":{"title":"Customizing the Login Page for Keycloak - ITTeacherITFreelance.hk","description":"Learn how to change the default login page for Keycloak and add our customizations.                "},"footnotes":""},"categories":[6],"tags":[4855],"_links":{"self":[{"href":"https:\/\/itteacheritfreelance.hk\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/61890"}],"collection":[{"href":"https:\/\/itteacheritfreelance.hk\/wordpress\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/itteacheritfreelance.hk\/wordpress\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/itteacheritfreelance.hk\/wordpress\/index.php\/wp-json\/wp\/v2\/users\/770"}],"replies":[{"embeddable":true,"href":"https:\/\/itteacheritfreelance.hk\/wordpress\/index.php\/wp-json\/wp\/v2\/comments?post=61890"}],"version-history":[{"count":8,"href":"https:\/\/itteacheritfreelance.hk\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/61890\/revisions"}],"predecessor-version":[{"id":65417,"href":"https:\/\/itteacheritfreelance.hk\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/61890\/revisions\/65417"}],"wp:attachment":[{"href":"https:\/\/itteacheritfreelance.hk\/wordpress\/index.php\/wp-json\/wp\/v2\/media?parent=61890"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/itteacheritfreelance.hk\/wordpress\/index.php\/wp-json\/wp\/v2\/categories?post=61890"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/itteacheritfreelance.hk\/wordpress\/index.php\/wp-json\/wp\/v2\/tags?post=61890"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}