Personalizar Pantalla de Login
Una de las primeras tareas a realizar al momento de poner en marcha este producto es customizar la pantalla de login, junto con las de recuperación de contraseñas, para agregar identidad institucional.
La forma de hacer la modificación deseada es creando un módulo de SimpleSAMLPhp que modifique las partes visuales que deseemos del módulo base que se provee con Araí-Usuarios.
Consideraciones iniciales
Es necesario contar con una instalación de SIU-Araí: Usuarios en la versión 3.0
o superior.
Organización de los templates
El módulo base provisto arai
, tiene la siguiente estructura de templates:
/usr/local/app/idp/simplesamlphp-module-arai/templates/
├── _logo.twig
├── base.twig
├── baseBox.twig
├── login.twig
├── lostPassChange.twig
├── lostPassComplete.twig
├── lostPassLanding.twig
├── lostPassMail.twig
└── lostPassSent.twig
- Archivo
base.twig
: Este archivo define los consumos básicos y estructura general de todas las páginas mostradas al usuario. Si se quiere hacer cambios grandes de layout se puede pisar este archivo. - Archivo
baseBox.twig
: Todo el layout de pantallas de login y cambio de contraseña transcurre en una caja centrada vertical y horizontalmente en la pantalla. Este template provee la cáscara para que el resto de los templates carguen contenido dentro. - Archivo
_logo.twig
: Provee un mini template para permitir fácilmente modificar el logo. - Archivo
login.twig
: Formulario de la pantalla de login. - Archivos
lostPass*.twig
: Todos estos archivos son los que representan los diferentes estados en el flujo de recupero de contraseña.
Creando un módulo de SimpleSAMLPhp
Un módulo es un directorio dentro de la carpeta modules
de SimpleSAMLPhp, que contendrá para el caso de esta modificación recursos y/o templates. Aquí está la documentación detallada de cómo crear un módulo de este estilo: https://simplesamlphp.org/docs/1.18/simplesamlphp-theming.
Nota: No intente copiar el directorio del modulo
arai
como base sobre la cual personalizar, la estructura de directorios necesaria no coincide.
A modo de ejemplo, en el directorio demo (o en el zip que se descarga) existe un módulo de demostración con la siguiente estructura:
unam
├── default-enable
├── themes
│ └── default
│ └── arai
│ └── _logo.twig
│ └── error_500.twig
└── www
└── assets
└── logo.jpg
Este módulo todo lo que hace es cambiar el logo que aparece en las diferentes pantallas que involucran el login y/o recupero de contraseña. Asi mismo agrega una página personalizada para los errores.
Enlazando las traducciones para SimpleSAMLPhp
Luego de la versión 1.15 SimpleSAMLPhp
fue evolucionando su forma de trabajar con la internacionalización de los textos que presenta, si bien el cambio final se encuentra en la versión 2.0 del mismo el camino se comenzó a transitar mucho antes. Dicho cambio involucrará tener un único "dominio"
para realizar las traducciones, sin embargo hasta que dicho proceso llegue debemos proveerle a SimpleSAMLPhp
un diccionario
para cada uno de los dominios que participan en la elaboración del contenido.
Luego de haber extendido el módulo de SIU-Araí para personalizar el login y si no deseamos generar nuestras propias traducciones, podemos informarle a SimpleSAMLPhp
del diccionario
para nuestro nuevo módulo ejecutando los siguientes comandos dentro de la carpeta modules
:
mkdir unam/locales/es/LC_MESSAGES/ -p
ln -s arai/locales/es/LC_MESSAGES/arai.po unam/locales/es/LC_MESSAGES/unam.po
Este paso resulta necesario ya que al incorporar un nuevo módulo se espera que el mismo contenga un diccionario con traducciones válidas para todo mensaje que emane durante la ejecución del IDP.
Configurando el uso del módulo de SimpleSAMLPhp
Para cargarlo dentro de la demo fácilmente, hay que montar el directorio unam
mapeando el mismo contra uno dentro de la carpeta modules
de SimpleSAMLPhp dentro de la imagen del idp. Luego definir la variable de entorno IDP_THEME
indicando la temática visual que debe usar de la forma module:theme.
A continuación vemos como quedaría el servicio idp
dentro del docker-compose.yml
:
services:
idp:
image: hub.siu.edu.ar:5005/siu-arai/arai-usuarios/idp:3.0.0
ports:
- "8181:80"
env_file:
- .env.idp
- .env.common
environment:
IDP_URL: http://localhost:8181/idp
ASSETS_URL: http://localhost:8181/resources
IDP_THEME: unam:default
volumes:
- ./unam:/usr/local/app/idp/vendor/simplesamlphp/simplesamlphp/modules/unam
Esta manera de cargarlo es útil para hacer pruebas rápidas, pero al momento del deploy podría ser más cómodo crear un Dockerfile que extienda la imagen provista por SIU y haga un COPY
del módulo al directorio /usr/local/app/idp/vendor/simplesamlphp/simplesamlphp/modules/
en lugar de recurrir al mapeo.