SelphID Component
1. Introducción
El Componente tratado en el documento actual recibe el nombre de SelphID Component. Éste se encarga de realizar capturas de documentos y la posterior extracción y análisis de los datos obtenidos de ellos. Sus principales funcionalidad son las siguientes:
-
Gestión interna de cámaras.
-
Gestión de permisos.
-
Asistente en los procesos de captura de la parte frontal y trasera del documento.
-
Extracción de la información contenida en el documento.
-
Obtención de las imágenes del dorso y reverso del documento, así como otras imagénes incluidas en el documento: cara del usuario, firma del usuario,...
-
Alto nivel de configuración: diferentes países, idiomas, tipos de documentos...
1.1 Requisitos mínimos
La versión mínima nativa (Android y iOS) de la SDK son las siguientes:
- Versión mínima Android: 24 - JDK 11
- Versión mínima iOS: 13
En cuanto a la arquitectura del dispositivo móvil:
armeabi-v7, x86, arm64 y x64
1.2 Versión del plugin
La versión del plugin actual se puede consultar de la siguiente forma:
Buscamos el archivo package.json en la raíz del plugin.
En el KEY/TAG version se indica la versión.
2. Integración del componente
ℹ️ Antes de integrar este componente se recomienda leer la documentación relativa a Core Component y seguir las instrucciones indicadas en dicho documento.
En esta sección se explicará paso a paso cómo integrar el componente actual en un proyecto ya existente.
⚠️ Para esta sección, se considerarán los siguiente valores:
- <%APPLICATION_PATH%> - Path a la raíz de la aplicación (ejemplo: /folder/example)
- <%PLUGIN_CORE_PATH%> - Path a la raíz del plugin core, que es obligatorio (ejemplo: /folder/sdk-core)
- <%PLUGIN_SELPHID_PATH%> - Path a la raíz del plugin actual (ejemplo: /folder/sdk-selphid)
2.1. Instalación del plugin: Common
El plugin permite la ejecución en plataforma Android y iOS. En esta sección se explica. Se deben seguir los siguientes pasos:
- Acceder a APPLICATION_PATH y lanzar:
npm i @facephi/sdk-selphid-capacitor
npm run build
npx cap sync
npx ionic capacitor build [android | ios]
Tras ejecutar los comandos anteriores, automáticamente se abrirá el IDE correspondiente de cada una de las plataformas (XCode para iOS, Android Studio para Android), y solo quedaría compilarlo (y depurarlo en caso de ser necesario) como si fuera un proyecto nativo estándar.
2.2 Instalación plugin: iOS
2.2.1 Configuración del proyecto
Para la versión de iOS, a la hora de añadir nuestro plugin a la aplicación final, previamente se deben tener en cuenta los siguientes puntos:
- Añadir los permisos de cámara: Para utilizar el component, es necesario habilitar el permiso de la cámara en el archivo info.plist de la aplicación (incluido dentro del proyecto en la carpeta ios). Se deberá editar el archivo con un editor de texto y agregar el siguiente par clave/valor:
<key>NSCameraUsageDescription</key>
<string>$(PRODUCT_NAME) uses the camera</string>
2.2.2 Actualizar el Podfile
En el podfile del proyecto será necesario añadir la información del repositorio privado (ver apartado 2.1). Para ello, se deberá agregar las siguientes lineas al inicio del fichero:
platform :ios, '13.0' //MIN VERSION
plugin 'cocoapods-art', :sources => ['cocoa-pro-fphi']
source 'https://cdn.cocoapods.org/'
ℹ️ Para saber más acerca de la configuración y uso de Cocoapods Artifactory, es necesario acceder al siguiente documento de Componente Core.
2.2.4 Posibles incidencias
Si ocurren problemas de entorno o no se actualiza el plugin tras realizar nuevos cambios (por ejemplo, problemas ocurridos debido a que no se genera correctamente el bundle, o no se actualizan las librerías a las versiones adecuadas), se recomienda ejecutar la siguiente secuencia de instrucciones tras lanzar el plugin:
- Abrir la carpeta ios de la aplicación en un terminal.
- Ejecutar el siguiente comando:
pod deintegrate
- Eliminar el Podfile.lock
- Ejecutar el siguiente comando (o abrir el proyecto con Xcode y ejecutarlo):
pod install --repo-update
2.3 Instalación plugin: Android
2.3.1 Establecer la versión de Android SDK
En el caso de Android, la versión mínima de SDK requerida por nuestras bibliotecas nativas es 24, por lo que si la aplicación tiene un SDK mínimo definido menor que éste, deberá modificarse para evitar un error de compilación. Para ello accede al fichero build.gradle de la aplicación (ubicado en la carpeta android) y modifica el siguiente parámetro:
buildscript {
ext {
minSdkVersion = 24
}
}
2.3.2 Permisos para geolocalización
Debido a que el componente de Tracking tiene opciones de geolocalización, es necesario añadir los permisos para ello. En el AndroidManifest agregar los siguientes permisos:
<!-- Always include this permission -->
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<!-- Include only if your app benefits from precise location access. -->
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
3. Configuración del componente
El componente actual contiene una serie de métodos e interfaces de Typescript incluidos dentro del archivo definitions.ts En este fichero se puede encontrar la API necesaria para la comunicación entre la aplicación y la funcionalidad nativa del componente. A continuación, se explica para qué sirve cada uno de los enumerados y las demás propiedades que afectan al funcionamiento del componente.
A continuación se muestra la clase SelphidConfiguration, que permite configurar el componente de SelphID:
export interface SelphidConfiguration {
documentSide?: SelphIDDocumentSide;
resourcesPath: string;
debug?: boolean;
showResultAfterCapture?: boolean;
showTutorial?: boolean;
tutorialOnly?: boolean;
scanMode?: SelphIDScanMode;
specificData?: string;
fullscreen?: boolean;
locale?: string;
tokenImageQuality?: number;
documentType?: SelphIDDocumentType;
timeout?: SelphIDTimeout;
tokenPreviousCaptureData?: string;
generateRawImages?: boolean;
jpgQuality?: number;
compressFormat?: SelphIDCompressFormat;
documentModels?: string;
videoFilename?: string;
wizardMode?: boolean;
translationsContent?: string;
viewsContent?: string;
showDiagnostic?: boolean;
}
A continuación, se comentarán todas las propiedades que se pueden definir en el objeto SelphidConfiguration:
ℹ️ Toda la configuración se podrá encontrar en el archivo definitions.ts del componente.
A la hora de realizar la llamada al component existe una serie de parámetros que se deben incluir. A continuación se comentarán brevemente.
3.1 resourcesPath
type: string
Establece el nombre del archivo de recursos que utilizará el componente para su configuración gráfica. Éste archivo es personalizable y se encuentra en el complemento en la carpeta src/main/assets para Android y en ios/Frameworks y de la carpeta Resources para iOS. Su instalación es transparente para el usuario, simplemente se agregará a los proyectos de las respectivas plataformas durante la instalación del complemento. Más detalles sobre cómo funciona este paquete de recursos y cómo modificarlo se explican en apartado 6.
resourcesPath: "fphi-selphid-widget-resources-sdk.zip"
3.2 showResultAfterCapture
type: boolean
Indica si mostrar o no una pantalla con la imagen capturada del documento después del proceso de análisis. En esta pantalla se le da al usuario la posibilidad de repetir el proceso de captura si la imagen que se obtuvo del documento no fuera correcta.
> showResultAfterCapture: false
3.3 scanMode
type: WidgetScanMode
Este enumerado se define en la clase definitions.ts. Indica el modo de escaneo OCR de los documentos. Dependiendo de la elección, se escanearán y buscarán varios tipos de documentos o uno en concreto. Este modo puede ser de tres tipos:
- SelphIDScanMode.Generic: El modo genérico que permite escanear cualquier tipo de documento independiente del país o el tipo de documento. El resultado de este modo no es tan preciso como los siguientes pero permite escanear varios documentos estándar.
- SelphIDScanMode.Search: El modo de búsqueda permitirá utilizar una whitelist y blacklist, y buscará en los documentos que cumplan dichas condiciones. Estas condiciones se indican en la variable "specificData". De este modo se permite realizar la búsqueda acotando el número de plantillas, y haciendo que la búsqueda sea mucho más afinada que en el caso genérico.
- SelphIDScanMode.Specific: Búsqueda de un documento específico. Estas condiciones se indican en la propiedad "specificData" que se muestra en lo sucesivo.
> scanMode: SdkSelphidEnums.SdkScanMode.Search;
3.4 specificData
type: string
Esta propiedad permite definir qué documentos se escanearán durante el proceso, en caso de declarar el modo de escaneo (scanMode) a GenericMode, SpecificMode o SearchMode.
Un ejemplo de configuración que permita escanear todos los documentos de nacionalidad española sería el siguiente:
> scanMode: WidgetScanMode.Search;
> specificData: “ES|<ALL>”; // Spanish ISO code(ES)
3.5 documentSide
type: SelphIDDocumentSide
Los valores permitidos son los siguientes:
-
SelphIDDocumentSide.FRONT: El widget queda configurado para realizar la captura de la parte frontal del documento.
-
SelphIDDocumentSide.BACK: El widget queda configurado para realizar la captura de la parte trasera del documento.
> documentSide: SelphIDDocumentSide.FRONT;
3.6 fullScreen
type: boolean
Establece si se desea que el componente se arranque en modo pantalla completa, ocultando el status bar.
fullscreen: true;
3.7 locale
type: string
Es un string que permite cambiar la localización y el idioma del componente. Ejemplos de valores que pueden tener son los siguientes:
- “es” para español.
- “en” para inglés.
- “fr” para francés.
En definitiva, dependerá del nombre que aparezca en el fichero strings.xml del lenguaje que se desee seleccionar (strings-es.xml, strings-en.xml, strings-fr.xml).
En el zip de recursos, el cual se encuentra dentro de la carpeta strings, se pueden añadir los ficheros strings-xx.xml correspondientes a cada localización que se requiere incorporar en el componente.
locale: "es";
3.8 documentType
type: string
Este enumerado se define en la clase definitions.ts
. Especificado en el enum SelphIDDocumentType
:
- IDCard: Establece que se capturarán documentos de identidad o tarjetas.
- Passport: Establece que se capturarán pasaportes. (Adicionamente habrá que setear el scanMode en SelphIDScanMode.Generic)
- DriverLicense: Establece que se capturarán licencias de conducir.
- ForeignCard: Establece que se capturarán tarjetas de identidad de Extranjeros.
- Custom: Engloba documentos que no se encuentran en ninguna de las categorías anteriores.
documentType: SdkSelphidEnums.SdkDocumentType.IDCard;
3.9 tokenImageQuality
type: double
Especifica la calidad de compresión del tokenFaceImage.3.9 enableImages (boolean)
Indica si el sdk devuelve a la aplicación las imágenes utilizadas durante la extracción o no. Cabe señalar que la devolución de imágenes puede resultar en un aumento considerable en el uso de recursos del dispositivo:
tokenFaceImage: 0.9;
3.10 generateRawImages
type: boolean
Esta propiedad configura el componente para devolver la imagen completa de la cámara que se utilizó para capturar el documento:
- rawFrontDocument: Imagen frontal del documento sin procesar.
- rawBackDocument: Imagen trasera del documento sin procesar.
- tokenRawFrontDocument: Tokenizado de la imagen frontal del documento sin procesar.
- tokenRawBackDocument: Tokenizado de la imagen trasera del documento sin procesar.
generateRawImages: true;
3.11 timeout
type: SelphIDTimeout
Es un enumerado que define el timeout de la captura de un lado del documento. Tiene 3 posibles valores:
SelphIDTimeout.SHORT: 15 segundos.
SelphIDTimeout.MEDIUM: 20 segundos.
SelphIDTimeout.LONG: 25 segundos.
timeout: SelphIDTimeout.MEDIUM
3.12 tutorialOnly
type: boolean
Establece si se desea lanzar el componente en modo Tutorial. Esto permite mostrar el tutorial del componente previo, pero SIN realizar el proceso posterior de captura. Útil en caso de que se desee mostrar el tutorial de forma aislada.
tutorialOnly: true;
3.13 debug
type: boolean
Establece el modo debug del componente.
debug: false;
3.14 showTutorial
type: boolean
Indica si se debe mostrar o no el tutorial antes de ejecutarse el proceso. Después de que termine el tutorial, el proceso continuará con normalidad.
showTutorial: true
3.15 wizardMode
type: boolean
Indica si el componente se configurará para capturar ambas partes del documento (frontal y dorso) una después de la otra. En este modo, el componente se lanzará sólo una vez, y capturará el dorso del documento justo después de capturar el frontal.
wizardMode: true;
3.16 tokenPrevCaptureData
type: string
Cuando el documento se captura mediante dos pasos (para ello, wizardMode debe establecerse a false), esta propiedad permite inyectar un diccionario con la información de la captura previa. De este modo, el componente puede combinar el resultado de ambas lecturas de forma inteligente, y de ese modo devolver la información combinada de ambas capturas. También permite calcular el grado de similitud de los datos de ambos lados.
Si ambos lado del documento se capturan en una única llamada al componente (wizardMode debe establecerse a true), esto sería innecesario ya que el componente realiza este proceso internamente.
tokenPrevCaptureData: selphIDResult.tokenOCR
3.17. showDiagnostic
type: boolean
Muestra un popup con el diagnóstico del componente en caso de que el proceso falle.
showDiagnostic: true
3.18 compressFormat
type: SdkCompressFormat
Indica el formato de compresión de la imagen. Los valores posibles son:
- PNG
- JPG
compressFormat: "JPG“;
3.19 jpgQuality
type: number
Si la propiedad compressFormat está configurada como JPG, es posible establecer la calidad de compresión de la imagen. Este parámetro se ignorará si el valor de la propiedad compressFormat es PNG.
imageQuality: 95
3.20 videoFilename
type: string
⚠️ Esta es una propiedad avanzada, y que en la mayoría de casos no es necesario modificar. Su uso incorrecto puede provocar un funcionamiento incorrecto del componente.
Establece la ruta absoluta del nombre del archivo en el que se grabará un video del proceso de captura. La aplicación es la responsable de solicitar los permisos necesarios al teléfono en caso de que esa ruta requiera de permisos adicionales. El componente, por defecto, no realizará ningún proceso de grabación a menos que se especifique una ruta de archivo mediante este método.
videoFilename: “\<videofile-path\>“;
3.21 documentModels
type: string
⚠️ Esta es una propiedad avanzada, y en la mayoría de casos de uso no es necesario modificarla. Su uso incorrecto puede provocar un funcionamiento incorrecto del componente.
Esta propiedad permite, mediante una cadena en formato xml, configurar modelado de los documentos que el componente va a tratar de capturar. La definición de este modelado se puede encontrar, por defecto, en un .xml de modelos dentro del .zip de recursos. Con esta propiedad se permite a una aplicación actualizar y sustituir, en ejecución, los modelados de los documentos actuales del componente.
documentModels: “\<document-models-content-string\>“;
3.22 translationsContent
type: string
⚠️ Esta es una propiedad avanzada, y en la mayoría de casos de uso no es necesario modificarla. Su uso incorrecto puede provocar un funcionamiento incorrecto del componente.
Esta propiedad permite, mediante una cadena en formato xml, configurar la localización actual del componente. La definición de este modelado se puede encontrar, por defecto, en una carpeta interna de traducciones dentro del .zip de recursos. Con esta propiedad se permite a una aplicación actualizar y sustituir, en ejecución, la localización actual del componente.
translationsContent: “\<translation-content-string\>“;
3.23 viewsContent
type: string
⚠️ Esta es una propiedad avanzada, y en la mayoría de casos de uso no es necesario modificarla. Su uso incorrecto puede provocar un funcionamiento incorrecto del componente.
Esta propiedad permite, mediante una cadena en formato xml, configurar las vistas del componente actual. La definición de este modelado se puede encontrar, por defecto, en un fichero llamado widget.xml dentro del .zip de recursos. Con esta propiedad se permite a una aplicación actualizar y sustituir, en ejecución, el diseño de las pantallas internas del componente.
viewsContent: “<views-content-string\>“;
4. Uso del componente
A continuación se mostrará la manera de ejecutar la funcionalidad del componente actual.
⚠️ Se recuerda que para lanzar un componente determinado previamente habrá que inicializar el SDK con su respectiva licencia, y después iniciar una nueva operación. Para más información consulte la documentación del Componente Core.
Una vez configurado el componente, para lanzarlo se deberá ejecutar el siguiente código:
/**
* Method that launches the SelphID plugin with Search Mode.
* @returns Promise with a JSON string.
*/
launchSelphidCapture = async (): Promise<SelphIDResult> =>
{
console.log('Preparing selphID configuration...');
let sdkSelphidConfig: SelphIDConfiguration = {
//documentSide: SelphIDDocumentSide.Front,
resourcesPath: SELPHID_RESOURCES_PATH,
showResultAfterCapture: true,
scanMode: SelphIDScanMode.Search,
documentType: SelphIDDocumentType.IDCard,
showTutorial: false,
generateRawImages: false,
specificData: `${ 'ES' }|<ALL>`,
wizardMode: true,
};
console.log('Launching selphID widget...');
return SdkSelphid.startCapture(sdkSelphidConfig);
}
5. Retorno de resultado
Como se muestra en el ejemplo anterior, el resultado se devuelve en forma de objeto JSON a través de Promises, ya sea una operación exitosa o un error:
onSuccessSelphIDCapture = (result: any) => {
console.log('Receiving selphID success event...');
if (result !== null && result) {
switch (result.finishStatus)
{
case SdkFinishStatus.Ok: // OK
console.log(result.documentData);
this.processSuccessResultSelphID(result); // Logging the info for debug purposes
break;
case SdkFinishStatus.Error: // Error
console.log('SELPHID_ERROR:' + result);
break;
}
this.changeDetection.detectChanges();
}
}
/** Method implemented only for debug purposes */
processSuccessResultSelphID = (result: any) => {
const _message =
`* FinishStatus: ' ${ result.finishStatus }
* TypeError: ' ${ result.errorType }
* TokenFaceImage length: ' ${ (typeof result.tokenFaceImage === 'undefined' || result.tokenFaceImage === '') ? 0 : result.tokenFaceImage.length }
* TokenOCR length: ' ${ result.tokenOCR.length }
* TokenDocumentFront length: ' ${ (typeof result.tokenBackDocumentImage === 'undefined' || result.tokenBackDocumentImage === '') ? 0 : result.tokenBackDocumentImage.length }
* TokenDocumentBack length: ' ${ (typeof result.tokenFrontDocumentImage === 'undefined' || result.tokenFrontDocumentImage === '') ? 0 : result.tokenFrontDocumentImage.length }
* MatchingSidesScore: ' ${ result.matchingSidesScore }`;
console.log(this.URI_JPEG_HEADER + result.faceImage, '');
console.log(_message);
}