Login

Qué es

Es la página donde una persona demuestra quién es antes de entrar a un sistema. Solar define siete variantes: tres formas de ingresar con un login propio, un segundo factor que se suma a algunas de ellas, la recuperación de clave, una página previa para cuando el login lo resuelve Microsoft Entra ID, y los mensajes de estado.

El caso principal es el Portal CCS (antes Portal Socios CCS). Ahí se ingresa con RUT y clave, porque una misma persona puede trabajar en varias empresas y el RUT la identifica a ella, no a la empresa. Las personas sin RUT chileno ingresan con su correo, y a quien tiene RUT nunca se le ofrece el correo. Hoy el Portal CCS ingresa a través de Microsoft Entra ID: ese caso es la variante 7.

Cómo elegir la variante

Se elige según quién usa el sistema. El segundo factor no reemplaza a ninguna: se suma después de ingresar con clave.

La página de login

Todas las variantes comparten la misma página:

• Página propia, con su propia dirección. Nunca un modal ni una ventana emergente.
• Una columna centrada de hasta 384 px (max-w-sm), sobre fondo blanco. En el celular, arriba y sin espacio vacío antes del formulario.
• De arriba hacia abajo: logo de la CCS, título, formulario, botón principal, un enlace alternativo y la ayuda.
• El logo de la CCS es de uso restringido. Si tu sistema no es de la CCS, usa su propio logo. Revisa la Licencia.
• Sin menú, banners ni promociones. La página solo sirve para ingresar.
• Título fijo, con el nombre del sistema: “Ingresa al Portal CCS”. El botón principal siempre dice “Ingresar”.

RUT y clave

La variante principal para un sistema con login propio. Identifica a la persona por su RUT, sin importar en cuántas empresas trabaje.

Ingresa al Portal CCS

RUT

Con guion y dígito verificador. Ej: 12.345.678-5

Clave

¿Olvidaste tu clave?

Ingresar

¿No tienes RUT chileno? Ingresa con tu correo

Reglas

• El RUT se acepta con o sin puntos, con guion y con la K en mayúscula o minúscula. El sistema lo normaliza; la persona no tiene que adivinar el formato.
• El dígito verificador se revisa al salir del campo, antes de enviar. Si no coincide: “Revisa el RUT: el dígito verificador no coincide”.
• El RUT no usa type="number", porque puede terminar en K. Lleva autocomplete="username" para que el navegador lo recuerde junto con la clave.
• El enlace a la variante 2 va al final, separado por una línea y con poco peso. Es para pocas personas y no debe competir con el formulario.
• Si alguien con RUT intenta ingresar con su correo, recibe el mismo error genérico de la variante 2, que le recuerda usar el RUT.

Correo y clave

Solo para personas sin RUT chileno. Se llega desde el enlace al final de la variante 1 y tiene su propia dirección (por ejemplo, /ingresar/correo).

Ingresa al Portal CCS

Para personas sin RUT chileno.

Correo

Clave

¿Olvidaste tu clave?

Ingresar

¿Tienes RUT chileno? Ingresa con tu RUT

Reglas

• Es la misma página de la variante 1 en todo lo demás: título, botón, recuperación de clave y mensajes.
• El error es siempre el mismo: “Correo o clave incorrectos. Si tienes RUT chileno, ingresa con tu RUT”. No dice si el correo existe ni si pertenece a alguien con RUT.
• El enlace de vuelta a la variante 1 va al final, igual que en la variante 1.

Cuenta CCS (Google)

Ingreso con la cuenta de Google Workspace de la CCS (inicio de sesión único o SSO). La persona no crea una clave nueva: usa la misma de su correo @ccs.cl. El nombre del sistema en la vista previa es de ejemplo.

Ingresa a Gestión de Eventos

Usa tu cuenta de la CCS (@ccs.cl).

Continuar con Google

Reglas

• Un solo botón y nada más. Sin campos de RUT, correo ni clave en la misma página.
• El botón sigue las reglas de marca de Google (logo oficial y texto “Continuar con Google”). En la vista previa, el ícono es un marcador: en producción se usa el botón oficial.
• El sistema acepta solo cuentas @ccs.cl. Si alguien entra con otra cuenta: “Esta cuenta no es de la CCS. Ingresa con tu cuenta @ccs.cl”.
• Sin segundo factor propio. Lo aplica Google con la configuración de la CCS.
• El título nombra el sistema: “Ingresa a Gestión de Eventos”, no “Ingresa con Google”.

