188 lines
4.2 KiB
Markdown
188 lines
4.2 KiB
Markdown
# 🎨 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
|
|
|
|
```json
|
|
{
|
|
"button_text": "Iniciar sesión con Authentik",
|
|
"button_image": "",
|
|
"button_image_alt": "Authentik"
|
|
}
|
|
```
|
|
|
|
### Configuración con Imagen Personalizada
|
|
|
|
```json
|
|
{
|
|
"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
|
|
|
|
```json
|
|
{
|
|
"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:
|
|
|
|
```css
|
|
/* 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
|