Virtnet.bond/extensions/Others/Authentik/EJEMPLOS_BOTON.md

🎨 Ejemplos de Personalización del Botón Authentik

📝 Textos de Botón Personalizados

Ejemplos en Español

• "Iniciar sesión con Authentik"
• "Acceder con Authentik"
• "Login SSO"
• "Autenticación Corporativa"
• "Acceso Empresarial"

Ejemplos en Inglés

• "Login with Authentik"
• "Sign in with Authentik"
• "SSO Login"
• "Corporate Authentication"
• "Enterprise Access"

Ejemplos en Francés

• "Se connecter avec Authentik"
• "Connexion Authentik"
• "Authentification SSO"
• "Accès Entreprise"

🖼️ Imágenes de Botón

URLs de Imágenes Recomendadas

Imágenes de Authentik Oficiales

https://raw.githubusercontent.com/goauthentik/authentik/main/web/src/assets/images/icon_left_brand.svg
https://raw.githubusercontent.com/goauthentik/authentik/main/web/src/assets/images/icon.svg

Imágenes Personalizadas

https://tu-servidor.com/images/authentik-logo.png
https://tu-servidor.com/images/company-logo.png
https://tu-servidor.com/images/sso-icon.svg

Formatos Soportados

• SVG (recomendado para escalabilidad)
• PNG (para imágenes con transparencia)
• JPG (para fotografías)
• ICO (para iconos)

Tamaños Recomendados

• Ancho: 20-24px
• Alto: 20-24px
• Formato: Cuadrado o rectangular

🎯 Ejemplos de Configuración

Configuración Básica

{
  "button_text": "Iniciar sesión con Authentik",
  "button_image": "",
  "button_image_alt": "Authentik"
}

Configuración con Imagen Personalizada

{
  "button_text": "Acceso Corporativo",
  "button_image": "https://tu-servidor.com/images/company-logo.png",
  "button_image_alt": "Logo de la empresa"
}

Configuración Solo Imagen

{
  "button_text": "Authentik",
  "button_image": "https://raw.githubusercontent.com/goauthentik/authentik/main/web/src/assets/images/icon.svg",
  "button_image_alt": "Authentik SSO"
}

🔧 Configuración desde el Panel

Pasos para Personalizar

1. Ve a Administración > Extensiones > Authentik SSO

2. Configura el texto del botón:

   • Campo: "Texto del botón"
   • Ejemplo: "Acceso Corporativo"

3. Configura la imagen del botón:

   • Campo: "Imagen del botón"
   • Ejemplo: "https://tu-servidor.com/images/logo.png"

4. Configura el texto alternativo:

   • Campo: "Texto alternativo de la imagen"
   • Ejemplo: "Logo de la empresa"

5. Guarda la configuración

6. Prueba el resultado en la página de login

🎨 Estilos CSS Personalizados

Si necesitas personalizar más el botón, puedes añadir CSS personalizado:

/* Botón personalizado para Authentik */
.authentik-button {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  border-radius: 8px;
  color: white;
  font-weight: 600;
  transition: all 0.3s ease;
}

.authentik-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.authentik-button img {
  filter: brightness(0) invert(1);
}

📱 Responsive Design

El botón se adapta automáticamente a diferentes tamaños de pantalla:

• Desktop: Botón completo con imagen y texto
• Tablet: Botón completo con imagen y texto
• Mobile: Botón completo con imagen y texto (se ajusta al ancho)

🔍 Accesibilidad

Texto Alternativo

• Siempre proporciona un texto alternativo descriptivo
• Ejemplo: "Logo de Authentik" en lugar de "Imagen"

Contraste

• Asegúrate de que el texto sea legible
• Usa colores con suficiente contraste

Navegación por Teclado

• El botón es completamente accesible por teclado
• Usa Tab para navegar hasta el botón
• Usa Enter o Espacio para activar

🚀 Mejores Prácticas

Texto del Botón

• ✅ Mantén el texto corto y claro
• ✅ Usa un lenguaje consistente con tu marca
• ✅ Evita jerga técnica innecesaria

Imagen del Botón

• ✅ Usa imágenes de alta calidad
• ✅ Mantén el tamaño pequeño (20-24px)
• ✅ Usa formatos optimizados (SVG preferible)
• ✅ Asegúrate de que la imagen sea accesible

Configuración

• ✅ Prueba la configuración en diferentes dispositivos
• ✅ Verifica que la imagen se carga correctamente
• ✅ Asegúrate de que el texto alternativo es descriptivo