Proveedor de acceso.

Patrón canónico de proveedor de acceso para cuenta, admin, usaia, firmas y documentos.

Verlo por niveles

Primero el componente, después la variación de marca y finalmente su uso dentro de una página.

Nivel 1Componente canónico

Al terminar, vuelves a la página en la que estabas.

Nivel 2Círculo de Santiago · variación

Al terminar, vuelves a la página en la que estabas.

Nivel 3Dentro de una página

Sitio · sección

Al terminar, vuelves a la página en la que estabas.

Ayuda · legal · estado

Ver y copiar el código de este render

HTML del nivel canónico

<div class="ui-sample ui-auth-fragment" data-auth-source="cis-auth-authentik" data-auth-provider="true"><button class="ui-auth-provider ui-provider-pill" type="button" aria-describedby="auth-provider-button-0-help"><span class="ui-provider-mark ui-provider-mark--google" aria-hidden="true"><svg viewBox="0 0 24 24" aria-hidden="true"><path fill="#4285f4" d="M21.6 12.2c0-.7-.1-1.4-.2-2H12v3.9h5.4a4.6 4.6 0 0 1-2 3v2.6h3.3c1.9-1.8 2.9-4.4 2.9-7.5Z"></path><path fill="#34a853" d="M12 22c2.7 0 5-.9 6.7-2.3l-3.3-2.6c-.9.6-2.1 1-3.4 1a5.9 5.9 0 0 1-5.5-4.1H3.1v2.6A10 10 0 0 0 12 22Z"></path><path fill="#fbbc05" d="M6.5 14a6 6 0 0 1 0-3.9V7.4H3.1a10 10 0 0 0 0 9.2L6.5 14Z"></path><path fill="#ea4335" d="M12 6a5.4 5.4 0 0 1 3.8 1.5l2.9-2.9A9.7 9.7 0 0 0 12 2a10 10 0 0 0-8.9 5.4l3.4 2.7A5.9 5.9 0 0 1 12 6Z"></path></svg></span><span>Continuar con Google</span></button><small id="auth-provider-button-0-help">Al terminar, vuelves a la página en la que estabas.</small></div>

Variaciones por marca y sitio

Cada cambio visible declara su autoridad; lo que permanece canónico no se vuelve a inventar en el producto.

innovacionsantiago.cl

Compañía de Innovación de Santiago

Autoridad: CONSTITUTION.md + LOGOS-CANONICOS.md

Al terminar, vuelves a la página en la que estabas.

Cambia en esta marca

Navegación y contenido propios del servicio
Acento reservado para acciones y datos

Permanece canónico

Mark CIS y namebrand de tres líneas
IBM Plex Sans, foco, espaciado y anatomía

circulodesantiago.cl

Círculo de Santiago

Autoridad: core-style/DECISIONES.md M10 y LOGOS-CANONICOS.md

Al terminar, vuelves a la página en la que estabas.

Cambia en esta marca

Mark circular y namebrand Círculo de Santiago en caja normal
Contenido societario y navegación propia

Permanece canónico

Misma estructura, orden de cuenta y footer
Tipografía, foco y comportamiento canónicos

Comparación histórica recuperable

Compara la propuesta con cortes reales del repositorio. La ausencia de una muestra se declara y nunca se reconstruye de memoria.

Preparando comparación histórica…

Antes / r19

La comparación convierte una regla abstracta en una diferencia visible y verificable.

r19 · correctoContrato canónico renderizado

Al terminar, vuelves a la página en la que estabas.

Usa HTML semántico, foco visible y estados explícitos.
Conserva contenido útil a 320 px y sin JavaScript.

Antes · problema observadoAnti-ejemplo no interactivo

correo@ejemplo.cl!Algo salió mal

No agregues sombras, radios ni franjas laterales decorativas.
No uses color, placeholder o icono como única explicación.

Responsive

La misma anatomía debe conservar lectura, foco y acciones sin cortar contenido ni crear scroll horizontal en la página.

320 pxMóvil y zoom

Al terminar, vuelves a la página en la que estabas.

