He modificado un tema de Keycloak y al reinciar el servidor, los cambios no se muestran

La introducción

Llevo algunos meses trabajando en un proyecto personal llamado Deeditt y decidí que el sistema único de acceso, mejor conocido en inglés por sus siglas SSO (Single Sign On) sería Keycloak, he estado leyendo mucho sobre su configuración y como lo debería de adaptar a mis necesidades y la cantidad de información y nuevos conceptos algunas veces son abrumadores y este caso no ha sido la excepción.

El problema

Pues todo bien durante la configuración y puesta en marcha, pero algo importante que tuve que resolver era el cómo crear o modificar un tema, que básicamente es la apariencia que quiero darle a Keycloak cuando los usuarios llegen a la página de inicio de sesión, y bueno, entre que leía y hacia cambios en mi contenedor, logré clonar el tema base y empezar a modificarlo, pero por alguna extraña razón que aun no determino, cuando probaba el inicio de sesión en el navegador, el tema funcionada, pero si lo hacía en el móvil, seguía viendo el tema base.

Luego de investigar, encontré que es un caso muy común cuando se están modificando o cargando nuevos archivos CSS o JS sobre los temas de Keycloak, éstos no se ven reflejados en los navegadores porque la versión anterior ya está almacenada en caché en los navegadores, también encontré que esto es algo que se puede modificar a través de un archivo xml en la configuracion de Keycloak, incluso se recomienda deshabilitar el almacenamiento en caché mientras se esta en el proceso de desarrollo.

De acuerdo a las recomendaciones, el archivo a modificar es standalone.xml y debe quedar de la siguiene forma:

<theme>
    <staticmaxage>-1</staticmaxage>
    <cachethemes>false</cachethemes>
    <cachetemplates>false</cachetemplates>
    ...
</theme>

La solución

Desafortunadamente estos cambios no me funcionaron, pero noté que las URLs construídas y donde se almacenan los temas, tienen una secuencia de caracteres, que encontré en la documentación es llamada "Resource Tag".

Este es un ejemplo de una URL generada por Keycloak y en este ejemplo notarás el código uy7ye4f, pues eso es el "Resource Tag".

<link href=”/auth/resources/uy7ye4f/account/keycloak.v2/public/theme.css” rel=”stylesheet”>

El Resource Tag se genera durante cada migración, lo que hace que evite y forza a los navegadores a tener la versión más nueva del código tras una liberación, OK, tiene sentido entonces la siguiente pregunta fue, se podrá modificar ese resource tag y cómo lo hago?.

Al observar el código de Keycloak, específicamente el archivo MigrationModelAdapter, me di cuenta de que se genera una nueva etiqueta de recurso durante la migración (solamente), pero ¿por qué no generar una nueva etiqueta yo mismo? Viendo un poco más alla de los archivos de migración, noté que en el registro de la base de datos el código utilizado en el resource tag, era algo como:

[keycloak]>select * from MIGRATION_MODEL;
+ — — — - + — — — — -+ — — — — — -+
| ID | VERSION | UPDATE_TIME |
+ — — — - + — — — — -+ — — — — — -+
| uy7ye4f | 10.0.2 | 1592806968 |
+ — — — - + — — — — -+ — — — — — -+

Y a partir de este punto, ya me imagino que intuyen como el problema se ha resuelto cierto, pues usando el método bien conocido de prueba y error, solo tuve que modificar el valor de la migración (esperando no romper nada más) y al reiniciar la instancia de Keycloak.

Happy coding! :D

Photo by Jeremy Perkins on Unsplash