Keyclock custom page development

1. Development mode

Subject type

  • Account - Account management
  • Admin - Admin console
  • Email - Emails
  • Login - Login forms
  • Welcome - Welcome page

create themes

  • HTML templates (Freemarker Templates)
  • Images
  • Message bundles
  • Stylesheets
  • Scripts
  • Theme properties

Theme development

  • Strictly according to the file directory, file name, file format, optional inheritance of the parent theme.

Adjust theme

  • Inherit the parent theme, selectively override or add form controls, change styles, change text content, etc.

Full coverage development

  • Based on freemarker template engine and vue and other popular pure front-end technology.
  • Find the interface that appears in the original page.
  • Find and understand the expressions and meanings in the original page.

2. Difficulties

The difficulty lies in finding and understanding the expressions and meanings in the original page.

The meaning of the realm.password expression in the mining template engine:

In login.ftl, there are the following codes:

  <#if realm.password>
          <form id="kc-form-login" onsubmit="login.disabled = true; return true;" action="${url.loginAction}"

You can see that there is a realm.password expression. If realm.password is true, the login form will be displayed. After searching the source code, the calculation depends on getRequiredCredentials() in the realm model. After research, the corresponding credentials attribute should be described in the official document. The explanation is as follows:

Specify the credentials of the application. This is an object notation where the key is the credential type and the value is the value of the credential type. Currently password and jwt is supported. This is REQUIRED only for clients with 'Confidential' access type.

Its actual value is related to the Access Type property in the client:

Access Type
This defines the type of the OIDC client.

  • confidential
    Confidential access type is for server-side clients that need to perform a browser login and require a client secret when they turn an access code into an access token, (see Access Token Request in the OAuth 2.0 spec for more details). This type should be used for server-side applications.
  • public
    Public access type is for client-side clients that need to perform a browser login. With a client-side application there is no way to keep a secret safe. Instead it is very important to restrict access by configuring correct redirect URIs for the client.
  • bearer-only
    Bearer-only access type means that the application only allows bearer token requests. If this is turned on, this application cannot participate in browser logins.

The result is: if the client's Access Type is public, the realm.password is true.

Of course, you can ignore this variable and write your own page, but:

  • If it is ignored, the internal logic of keyclock will be destroyed, such as the failure of modification operations on the back-end console.
  • If you are developing in full accordance with keyclock, you need to understand the meaning of each configuration.

Tags: Programming FreeMarker Vue Attribute

Posted on Sun, 26 Apr 2020 07:08:02 -0400 by invisionx