1280 pxEscritorio

Al terminar, vuelves a la página en la que estabas.

Cobertura

Dimensión	Contrato
Propietario canónico	Sistema de diseño CIS y cis-auth · core/core-style
Consumidores	Cuenta, Admin, usaia, Firmas y Documentos
Dependencias	HTML nativo, validación de servidor
Estado	candidato

Evidencia de adopción

Patrón propuesto. 0 implementaciones observadas en 0 repositorios.

La observación demuestra uso existente; la aceptación canónica sigue dependiendo de esta ficha y de su propietario.

Dato	Resultado
Clasificación	Patrón propuesto
Implementaciones	0 implementaciones observadas
Repositorios	Ningún repositorio observado
Snapshot	kit/componentes/componentes-observados.json

Consumidores observados

El inventario conserva repositorio, archivo fuente y criterio de asociación. Observar una implementación no la convierte automáticamente en canónica.

Ver implementaciones asociadas a Proveedor de acceso

Estados

Estado requerido
vacío
completo
inválido
disabled

Accesibilidad

Conserva nombre accesible, orden de lectura y foco visible.
Funciona a 320 px, con zoom de 200% y texto largo.
El color nunca es la única señal de estado o acción.
El contenido esencial permanece disponible sin JavaScript.

Código HTML

Copia el bloque completo; después cambia contenido y destinos, no su anatomía.

Código de referencia

<div class="ui-sample ui-auth-fragment" data-auth-source="cis-auth-authentik" data-auth-provider="true"><button class="ui-auth-provider ui-provider-pill" type="button" aria-describedby="auth-provider-button-0-help"><span class="ui-provider-mark ui-provider-mark--google" aria-hidden="true"><svg viewBox="0 0 24 24" aria-hidden="true"><path fill="#4285f4" d="M21.6 12.2c0-.7-.1-1.4-.2-2H12v3.9h5.4a4.6 4.6 0 0 1-2 3v2.6h3.3c1.9-1.8 2.9-4.4 2.9-7.5Z"></path><path fill="#34a853" d="M12 22c2.7 0 5-.9 6.7-2.3l-3.3-2.6c-.9.6-2.1 1-3.4 1a5.9 5.9 0 0 1-5.5-4.1H3.1v2.6A10 10 0 0 0 12 22Z"></path><path fill="#fbbc05" d="M6.5 14a6 6 0 0 1 0-3.9V7.4H3.1a10 10 0 0 0 0 9.2L6.5 14Z"></path><path fill="#ea4335" d="M12 6a5.4 5.4 0 0 1 3.8 1.5l2.9-2.9A9.7 9.7 0 0 0 12 2a10 10 0 0 0-8.9 5.4l3.4 2.7A5.9 5.9 0 0 1 12 6Z"></path></svg></span><span>Continuar con Google</span></button><small id="auth-provider-button-0-help">Al terminar, vuelves a la página en la que estabas.</small></div>

Código TAILWIND

Copia el bloque completo; después cambia contenido y destinos, no su anatomía.

Código de referencia

<div class="ui-sample ui-auth-fragment border border-slate-300 bg-white p-4 text-slate-950" data-auth-source="cis-auth-authentik" data-auth-provider="true"><button class="ui-auth-provider ui-provider-pill border border-slate-950 px-3 py-2 focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed" type="button" aria-describedby="auth-provider-button-0-help"><span class="ui-provider-mark ui-provider-mark--google" aria-hidden="true"><svg class="h-auto w-full" viewBox="0 0 24 24" aria-hidden="true"><path fill="#4285f4" d="M21.6 12.2c0-.7-.1-1.4-.2-2H12v3.9h5.4a4.6 4.6 0 0 1-2 3v2.6h3.3c1.9-1.8 2.9-4.4 2.9-7.5Z"></path><path fill="#34a853" d="M12 22c2.7 0 5-.9 6.7-2.3l-3.3-2.6c-.9.6-2.1 1-3.4 1a5.9 5.9 0 0 1-5.5-4.1H3.1v2.6A10 10 0 0 0 12 22Z"></path><path fill="#fbbc05" d="M6.5 14a6 6 0 0 1 0-3.9V7.4H3.1a10 10 0 0 0 0 9.2L6.5 14Z"></path><path fill="#ea4335" d="M12 6a5.4 5.4 0 0 1 3.8 1.5l2.9-2.9A9.7 9.7 0 0 0 12 2a10 10 0 0 0-8.9 5.4l3.4 2.7A5.9 5.9 0 0 1 12 6Z"></path></svg></span><span>Continuar con Google</span></button><small class="text-sm text-slate-600" id="auth-provider-button-0-help">Al terminar, vuelves a la página en la que estabas.</small></div>

