keycloak-username-password-attribute-authenticator:0.3.0 |
|
---|---|
keycloak-username-password-attribute-authenticator:1.0.1 |
Keycloak default login form with additional user attribute validation. Example:
To use this authenticator, it should be bundled together with Keycloak, here's how do that:
Build your Keycloak image like below:
FROM quay.io/keycloak/keycloak:24.0.1
RUN curl -s -L -o /opt/keycloak/providers/keycloak-username-password-attribute-authenticator-1.0.1.jar https://github.com/kilmajster/keycloak-username-password-attribute-authenticator/releases/download/1.0.1/keycloak-username-password-attribute-authenticator-1.0.1.jar
RUN /opt/keycloak/bin/kc.sh build
ENTRYPOINT ["/opt/keycloak/bin/kc.sh", "start"]
Following steps shows how to create authentication flow that uses authenticator with user attribute validation.
- In Keycloak admin console, go to Authentication section, select authentication type of Browser and click Duplicate action.
- Set name for new authentication flow eg.
Browser with user attribute
and click Ok. - In newly created authentication flow remove Username Password Form execution.
- On Browser With User Attribute Forms level, click Actions > Add execution and select provider of type
Username Password Attribute Form, set Requirement to
required
, then save. - Then move Username Password Attribute Form on a previous position of Username Password Form, so in the end authentication flow should look like following:
- On Username Password Attribute Form level, click Actions > Settings.
- Attribute used to validate login form.
-
If enabled, label for login form will be generated based on attribute name, so attribute with name:
favorite_number
will be labeled as Favorite numberREALLY_custom.user-Attribute
will be translated to Really custom user attribute, etc. By default, set totrue
. IfUser attribute form label
is configured, label is taken form configuration and generation is skipped.
- Message which will be displayed as user attribute input label. If value is a valid message key, then proper translation will be used.
- Message which will be displayed as user attribute validation error. If value is a valid message key, then proper translation will be used.
Theme configuration is handled in clients section, in following example Keycloak default account-console
client will be used.
In Keycloak admin panel, go to Clients and select client you want to authenticate with user attribute form. As Login Theme set base-with-attribute
If you have your own theme, then in .your-theme/login/login.ftl
add following below <div>
responsible for a password stuff or anywhere you want.
How it was done with Keycloak base theme, you can check here.
<#if usernameHidden?? && messagesPerField.existsError('username','password')>
<span id="input-error" class="${properties.kcInputErrorMessageClass!}" aria-live="polite">
${kcSanitize(messagesPerField.getFirstError('username','password'))?no_esc}
</span>
</#if>
</div>
<!-- attribute input block start-->
<div class="${properties.kcFormGroupClass!}">
<label for="user_attribute" class="${properties.kcLabelClass!}"><#if user_attribute_label??>${msg(user_attribute_label)}<#else>${msg("defaultUserAttributeLabel")}</#if></label>
<div class="${properties.kcInputGroup!}">
<input tabindex="3" id="user_attribute" class="${properties.kcInputClass!}" name="user_attribute" type="password" autocomplete="current-user-attribute"
aria-invalid="<#if messagesPerField.existsError('username','password','user_attribute')>true</#if>"
/>
<button class="${properties.kcFormPasswordVisibilityButtonClass!}" type="button" aria-label="${msg("showUserAttribute")}"
aria-controls="user_attribute" data-password-toggle tabindex="4"
data-icon-show="${properties.kcFormPasswordVisibilityIconShow!}" data-icon-hide="${properties.kcFormPasswordVisibilityIconHide!}"
data-label-show="${msg('showUserAttribute')}" data-label-hide="${msg('hideUserAttribute')}">
<i class="${properties.kcFormPasswordVisibilityIconShow!}" aria-hidden="true"></i>
</button>
</div>
<#if usernameHidden?? && messagesPerField.existsError('username','password', 'user_attribute')>
<span id="input-error" class="${properties.kcInputErrorMessageClass!}" aria-live="polite">
${kcSanitize(messagesPerField.getFirstError('username','password'))?no_esc}
</span>
</#if>
</div>
<!-- attribute input block end-->
<div class="${properties.kcFormGroupClass!} ${properties.kcFormSettingClass!}">
<div id="kc-form-options">
<#if realm.rememberMe && !usernameHidden??>
<div class="checkbox">
$ mvn package
After building a project, do following to start Keycloak with bundled authenticator jar and dummy configuration (dev-realm.json
).
$ docker compose up
Open browser and go to http://localhost:8080/realms/dev-realm/account
use Username or email = test
, Password = test
and Favorite number = 46
to login.