215 lines
7.0 KiB
Markdown
215 lines
7.0 KiB
Markdown
# Configuración de Login con Microsoft (Azure AD)
|
|
|
|
Esta guía te ayudará a configurar el login con Microsoft junto con el login tradicional.
|
|
|
|
## Parte 1: Configurar Aplicación en Azure AD
|
|
|
|
### 1.1 Crear App Registration en Azure Portal
|
|
|
|
1. Ve a [Azure Portal](https://portal.azure.com)
|
|
2. Busca "Azure Active Directory" o "Microsoft Entra ID"
|
|
3. En el menú lateral, selecciona **App registrations**
|
|
4. Clic en **New registration**
|
|
5. Configura:
|
|
- **Name**: `Anexo76`
|
|
- **Supported account types**:
|
|
- "Accounts in any organizational directory (Any Azure AD directory - Multitenant)"
|
|
- O "Accounts in any organizational directory and personal Microsoft accounts" si quieres permitir cuentas @outlook.com, @hotmail.com
|
|
- **Redirect URI**:
|
|
- Platform: `Web`
|
|
- URI: `http://localhost:8080/realms/master/broker/microsoft/endpoint`
|
|
- Clic en **Register**
|
|
|
|
### 1.2 Obtener Client ID y crear Client Secret
|
|
|
|
1. En la página de tu aplicación, copia el **Application (client) ID**
|
|
2. Ve a **Certificates & secrets** en el menú lateral
|
|
3. Clic en **New client secret**
|
|
4. Descripción: `keycloak-integration`
|
|
5. Expires: Selecciona el tiempo que prefieras (ej: 24 months)
|
|
6. Clic en **Add**
|
|
7. **IMPORTANTE**: Copia el **Value** del secret inmediatamente (solo se muestra una vez)
|
|
|
|
### 1.3 Configurar API Permissions (Opcional pero recomendado)
|
|
|
|
1. Ve a **API permissions**
|
|
2. Deberías ver `Microsoft Graph` > `User.Read` (Delegated) - esto es suficiente
|
|
3. Si quieres más información del usuario, agrega:
|
|
- `email`
|
|
- `profile`
|
|
- `openid`
|
|
|
|
## Parte 2: Configurar Identity Provider en Keycloak
|
|
|
|
### 2.1 Agregar Microsoft como Identity Provider
|
|
|
|
1. Abre Keycloak Admin Console: http://localhost:8080
|
|
2. Login como admin
|
|
3. Asegúrate de estar en el realm correcto (probablemente `master`)
|
|
4. En el menú lateral, ve a **Identity providers**
|
|
5. En el dropdown "Add provider", selecciona **Microsoft**
|
|
6. Configura:
|
|
- **Alias**: `microsoft` (o cualquier nombre que prefieras)
|
|
- **Display name**: `Microsoft` (esto es lo que verá el usuario)
|
|
- **Enabled**: ON
|
|
- **Store tokens**: ON (opcional, para poder usar tokens de Microsoft después)
|
|
- **Stored tokens readable**: OFF
|
|
- **Trust email**: ON
|
|
- **First login flow**: `first broker login`
|
|
- **Client ID**: Pega el Application (client) ID de Azure
|
|
- **Client Secret**: Pega el client secret que copiaste
|
|
- Clic en **Save**
|
|
|
|
### 2.2 Configurar Mappers (Mapeo de atributos)
|
|
|
|
Después de guardar, configura los mappers para traer información del usuario de Microsoft:
|
|
|
|
1. En la misma página del Identity Provider, ve a la pestaña **Mappers**
|
|
2. Clic en **Add mapper**
|
|
|
|
**Mapper 1: Email**
|
|
- Name: `email`
|
|
- Sync mode override: `inherit`
|
|
- Mapper type: `Attribute Importer`
|
|
- Social profile JSON field path: `email`
|
|
- User attribute name: `email`
|
|
- Clic en **Save**
|
|
|
|
**Mapper 2: First Name**
|
|
- Name: `firstName`
|
|
- Mapper type: `Attribute Importer`
|
|
- Social profile JSON field path: `given_name`
|
|
- User attribute name: `firstName`
|
|
- Clic en **Save**
|
|
|
|
**Mapper 3: Last Name**
|
|
- Name: `lastName`
|
|
- Mapper type: `Attribute Importer`
|
|
- Social profile JSON field path: `family_name`
|
|
- User attribute name: `lastName`
|
|
- Clic en **Save**
|
|
|
|
**Mapper 4: Username**
|
|
- Name: `username`
|
|
- Mapper type: `Username Template Importer`
|
|
- Template: `${CLAIM.email}`
|
|
- Target: `BROKER_USERNAME`
|
|
- Clic en **Save**
|
|
|
|
### 2.3 Configurar Redirect URI en Azure (si es necesario)
|
|
|
|
Si usas un realm diferente a `master`, actualiza la Redirect URI en Azure:
|
|
|
|
- Formato: `http://localhost:8080/realms/{REALM_NAME}/broker/microsoft/endpoint`
|
|
- Para producción: `https://tu-dominio.com/realms/{REALM_NAME}/broker/microsoft/endpoint`
|
|
|
|
## Parte 3: Actualizar Frontend
|
|
|
|
El frontend necesita detectar y mostrar el botón de Microsoft. Keycloak proporciona esta información automáticamente.
|
|
|
|
### 3.1 Obtener Identity Providers disponibles
|
|
|
|
Tu frontend puede consultar los Identity Providers disponibles:
|
|
|
|
**Endpoint de Keycloak:**
|
|
```
|
|
GET http://localhost:8080/realms/master/broker-login/identity-providers
|
|
```
|
|
|
|
Esto retorna algo como:
|
|
```json
|
|
[
|
|
{
|
|
"alias": "microsoft",
|
|
"displayName": "Microsoft",
|
|
"providerId": "microsoft",
|
|
"enabled": true
|
|
}
|
|
]
|
|
```
|
|
|
|
### 3.2 URL para iniciar flujo de Microsoft
|
|
|
|
Para iniciar el login con Microsoft, redirige al usuario a:
|
|
```
|
|
http://localhost:8080/realms/master/broker/microsoft/login?client_id=anexo76-frontend&redirect_uri=http://localhost:5173/auth/callback
|
|
```
|
|
|
|
Parámetros:
|
|
- `client_id`: Tu client ID de frontend en Keycloak (`anexo76-frontend`)
|
|
- `redirect_uri`: URL a la que Keycloak redirigirá después del login exitoso
|
|
- `response_type`: `code` (para authorization code flow)
|
|
- `scope`: `openid profile email`
|
|
|
|
### 3.3 Manejar el Callback
|
|
|
|
Después del login con Microsoft, Keycloak redirige a tu `redirect_uri` con un `code`:
|
|
```
|
|
http://localhost:5173/auth/callback?code=abc123...&session_state=xyz...
|
|
```
|
|
|
|
Tu frontend debe:
|
|
1. Extraer el `code` del query string
|
|
2. Intercambiar el `code` por tokens llamando a tu backend
|
|
3. Tu backend llama a Keycloak para obtener los tokens
|
|
|
|
## Parte 4: Testing
|
|
|
|
### 4.1 Verificar que Microsoft aparece en la página de login
|
|
|
|
Ve a:
|
|
```
|
|
http://localhost:8080/realms/master/protocol/openid-connect/auth?client_id=anexo76-frontend&redirect_uri=http://localhost:5173&response_type=code
|
|
```
|
|
|
|
Deberías ver:
|
|
- Formulario de login tradicional (usuario/contraseña)
|
|
- Botón o link de "Microsoft" para login social
|
|
|
|
### 4.2 Probar el flujo completo
|
|
|
|
1. Haz clic en el botón de Microsoft
|
|
2. Serás redirigido a Microsoft login
|
|
3. Ingresa credenciales de Microsoft
|
|
4. Microsoft redirige a Keycloak
|
|
5. Keycloak crea/actualiza el usuario y redirige a tu app
|
|
6. Tu app obtiene el token y autentica al usuario
|
|
|
|
## Notas Importantes
|
|
|
|
### Multi-tenant con Microsoft
|
|
|
|
Si tu app es multi-tenant y quieres que cada tenant use su propio Azure AD:
|
|
1. Crea múltiples Identity Providers en Keycloak (uno por tenant)
|
|
2. Usa aliases diferentes: `microsoft-tenant1`, `microsoft-tenant2`
|
|
3. En el frontend, muestra el botón correcto según el tenant
|
|
|
|
### Asignación automática de tenant
|
|
|
|
Cuando un usuario se loguea por primera vez con Microsoft, puedes:
|
|
1. Usar un mapper para asignar atributos basados en el dominio del email
|
|
2. Configurar "Default Tenant" en tu backend si el email es de un dominio conocido
|
|
3. Solicitar al usuario que seleccione su tenant en el primer login
|
|
|
|
### Producción
|
|
|
|
Para producción, recuerda:
|
|
1. Actualizar las Redirect URIs en Azure con tu dominio real
|
|
2. Usar HTTPS
|
|
3. Configurar correctamente los Web Origins en Keycloak
|
|
4. Usar variables de entorno para las configuraciones
|
|
|
|
## Troubleshooting
|
|
|
|
### Error: redirect_uri_mismatch
|
|
- Verifica que la URI en Azure coincida exactamente con la de Keycloak
|
|
- Formato: `https://tu-dominio.com/realms/{realm}/broker/{alias}/endpoint`
|
|
|
|
### Usuario se crea pero no tiene tenant_id
|
|
- Configura un mapper en Keycloak para asignar tenant_id automáticamente
|
|
- O maneja esto en tu backend en el primer login
|
|
|
|
### No aparece el botón de Microsoft
|
|
- Verifica que el Identity Provider esté habilitado en Keycloak
|
|
- Revisa que el Display Name esté configurado
|