ClaveÚnica

ClaveÚnica es la identidad digital única para las personas en Chile. Permite acceder de forma segura a los trámites y servicios digitales del Estado con un solo usuario y clave, sin necesidad de crear cuentas distintas en cada institución.

Este patrón describe cómo integrar y presentar el acceso con ClaveÚnica en un servicio digital, considerando los estados del flujo, los mensajes al usuario y los criterios de accesibilidad.

Cuándo usar este patrón

• El servicio requiere identificar de forma fehaciente a la persona usuaria.
• El trámite involucra datos personales, montos, beneficios o decisiones administrativas.
• Se necesita firmar, autorizar o declarar información ante el Estado.

No lo uses cuando el servicio es solo informativo o de consulta pública, ya que exigir autenticación agrega una barrera innecesaria.

Flujo del patrón

1. Punto de entrada: la persona llega al servicio y encuentra el botón de acceso con ClaveÚnica en el header.
2. Redirección: al presionar el botón, se redirige al Portal ClaveÚnica.
3. Autenticación: la persona ingresa su RUN y su ClaveÚnica en el portal oficial.
4. Retorno: tras la autenticación exitosa, el sistema retorna al servicio con la identidad validada.
5. Continuidad: la persona retoma el flujo exactamente donde lo dejó, sin perder los datos ya ingresados.
6. Cierre de sesión: el servicio ofrece una opción visible para cerrar sesión.

Estados de la interfaz

Botón de acceso

Usa el componente cl-clave-unica-button del framework. No construyas un botón propio con cl-button: el componente ya resuelve el ícono, la marca y el comportamiento responsive.

<a class="cl-clave-unica-button cl-header__clave-unica" href="/auth/clave-unica">
  <span class="cl-clave-unica-button__icon" aria-hidden="true">
    <span class="cl-icon" data-icon="clave-unica" aria-hidden="true"></span>
  </span>
  <span class="cl-clave-unica-button__label cl-header__clave-unica-full">ClaveÚnica</span>
  <span class="cl-clave-unica-button__label cl-header__clave-unica-compact">ClaveÚnica</span>
</a>

El componente declara dos etiquetas: la completa se muestra en escritorio y la compacta en pantallas reducidas. Mantén ambas para conservar el comportamiento responsive.

Texto de apoyo sugerido bajo el botón:

Para continuar con este trámite necesitas identificarte con tu ClaveÚnica. Si no tienes una, puedes obtenerla en línea o en un punto de atención presencial.

Recomendaciones de contenido

• Explica por qué se solicita la autenticación antes de mostrar el botón.
• Usa siempre la denominación oficial ClaveÚnica, en una sola palabra y con tilde en la Ú. Evita "Clave Única" separado, "clave única del Estado" u otras variantes.
• Indica qué hacer si la persona no tiene ClaveÚnica o la olvidó, con enlaces a Solicita tu ClaveÚnica y Recupera tu ClaveÚnica.
• Evita mensajes de error genéricos: señala la causa probable y la acción concreta a realizar.
• Informa el tiempo de vigencia de la sesión cuando el trámite sea extenso.

Validación del RUN

Valida el formato del RUN en el cliente antes de enviar el formulario, para evitar un viaje innecesario al proveedor de identidad.

• Acepta 7 u 8 dígitos más dígito verificador, que puede ser un número o la letra K.
• Limpia puntos y espacios antes de validar, y admite el RUN con o sin guión.
• Verifica el dígito verificador con el algoritmo módulo 11.
• Dispara la validación al perder el foco del campo, no en cada tecla.
• Limpia el estado de error cuando la persona vuelve a escribir.

La validación de formato no reemplaza la del proveedor de identidad: solo evita errores evidentes.

Accesibilidad

• El botón debe ser alcanzable y activable mediante teclado.
• El foco debe mantenerse en un punto lógico al retornar desde el portal de autenticación.
• Declara autocomplete="username" en el campo de RUN y autocomplete="current-password" en el de ClaveÚnica.
• Asocia los errores de cada campo con aria-invalid y aria-describedby apuntando al cl-field__hint correspondiente. Reserva aria-live para los mensajes globales del formulario.
• Si ofreces un control para mostrar la clave, decláralo como button con aria-pressed y aria-controls.
• Cuando el botón de envío esté inhabilitado, comunícalo con aria-disabled para que siga siendo alcanzable por teclado.
• Incluye un enlace de salto al contenido principal en las páginas del flujo.
• El contraste del botón debe cumplir WCAG 2.2 nivel AA.
• No dependas solo del color para comunicar el estado de la sesión.

Recursos oficiales

• Sitio oficial de ClaveÚnica
• Documentación técnica de integración

Para validar la accesibilidad de tu implementación, revisa las Herramientas de validación.