biocatch-cordova-module v0.1.0

BioCatch Mobile SDK Cordova support

Plugin de BioCatch Mobile SDK para Ionic con soporte de plataformas iOS y Android / BioCatch Mobile SDK plugin for Ionic with support for iOS and Android platforms

Translations

• Español / Spanish
• Ingles / English
• Portuguese
• Hebrew

Nuestro plugin de BioCatch Mobile SDK nos permite acceder a las funcionalidades nativas de las librerias del SDK de BioCatch desde TypeScript. / Our BioCatch Mobile SDK plugin allows us to access the native functionalities of the BioCatch SDK libraries from TypeScript.

Paso 1 / Step 1:

Posicionarse en el directorio de proyectos de Ionic en el cual va a incluir la integración con BioCatch / Go to Ionic project directory in which you will include integration with BioCatch

Paso 2 / Step 2:

Agregar el módulo de BioCatch seguido de los plugins necesarios para soporte nativo / Add the BioCatch module followed by the needed plugins for native support:

> npm i biocatch-ionic-module

> ionic cordova plugin add biocatch-cordova-plugin-ios

> ionic cordova plugin add biocatch-cordova-plugin-android

En caso de que el proyecto de android esté construido con librerías de "support" (pre Android X), usar el siguiente plugin: / In case the android project is built with support libraries (pre Android X), use the following plugin:

> ionic cordova plugin add biocatch-cordova-plugin-android-support

Paso 3 Native Configuración - Android:/ Step 3 Native Configuration - Android:

Dentro del proyecto de Android, buscar el archivo proguard-rules.pro y agregar las siguientes líneas: / Inside the Android project, find the file proguard-rules.pro and add the following lines:

  //BioCatch
  -keep class com.biocatch.client.android.sdk.** { *; } 
  -keep class org.msgpack.** { *; }
  -keep class sun.misc.** { *; }

Buscar el archivo build.gradle del proyecto y dentro del nodo buildscript buscar el sub-nodo dependencies y agregar la referencia al classpath del artefacto de Jfrog: / Find the build.gradle file of the project and inside the buildscript node find the dependencies sub-node to add the classpath reference of the Jfrog artifact:

buildscript {
    ...
    dependencies {
       ...
      //BioCatch
      classpath "org.jfrog.buildinfo:build-info-extractor-gradle:latest.release"
      ...
    }
    ...
}

Ahora, dentro del nodo allprojects agregar el artifactor de Jfrog de la siguiente manera: / Then, find the build.gradle file of the project and inside the allprojects node add the Jfrog artifactor as follows: /

allprojects {
    repositories {
        ...

        //BioCatch
        maven {
            url "https://biocatchdev.jfrog.io/biocatchdev/libs-release"
           
            credentials {
                username = "YOUR_USERNAME" 
                password = "YOUR_PASSWORD"
            }
        }
        ...
    }
}

Contacta a tu ingeniero de solución dedicado para obtener las credenciales requeridas. / Contact your dedicated solution engineer to obtain the required credentials.

Finalmente buscar el archivo build.gralde del módulo app y agregar al inicio del archivo la siguiente línea para habilitar el plugin de Jfrog: /Finally find the build.gralde file of the app module to add the following line at the beginning of the file to enable the Jfrog plugin:

...

apply plugin: 'com.android.application'

//BioCatch
apply plugin: "com.jfrog.artifactory"

...

Paso 4 Native Configuración iOS:/ Step 4: Native Configuration - iOS

Los proyectos nativos creados para iOS por lo general hacen uso de cocoapods, por lo cual se debe asegurar que se cuenta con la instalación necesaria: / Native projects created for iOS generally make use of cocoapods, so you must ensure that you have the necessary installation:

> sudo gem install cocoapods

De igual manera, para el uso correcto del SDK de BioCatch se utiliza un artifactory de Jfrog, por lo cual es necesario instalar el complemento correspondiente para cocoapods: / Similarly, for the correct use of the BioCatch SDK, a Jfrog artifactory is used, for which it is necessary to install the corresponding plugin for cocoapods:

> gem install cocoapods-art

repo-art utiliza autenticación, por lo cual las credenciales deben ser definicas en el archivo netrc de tu computadora: / repo-art uses authentication, so the credentials must be defined in the netrc file on your computer:

> cd ~
> nano .netrc

En la terminal aparecerá un editor en el cual es necesario agregar las siguientes líneas y guardar el archivo: / An editor will appear in the terminal in which it is necessary to add the following lines and save the file:

machine biocatchdev.jfrog.io
login YOUR_USERNAME
password YOUR_PASSWORD