Correo y código

Ingreso sin clave: la persona escribe su correo y recibe un código de 6 dígitos que vence en 10 minutos. Son dos pasos en la misma página. El nombre del sistema en la vista previa es de ejemplo.

Ingresa a Certificados

Te enviaremos un código a tu correo.

Correo

Enviar código

Revisa tu correo

Enviamos un código a andrea@empresa.cl. Cambiar correo

Código de 6 dígitos

Vence en 10 minutos. Revisa también la carpeta de spam.

Ingresar

¿No te llegó? Reenviar en 0:45

Reglas

• Código, nunca enlace. El código funciona aunque el correo se lea en el celular y el login esté en el computador.
• Un solo campo para el código, no seis casillas. Con autocomplete="one-time-code" el celular lo propone solo, y se puede pegar.
• El paso 2 se muestra siempre, exista o no el correo. Así no se revela quién tiene cuenta.
• El código vence en 10 minutos y acepta 5 intentos. Reenviar se habilita a los 60 segundos.
• El correo del paso 2 se puede cambiar sin volver a empezar.

Segundo factor

Un paso que viene después de la clave correcta (variantes 1 y 2) y pide un código de 6 dígitos. No es una forma de ingresar por sí sola.

Verifica que eres tú

Escribe el código de 6 dígitos de tu app de autenticación.

Código

No volver a pedirlo en este equipo por 30 días Verificar

¿No tienes tu app a mano? Usar otro método

Métodos, en orden de preferencia

Reglas

• El texto dice de dónde sale el código: “de tu app de autenticación” o “que enviamos a tu correo”. Nunca solo “Ingresa el código”.
• “No volver a pedirlo en este equipo” es la única forma de recordar algo en el login. Viene desmarcada.
• Sin segundo factor después de las variantes 3 y 4. En la 3 ya lo aplica Google; en la 4 el código por correo ya es el factor.

Recuperar la clave

Se llega desde “¿Olvidaste tu clave?” en las variantes 1 y 2. Pide el mismo dato con que se ingresa (RUT, o correo si no tiene RUT), envía un enlace al correo registrado y termina en una página para crear la clave nueva.

Recupera tu clave

Te enviaremos un enlace al correo registrado en tu cuenta.

RUT

Enviar enlace

Volver a ingresar

Crea una clave nueva

Clave nueva

Mínimo 15 caracteres. Puede ser una frase que recuerdes.

Guardar clave

Reglas

• La confirmación es siempre la misma, exista o no la cuenta: “Si los datos corresponden a una cuenta, te enviamos un correo con los pasos. Revisa también la carpeta de spam”.
• No se muestra el correo registrado, ni siquiera oculto en parte (“an•••@empresa.cl”).
• El enlace vence en 60 minutos y sirve una sola vez. Aquí sí va un enlace: es un paso de recuperación, no de ingreso.
• Un solo campo de clave nueva, con botón para mostrarla. No se pide repetirla.
• Al guardar, se cierran las demás sesiones abiertas y se vuelve al login con el aviso “Tu clave quedó actualizada. Ya puedes ingresar”.
• Para quien no tiene RUT, el campo es Correo, igual que en la variante 2.

Página previa a Entra ID

Es el ingreso actual del Portal CCS. El login lo resuelve Microsoft Entra ID, que casi no se puede modificar: no permite agregar enlaces ni lógica. La CCS controla solo una página previa, hecha con Solar, y los textos de las dos versiones de Entra ID.

• Entra ID tiene dos versiones: una para personas con RUT y otra para personas sin RUT chileno. Las dos aceptan RUT o correo; solo cambia lo que dicen.
• En el onboarding, las ejecutivas piden el RUT explicando que es el identificador para ingresar al portal. Por eso nada en el login dice que el correo también sirve.

Ingresa al Portal CCS

Te llevaremos a la página segura de inicio de sesión de la CCS.

Ingresar con RUT

¿No tienes RUT chileno? Ingresa con tu correo

¿No tienes cuenta? Créala aquí ¿Necesitas ayuda?

Textos en Entra ID

Solo cambian la bajada y el texto del campo. El título y el botón quedan como los define Microsoft.

Ver wireframes de la página previa y de Entra ID

