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
.
Organización de los templates
El módulo base provisto arai
, tiene la siguiente estructura de 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/stable/simplesamlphp-theming.
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
└── 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.
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.