🔐 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:3333

Producción

npm run build
# Archivos generados en /dist

Docker (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: support@example.com

🎉 Agradecimientos

Stencil.js por el framework de Web Components
Claro PR por la infraestructura de APIs
Comunidad por el feedback y contribuciones

🔐 Identity Solution
Verificación de identidad segura y confiable

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 identityId para seguimiento

intellisoft-identity-solution

🔐 Identity Solution

🚀 Características Principales

✨ Proceso Multi-Step

📱 Métodos de Verificación

🏗️ Arquitectura del Proyecto

🔧 Tecnologías Utilizadas

📦 Instalación

Prerrequisitos

Pasos de Instalación

🎯 Uso del Componente

HTML Básico

React

Angular

1. Configurar el módulo principal (app.module.ts)

2. Usar el componente en tu template

🔌 API Services

Configuración de Ambiente

Endpoints Disponibles

Ejemplo de Uso

🎨 Características de UI/UX

✨ Diseño Responsivo

🔄 Estados de Carga

📱 Optimización Móvil

🛡️ Validaciones Implementadas

✅ Validación de Parámetros

🔒 Seguridad

🚀 Despliegue

Desarrollo

Producción

Docker (Opcional)

📊 Monitoreo y Logs

Logs de Desarrollo

Manejo de Errores

🤝 Contribución

📝 Licencia

🆘 Soporte

🎉 Agradecimientos

Identity Solution Component

Instalación

1. Configurar el módulo principal (app.module.ts)

2. Usar el componente en tu template

Propiedades de Entrada

Eventos de Salida

validationCompleted

Casos de Uso

1. Validación Exitosa

2. Error de Validación

3. Usuario Interrumpe el Proceso

Flujo del Componente

Métodos de Validación

Notas Importantes

Readme

Keywords

Package Sidebar

Install

Repository

Homepage

DownloadsWeekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

Weekly Downloads