Reglas

• Un solo botón principal, “Ingresar con RUT”, que lleva directo a la versión RUT de Entra ID. Sin selector previo ni botón deshabilitado.
• El enlace a la versión correo va al final, separado por una línea. Pregunta si la persona tiene RUT chileno, nunca por su nacionalidad.
• Ninguna pantalla dice que la versión RUT acepta correo.
• La bajada avisa el cambio de página, para que la llegada a Entra ID no parezca un error.
• La página puede recordar que la persona eligió correo, para llevarla directo la próxima vez. Es opcional.

Mensajes y estados

Los avisos van arriba del formulario, bajo el título, con el componente Alertas en su estilo suave. Los errores de un campo van bajo ese campo, como en Formularios.

• Los errores no dicen qué dato falló ni si la cuenta existe: siempre “RUT o clave incorrectos”.
• Después de un error se conserva el RUT o el correo y se borra solo la clave. El foco pasa al aviso.
• El botón nunca está deshabilitado antes de enviar. Si falta un dato, se dice cuál al enviar.

Lo que comparten todas las variantes

Formulario

• Etiqueta visible sobre cada campo. El texto de ejemplo va como ayuda bajo el campo, nunca como único rótulo dentro de él.
• Atributos autocomplete correctos: username en RUT o correo, current-password en la clave, new-password en la clave nueva y one-time-code en los códigos.
• Se puede pegar en todos los campos y usar el gestor de contraseñas del navegador.
• La clave tiene botón para mostrarla. Es un <button type="button"> con aria-pressed, de 40 px, dentro del campo.
• Sin casilla “Recordarme” ni “Recordar RUT”. El navegador ya lo hace.
• Sin CAPTCHA a la vista. Si hace falta, aparece solo después de varios intentos fallidos.

Script para mostrar la clave

El botón del ojo necesita este script, una vez por página:

<script>
document.querySelectorAll('[data-toggle-clave]').forEach(function (btn) {
  btn.addEventListener('click', function () {
    var input = btn.parentElement.querySelector('input');
    var mostrar = input.type === 'password';
    input.type = mostrar ? 'text' : 'password';
    btn.setAttribute('aria-pressed', mostrar ? 'true' : 'false');
    btn.querySelector('iconify-icon').setAttribute('icon', mostrar ? 'solar:eye-closed-bold' : 'solar:eye-bold');
  });
});
</script>

La clave Por confirmar con Seguridad

Propuesta basada en la guía del NIST SP 800-63B-4 (2025):

• Mínimo 15 caracteres si la clave es el único factor; 8 si la cuenta tiene segundo factor.
• Hasta 64 caracteres o más, con espacios. Se aceptan frases.
• Sin exigir mayúsculas, números ni símbolos.
• Sin vencimiento. Solo se pide cambiarla si hay señales de que se filtró.
• Se revisa contra una lista de claves comunes o filtradas, y se rechaza con “Esta clave es muy común o apareció en una filtración. Elige otra”.
• Sin preguntas secretas ni pistas.
• Intentos limitados: después de 5 fallidos seguidos, esperas cada vez más largas.

Combinaciones

Estas son las únicas combinaciones permitidas. Si un sistema necesita otra, se conversa antes de diseñarla.

Fuera de este patrón, por ahora

Lista de revisión

• Usa una sola variante, o una combinación de la lista “Se puede”.
• La página de login es propia, sin menú, banners ni modal.
• Cada campo tiene etiqueta visible y el autocomplete que le corresponde.
• El gestor de contraseñas del navegador guarda y completa el RUT o correo y la clave.
• Se puede pegar en todos los campos.
• La clave se puede mostrar, y el botón se anuncia bien con lector de pantalla.
• Los errores son genéricos y no revelan si la cuenta existe.
• Después de un error se conservan el RUT o el correo.
• Se recorre entera con el teclado y el foco se ve siempre.
• A 375 px y con el teclado abierto, el botón principal sigue a la vista.
• Ningún enlace ni botón apunta a #.

Fuentes

• NIST SP 800-63B-4: Authentication and Authenticator Management (julio de 2025)
• web.dev: Sign-in form best practices
• OWASP: Authentication Cheat Sheet
• Hanko: Magic links vs. email passcodes
• Google: reglas de marca del botón de inicio de sesión
• Gobierno Digital: Integración ClaveÚnica