Contacta a tu ingeniero de solución dedicado para obtener las credenciales requeridas. / Contact your dedicated solution engineer to obtain the required credentials.

Una vez configuradas las credenciales, es necesario descargar la definición de los artefactos de BioCatch en Jfrog, esto se logra ejecutando el siguiente comando en una terminal: / Once the credentials have been configured, it is necessary to download the definition of the BioCatch artifacts in Jfrog, this is achieved by executing the following command in a terminal:

> pod repo-art add biocatch-cocoapods "https://biocatchdev.jfrog.io/biocatchdev/api/pods/cocoapods-release"

Para que el SDK de BioCatch pueda ser utilizado se deben agregar las siguientes líneas al archivo de pod: / In order for the BioCatch SDK to be used, the following lines must be added to the pod file:

//BioCatch Artifactory load
plugin 'cocoapods-art', :sources => [
  'biocatch-cocoapods'
]

pod 'BioCatchSDK', "2.X.X.X"

Contacta a tu ingeniero de solución dedicado para obtener la última versión recomendada. / Contact your dedicated solution engineer for the latest recommended version.

Una vez agregadas las dependencias necesarias, resta ejecutar la instalación de los pods agregados. / Once the necessary dependencies have been added, it remains to run the installation of the added pods.

> pod install

Dentro del proyecto iOS, seleccionar el target correspondiente a la aplicación, posteriormente seleccionar Build Settings y dentro de la sección "Build Options" buscar la opción "Always Embed Swift Standard Libraries" y asegurarse que está en "YES" / Within the iOS project, select the target corresponding to the app, then select "Build Settings" and in the "Build Options" section look for the "Always Embed Swift Standard Libraries" option and make sure it is set to "YES"

Paso 4.1 (opcional) Problemas conocidos - iOS / Step 4.1(optional) Known issues - iOS

En algunas ocasiones pueden aparecer errores al momento de intentar compilar el proyecto, para lo cual se pueden hacer las siguientes configuraciones: / Sometimes errors may appear when trying to compile the project, for which the following configurations can be made:

Selecciona el target de la aplicación, y dentro de la sección Build Settings agrega una configuración de usuario haciendo clic en el botón (+), luego Add User-Defined Setting y asigna los siguientes valores: / Select the target of the application, and within the Build Settings section add a user configuration by clicking the (+) button then Add User-Defined Setting and assign the following values:

PODS_ROOT = ${SRCROOT}/Pods

PODS_PODFILE_DIR_PATH = ${SRCROOT}/

Finalmente en la sección Search Paths configurar el valor de la opción Framework Search Path de la siguiente manera: / Finally, in the section Search Paths, configure the value of the option Framework Search Path as follows:

Framework Search Paths = $(SRCROOT)

Resta sólo limpiar y compilar el proyecto nuevamente. / It only remains to clean and compile the project again.

Paso 5 / Step 5:

Dentro del proyecto cordova, incluir la referencia al módulo y el proveedor de BioCath en el archivo app.modules.ts así como agregar el módulo al arreglo de imports y el provider al arreglo de proveedores: / Inside the cordova project, include the reference to BioCath module and provider in the app.modules.ts file, as well as adding the module to the imports array and the provider to the providers array:

import { BioCatchModule, BioCatchProvider } from 'biocatch-ionic-module';
...
@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    ...
    BioCatchModule
    ...
  ],
  providers: [
    ...
    BioCatchProvider
    ...
  ],
  bootstrap: [AppComponent]
})
...

Paso 5 / Step 5:

Finalmente, incluir en los modulos de la aplicacion las llamadas a las rutinas de BioCatch de la siguiente manera: / Finally, include the calls to the BioCatch routines in the application modules as follows:

...
import { BioCatchProvider } from 'biocatch-ionic-module';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  
  private wupServerHost = 'YOUR_WUP_SERVER_URL';
  private customerId = 'YOUR_CUSTOMER_ID'

  constructor(
    ...
    private bioCatchProvider: BioCatchProvider,
    ...) {
  }

  async startBioCatch() {
    
    var csid = this.getUuid()

    await this.bioCatchProvider.start(this.wupServerHost, 
                                      csid,
                                      this.customerId);

  }

  //To change a context
  testChangeContext(){
    
    this.bioCatchProvicer.changeContext("Contexto_1");

  }

}

Nota / Note:

Dentro del directorio platforms se encuentran las carpetas correspondientes a iOS y Android para abrir los proyectos en Xcode o Android Studio según sea el caso. / Within the platforms directory there are the folders corresponding to iOS and Android to open the projects in Xcode or Android Studio as the case may be.