Código REACT

Copia el bloque completo; después cambia contenido y destinos, no su anatomía.

Código de referencia

import type { MouseEventHandler } from "react";

const LABELS = { google: "Continuar con Google", microsoft: "Continuar con Microsoft" } as const;

export interface AuthProviderButtonProps {
  /** Proveedor de identidad; define la marca y el texto por defecto. */
  provider?: "google" | "microsoft";
  /** Texto del botón; por defecto, «Continuar con» y el nombre del proveedor. */
  label?: string;
  /** Prefijo de ids: la ayuda usa `${id}-help`. Usa uno distinto por botón en la página. */
  id?: string;
  /** Texto bajo el botón que explica adónde vuelve la sesión. */
  help?: string;
  disabled?: boolean;
  onClick?: MouseEventHandler<HTMLButtonElement>;
  className?: string;
}

/**
 * Botón para iniciar sesión con un proveedor externo (Google o Microsoft) a través de cis-auth, con una línea de ayuda.
 *
 * La marca del proveedor es decorativa (`aria-hidden`); el nombre accesible es el texto del botón.
 *
 * @example <AuthProviderButton id="google" onClick={entrarConGoogle} />
 * @example <AuthProviderButton id="microsoft" provider="microsoft" onClick={entrarConMicrosoft} />
 */
export function AuthProviderButton({
  provider = "google",
  label,
  id = "auth-provider-button-0",
  help = "Al terminar, vuelves a la página en la que estabas.",
  disabled,
  onClick,
  className,
}: AuthProviderButtonProps) {
  const helpId = help ? `${id}-help` : undefined;
  return (
    <div className={["ui-auth-fragment", className].filter(Boolean).join(" ")} data-auth-source="cis-auth-authentik" data-auth-provider>
      <button className="ui-auth-provider ui-provider-pill" type="button" aria-describedby={helpId} disabled={disabled} onClick={onClick}>
        <span className={`ui-provider-mark ui-provider-mark--${provider}`} aria-hidden="true">
          {provider === "google" ? (
            <svg viewBox="0 0 24 24" aria-hidden="true"><path fill="#4285f4" d="M21.6 12.2c0-.7-.1-1.4-.2-2H12v3.9h5.4a4.6 4.6 0 0 1-2 3v2.6h3.3c1.9-1.8 2.9-4.4 2.9-7.5Z"></path><path fill="#34a853" d="M12 22c2.7 0 5-.9 6.7-2.3l-3.3-2.6c-.9.6-2.1 1-3.4 1a5.9 5.9 0 0 1-5.5-4.1H3.1v2.6A10 10 0 0 0 12 22Z"></path><path fill="#fbbc05" d="M6.5 14a6 6 0 0 1 0-3.9V7.4H3.1a10 10 0 0 0 0 9.2L6.5 14Z"></path><path fill="#ea4335" d="M12 6a5.4 5.4 0 0 1 3.8 1.5l2.9-2.9A9.7 9.7 0 0 0 12 2a10 10 0 0 0-8.9 5.4l3.4 2.7A5.9 5.9 0 0 1 12 6Z"></path></svg>
          ) : (
            <><i></i><i></i><i></i><i></i></>
          )}
        </span>
        <span>{label ?? LABELS[provider]}</span>
      </button>
      {help ? <small id={helpId}>{help}</small> : null}
    </div>
  );
}