- Added sidebar menu components including sidebar-menu-item, sidebar-menu-skeleton, sidebar-menu-sub-button, sidebar-menu-sub-item, sidebar-menu-sub, sidebar-menu, sidebar-provider, sidebar-rail, sidebar-separator, sidebar-trigger, and sidebar. - Introduced skeleton loading states for sidebar items. - Integrated tooltip components for enhanced user interaction. - Developed mobile responsiveness using media queries. - Established authentication flow with Keycloak, including login, logout, and token management. - Implemented server-side redirection based on authentication status. - Enhanced error handling and logging for authentication processes.
219 lines
5.3 KiB
Markdown
219 lines
5.3 KiB
Markdown
# ✅ Verificar Configuración de Microsoft en Keycloak
|
|
|
|
## Paso 1: Verificar si Microsoft está configurado
|
|
|
|
Abre tu navegador y ve a:
|
|
|
|
```
|
|
http://localhost:8080/admin/master/console/#/master/identity-providers
|
|
```
|
|
|
|
Login: `admin` / `admin`
|
|
|
|
### ¿Qué deberías ver?
|
|
|
|
Si Microsoft está configurado, verás en la lista de Identity Providers:
|
|
|
|
- ✅ **microsoft** (o el alias que hayas usado)
|
|
- Con estado: **Enabled** ✅
|
|
|
|
### Si NO ves "microsoft" en la lista:
|
|
|
|
**¡Necesitas configurarlo!** Sigue estos pasos:
|
|
|
|
---
|
|
|
|
## Paso 2: Configurar Microsoft en Keycloak (SI NO ESTÁ CONFIGURADO)
|
|
|
|
### 2.1 Crear App en Azure AD PRIMERO
|
|
|
|
Antes de configurar Keycloak, necesitas una aplicación en Azure:
|
|
|
|
1. Ve a [Azure Portal](https://portal.azure.com)
|
|
2. Busca **Azure Active Directory** o **Microsoft Entra ID**
|
|
3. **App registrations** → **New registration**
|
|
4. Configura:
|
|
|
|
- **Name**: `Anexo76`
|
|
- **Supported account types**: `Accounts in any organizational directory (Any Azure AD - Multitenant)`
|
|
- **Redirect URI**:
|
|
- Platform: `Web`
|
|
- URI: `http://localhost:8080/realms/master/broker/microsoft/endpoint`
|
|
- Click **Register**
|
|
5. **Copia el Application (client) ID** - lo necesitarás
|
|
6. Ve a **Certificates & secrets** → **New client secret**
|
|
|
|
- Descripción: `keycloak`
|
|
- Expira: 24 meses
|
|
- Click **Add**
|
|
- **¡COPIA EL SECRET VALUE AHORA!** (solo se muestra una vez)
|
|
|
|
### 2.2 Agregar Microsoft a Keycloak
|
|
|
|
1. En Keycloak Admin Console: http://localhost:8080
|
|
2. Login: `admin` / `admin`
|
|
3. Menú lateral: **Identity providers**
|
|
4. Dropdown: **Add provider** → Selecciona **Microsoft**
|
|
5. Configura:
|
|
|
|
```
|
|
Alias: microsoft
|
|
Display name: Microsoft
|
|
Enabled: ON ✅
|
|
Store tokens: ON ✅
|
|
Trust email: ON ✅
|
|
First login flow: first broker login
|
|
|
|
Client ID: [PEGA TU APPLICATION ID DE AZURE]
|
|
Client Secret: [PEGA TU SECRET DE AZURE]
|
|
```
|
|
|
|
6. Click **Save**
|
|
7. Ve a la pestaña **Mappers** y agrega estos 4 mappers:
|
|
|
|
**Mapper 1: email**
|
|
|
|
```
|
|
Name: email
|
|
Mapper type: Attribute Importer
|
|
Social profile JSON field path: email
|
|
User attribute name: email
|
|
```
|
|
|
|
**Mapper 2: firstName**
|
|
|
|
```
|
|
Name: firstName
|
|
Mapper type: Attribute Importer
|
|
Social profile JSON field path: given_name
|
|
User attribute name: firstName
|
|
```
|
|
|
|
**Mapper 3: lastName**
|
|
|
|
```
|
|
Name: lastName
|
|
Mapper type: Attribute Importer
|
|
Social profile JSON field path: family_name
|
|
User attribute name: lastName
|
|
```
|
|
|
|
**Mapper 4: username**
|
|
|
|
```
|
|
Name: username
|
|
Mapper type: Username Template Importer
|
|
Template: ${CLAIM.email}
|
|
Target: BROKER_USERNAME
|
|
```
|
|
|
|
---
|
|
|
|
## Paso 4: Verificar en tu App
|
|
|
|
1. Asegúrate de que el frontend esté corriendo: `http://localhost:5173`
|
|
2. Ve a la página de login: `http://localhost:5173/login`
|
|
3. Ingresa un tenant (ej: `aduanasoft`)
|
|
4. Click en el botón **"Iniciar sesión con Microsoft"**
|
|
|
|
### ¿Qué debería pasar?
|
|
|
|
✅ **Correcto:**
|
|
|
|
- Te redirige a Microsoft login
|
|
- Ves la página de Microsoft pidiendo tu email/contraseña
|
|
- Después de autenticarte, vuelves a tu app
|
|
|
|
❌ **Incorrecto (lo que te está pasando ahora):**
|
|
|
|
- Te lleva a la página de login de Keycloak
|
|
- Ves el usuario "admin" ya logueado
|
|
|
|
---
|
|
|
|
## Troubleshooting Común
|
|
|
|
### Error: "Identity provider not found"
|
|
|
|
- El alias en Keycloak debe ser exactamente `microsoft` (minúsculas)
|
|
- O cambia el código: `loginWithProvider('TU_ALIAS_EXACTO')`
|
|
|
|
### Error: redirect_uri_mismatch en Azure
|
|
|
|
- La URI en Azure debe ser EXACTAMENTE:
|
|
```
|
|
http://localhost:8080/realms/master/broker/microsoft/endpoint
|
|
```
|
|
- Nota el `/endpoint` al final
|
|
|
|
### Error: Unexpected error when authenticating with identity provider
|
|
|
|
```bash
|
|
docker cp azure.crt anexo76-keycloak:/
|
|
docker exec -it -u root anexo76-keycloak /bin/bash
|
|
|
|
keytool -importcert -trustcacerts -file /azure.crt \
|
|
-keystore /etc/java/java-21-openjdk/java-21-openjdk-21.0.8.0.9-1.el9.x86_64/lib/security/cacerts \
|
|
-alias azure-root -storepass changeit -noprompt
|
|
|
|
```
|
|
|
|
### Me redirige pero muestra error en Microsoft
|
|
|
|
- Verifica que el Client ID y Secret en Keycloak sean correctos
|
|
- Verifica que la app en Azure esté habilitada
|
|
|
|
### Funciona pero el usuario no tiene tenant_id
|
|
|
|
- Esto es normal en el primer login
|
|
- Puedes configurar un mapper adicional o manejarlo en tu backend
|
|
|
|
---
|
|
|
|
## Comando Rápido de Verificación
|
|
|
|
Ejecuta esto en una terminal:
|
|
|
|
```bash
|
|
# Verificar si el endpoint del broker existe
|
|
curl -s -o /dev/null -w "%{http_code}" "http://localhost:8080/realms/master/broker/microsoft/login?client_id=test&redirect_uri=http://localhost"
|
|
```
|
|
|
|
**Resultados:**
|
|
|
|
- `302` = ✅ Microsoft está configurado (redirige a Microsoft)
|
|
- `404` = ❌ Microsoft NO está configurado en Keycloak
|
|
- `500` = ⚠️ Hay un error de configuración
|
|
|
|
---
|
|
|
|
## Resumen Rápido
|
|
|
|
**Para que funcione necesitas:**
|
|
|
|
1. ✅ App Registration en Azure AD con Client ID y Secret
|
|
2. ✅ Identity Provider "microsoft" configurado en Keycloak
|
|
3. ✅ Redirect URI en Azure: `http://localhost:8080/realms/master/broker/microsoft/endpoint`
|
|
4. ✅ Variables de entorno en frontend (.env):
|
|
```
|
|
VITE_KEYCLOAK_URL=http://localhost:8080
|
|
VITE_KEYCLOAK_REALM=master
|
|
VITE_KEYCLOAK_CLIENT_ID=anexo76-frontend
|
|
```
|
|
|
|
**El flujo correcto es:**
|
|
|
|
```
|
|
Tu App → Keycloak Broker → Microsoft Login → Keycloak → Tu App
|
|
```
|
|
|
|
**Lo que está pasando ahora:**
|
|
|
|
```
|
|
Tu App → Keycloak Login (porque no encuentra el provider)
|
|
```
|
|
|
|
---
|
|
|
|
¿Necesitas ayuda con la configuración? Primero verifica en Keycloak Admin Console si existe el Identity Provider "microsoft".
|