Login y cuenta.
Permite iniciar, recuperar o cerrar una sesión mediante cis-auth/core-auth-lib y conserva la identidad del servicio solicitante.
Ejemplo completo
Compara la deuda observada con la composición propuesta para r19.
DE INNOVACIÓN
DE SANTIAGO
Iniciar sesión
Accede con una cuenta de la Compañía. Volverás al servicio solicitado.
¿Necesitas una cuenta? Crear cuenta
Una tarjeta de acceso, ocho marcas
Clases .acceso, .btn--proveedor, .acceso__separador y .acceso__pie del CSS distribuido, sin CSS propio del sitio. El lockup y el acento salen de data-brand en el documento o en un ancestro; el tema oscuro usa los mismos tokens. Tres disposiciones (tarjeta sobre fondo, portada dividida, pop-up sobre el sitio) en la plantilla de acceso.
data-brand="cis"admin · drive · inbox · claudia · cuentadata-brand="cds"admin · archivo · protocolodata-brand="cochid"datos · scribe · graphsdata-brand="periodismo2"periodismo2.cl · admindata-brand="usaia"usaia.cl · escribirdata-brand="indieweb"panel · appsdata-brand="firmas"firmasydocumentos.cldata-brand="situacion"situacion.cl/auth/login→cis-auth · Authentik→/auth/callback→core-auth-lib · sesiónNueve pantallas, una sesión
El producto solicita acceso. cis-auth presenta identidad y credenciales. core-auth-lib recibe y expone la sesión. La marca cambia; el orden, la prosa y la seguridad permanecen.
Iniciar sesión
Producto y destino visibles.
Crear cuenta
Revisa tu correo
Enviamos un enlace a martin@example.cl.
Verificación en dos pasos
Usar código de recuperaciónRecuperar acceso
La respuesta no confirma si la cuenta existe.
Completando el acceso
Validamos emisor, estado, nonce y destino antes de crear la sesión.
/auth/callbackTu sesión terminó
Se conserva el destino, no los campos sensibles.
No tienes acceso
Hace falta el rol Editor en Comentario.
Volver al inicioCerrar sesión
Cerrarás esta sesión y volverás al producto.
Objetivo
Permite iniciar, recuperar o cerrar una sesión mediante cis-auth/core-auth-lib y conserva la identidad del servicio solicitante.
La plantilla define regiones, orden de lectura y estados. El producto aporta datos y acciones, no otra estructura visual.
Regiones
| Orden | Región |
|---|---|
| 1 | Identidad y namebrand |
| 2 | Título y explicación |
| 3 | Método de autenticación |
| 4 | Ayuda y recuperación |
| 5 | Privacidad y soporte |
Estados obligatorios
| Estado | Contenido mínimo |
|---|---|
| signed-out | Inicio y métodos disponibles |
| pending | Retorno seguro y estado |
| error | Causa segura y reintento |
| signed-in | Cuenta y destino |
| expired | Sesión terminada y retorno |
Responsive y accesibilidad
- Una sola columna legible a 320 px; las regiones de apoyo pasan después del contenido principal.
- El título de página es único y el breadcrumb conserva la jerarquía real.
- Las acciones mantienen el mismo nombre y orden en escritorio y móvil.
- El foco llega al mensaje o campo que requiere atención tras un envío.
- La URL entrega contenido completo sin router cliente.