intellisoft-identity-solution
v0.3.8
Published
Stencil Component Starter
Readme
🔐 Identity Solution
Sistema de Verificación de Identidad Multi-Step con OTP
Una solución completa de verificación de identidad construida con Stencil.js que permite a los usuarios validar su identidad a través de un proceso de múltiples pasos, incluyendo verificación OTP por SMS y llamadas telefónicas.
🚀 Características Principales
✨ Proceso Multi-Step
- Paso 1: Recopilación de información personal
- Paso 2: Verificación de identidad con OTP
- Paso 3: Preguntas de seguridad
- Paso 4: Confirmación final
📱 Métodos de Verificación
- SMS: Envío de códigos OTP por mensaje de texto
- Llamada Telefónica: Verificación por llamada automática
- Email: Verificación por correo electrónico
🏗️ Arquitectura del Proyecto
src/
├── components/
│ └── my-component/
│ ├── my-component.tsx # Componente principal
│ └── my-component.css # Estilos del componente
├── services/
│ └── api.service.ts # Servicios de API
├── config/
│ └── environment.ts # Configuración de ambiente
└── global/
└── app.css # Estilos globales🔧 Tecnologías Utilizadas
| Tecnología | Versión | Propósito | |------------|---------|-----------| | Stencil.js | Latest | Framework de Web Components | | TypeScript | Latest | Tipado estático | | Fetch API | Native | Peticiones HTTP | | FormData | Native | Envío de datos |
📦 Instalación
Prerrequisitos
- Node.js (v14 o superior)
- npm o yarn
Pasos de Instalación
# Clonar el repositorio
git clone <repository-url>
cd identity-solution
# Instalar dependencias
npm install
# Iniciar servidor de desarrollo
npm start
# Construir para producción
npm run build
# Ejecutar tests
npm test🎯 Uso del Componente
HTML Básico
<!DOCTYPE html>
<html>
<head>
<script type="module" src="https://unpkg.com/identity-solution/dist/identity-solution/identity-solution.esm.js"></script>
</head>
<body>
<my-component></my-component>
</body>
</html>React
import 'identity-solution/my-component';
function App() {
return (
<div>
<my-component></my-component>
</div>
);
}Angular
1. Configurar el módulo principal (app.module.ts)
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { defineCustomElements } from 'identity-solution/my-component';
// Importante: Registrar los elementos personalizados
defineCustomElements();
@NgModule({
schemas: [CUSTOM_ELEMENTS_SCHEMA] // Importante: Permitir elementos personalizados
})
export class AppModule { }2. Usar el componente en tu template
@Component({
template: `
<new-account-modal
[channel]="'TIENDAPROD'"
[external-id]="'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...'"
(validationCompleted)="onValidationCompleted($event)">
</new-account-modal>
`
})
export class MyComponent {
onValidationCompleted(event: CustomEvent) {
const result = event.detail;
// Ejemplo del objeto que recibirás:
// {
// hasError: boolean;
// errorDesc: string;
// errorInter: string;
// errorNum: number;
// code: number;
// validationPassed: boolean;
// identityId: string;
// }
if (result.hasError) {
console.log('Error en validación:', result.errorDesc);
console.log('Código de error:', result.errorInter);
console.log('ID de identidad:', result.identityId);
} else {
console.log('Validación exitosa');
console.log('ID de identidad:', result.identityId);
}
}
}🔌 API Services
Configuración de Ambiente
// src/config/environment.ts
export const environment = {
apiBaseUrl: "https://miclarobot.claropr.com/api2",
isProduction: true
};Endpoints Disponibles
| Método | Endpoint | Descripción |
|--------|----------|-------------|
| createSession() | /api/v1/IdentityProxy/session | Crear sesión de identidad |
| getSessionInfo() | /api/v1/IdentityProxy/session/get | Obtener información de sesión |
| validateIdentity() | /api/v1/IdentityProxy/validate | Validar datos de identidad |
| getAuthMethods() | /api/v1/IdentityProxy/config/methods | Obtener métodos de autenticación |
| sendOtp() | /api/v1/IdentityProxy/otp/send | Enviar código OTP |
| verifyOtp() | /api/v1/IdentityProxy/otp/verify | Verificar código OTP |
| getSecurityQuestions() | /api/v1/IdentityProxy/questions/get | Obtener preguntas de seguridad |
| verifySecurityQuestions() | /api/v1/IdentityProxy/questions/verify | Verificar respuestas |
Ejemplo de Uso
import { ApiService } from './services/api.service';
const apiService = new ApiService();
// Crear sesión
const session = await apiService.createSession('web', 'user123');
// Enviar OTP
const otpResult = await apiService.sendOtp(session.identityId, 'sms');
// Verificar OTP
const verification = await apiService.verifyOtp(session.identityId, '123456');🎨 Características de UI/UX
✨ Diseño Responsivo
- Adaptable a móviles, tablets y desktop
- Interfaz intuitiva y moderna
- Animaciones suaves y transiciones
🔄 Estados de Carga
- Indicadores de progreso
- Mensajes de estado claros
- Manejo de errores amigable
📱 Optimización Móvil
- Touch-friendly
- Navegación por gestos
- Tamaños de fuente optimizados
🛡️ Validaciones Implementadas
✅ Validación de Parámetros
- Strings: Longitud mínima y requerida
- Email: Formato válido
- Teléfono: Formato internacional
- SSN: Formato XXX-XX-XXXX
- Código Postal: 5 dígitos
- Fecha: Formato válido
- OTP: 6 dígitos numéricos
🔒 Seguridad
- Validación en producción vs desarrollo
- Manejo de errores específicos
- Logging de errores para debugging
🚀 Despliegue
Desarrollo
npm start
# Servidor en http://localhost:3333Producción
npm run build
# Archivos generados en /distDocker (Opcional)
FROM node:16-alpine
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
EXPOSE 3333
CMD ["npm", "start"]📊 Monitoreo y Logs
Logs de Desarrollo
// Solo en desarrollo
if (isDevelopment) {
console.log('🌍 Environment Config:', {
environment: getCurrentEnvironment(),
apiBaseUrl,
isProduction
});
}Manejo de Errores
try {
const result = await apiService.sendOtp(identityId, 'sms');
} catch (error) {
console.error('Error en sendOtp:', error);
// Manejo específico del error
}🤝 Contribución
- Fork el proyecto
- Crea una rama para tu feature (
git checkout -b feature/AmazingFeature) - Commit tus cambios (
git commit -m 'Add some AmazingFeature') - Push a la rama (
git push origin feature/AmazingFeature) - Abre un Pull Request
📝 Licencia
Este proyecto está bajo la Licencia MIT. Ver el archivo LICENSE para más detalles.
🆘 Soporte
- Documentación: Wiki del proyecto
- Issues: GitHub Issues
- Email: [email protected]
🎉 Agradecimientos
- Stencil.js por el framework de Web Components
- Claro PR por la infraestructura de APIs
- Comunidad por el feedback y contribuciones
Identity Solution Component
Componente de validación de identidad para Angular desarrollado con Stencil.
Instalación
1. Configurar el módulo principal (app.module.ts)
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { defineCustomElements } from 'identity-solution/my-component';
// Importante: Registrar los elementos personalizados
defineCustomElements();
@NgModule({
schemas: [CUSTOM_ELEMENTS_SCHEMA] // Importante: Permitir elementos personalizados
})
export class AppModule { }2. Usar el componente en tu template
@Component({
template: `
<new-account-modal
[channel]="'TIENDAPROD'"
[external-id]="'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...'"
(validationCompleted)="onValidationCompleted($event)">
</new-account-modal>
`
})
export class MyComponent {
onValidationCompleted(event: CustomEvent) {
const result = event.detail;
// Ejemplo del objeto que recibirás:
// {
// hasError: boolean;
// errorDesc: string;
// errorInter: string;
// errorNum: number;
// code: number;
// validationPassed: boolean;
// identityId: string;
// }
if (result.hasError) {
console.log('Error en validación:', result.errorDesc);
console.log('Código de error:', result.errorInter);
console.log('ID de identidad:', result.identityId);
} else {
console.log('Validación exitosa');
console.log('ID de identidad:', result.identityId);
}
}
}Propiedades de Entrada
| Propiedad | Tipo | Requerido | Descripción |
|-----------|------|-----------|-------------|
| channel | string | Sí | Canal de la aplicación (ej: 'TIENDAPROD') |
| external-id | string | Sí | Token JWT de identificación externa |
Eventos de Salida
validationCompleted
Se emite cuando se completa la validación (éxito o error).
Objeto de respuesta:
{
hasError: boolean; // true si hubo error, false si fue exitoso
errorDesc: string; // Descripción del error (vacío si fue exitoso)
errorInter: string; // Código interno del error
errorNum: number; // Número de error
code: number; // Código de estado
validationPassed: boolean; // true si la validación pasó
identityId: string; // ID único de identidad
}Casos de Uso
1. Validación Exitosa
{
hasError: false,
errorDesc: "",
errorInter: "",
errorNum: 0,
code: 200,
validationPassed: true,
identityId: "61d84cfe-cdb9-4f82-9c0f-96d4f5bf5d96"
}2. Error de Validación
{
hasError: true,
errorDesc: "El sistema detectó que la validación de identidad no fue exitosa...",
errorInter: "equifax.validation.not.passed",
errorNum: 0,
code: 0,
validationPassed: false,
identityId: "61d84cfe-cdb9-4f82-9c0f-96d4f5bf5d96"
}3. Usuario Interrumpe el Proceso
{
hasError: true,
errorDesc: "El usuario a interrumpido la validacion de identidad",
errorInter: "error.user.exit",
errorNum: 0,
code: 0,
validationPassed: false,
identityId: "61d84cfe-cdb9-4f82-9c0f-96d4f5bf5d96"
}Flujo del Componente
- Paso 1: Formulario de datos personales
- Paso 2: Validación de identidad (OTP o preguntas de seguridad)
- Paso 3: Confirmación de validación exitosa
Métodos de Validación
- OTP: Envío de código por SMS o llamada telefónica
- Preguntas de Seguridad: Cuestionario dinámico de verificación
Notas Importantes
- El componente maneja automáticamente la sesión y tokens
- Los errores se muestran en pantallas específicas sin botones de reintentar
- El usuario puede cerrar el modal en cualquier momento usando el botón "✕"
- Todos los eventos incluyen el
identityIdpara seguimiento