Biocatch-capacitor-plugin NPM

BioCatch Mobile SDK Capacitor support

Plugin de BioCatch Mobile SDK para Capacitor con soporte de plataformas iOS y Android / BioCatch Mobile SDK plugin for Capacitor 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 a través de Capacitor / Our BioCatch Mobile SDK plugin allows us to access the native functionalities of the BioCatch SDK libraries through Capacitor

Prerrequisitos / Prerequisites

Es necesario asegurarse de que Capacitor se encuentra disponible y habilitado en el proyecto en el cual se integrará el plugin de BioCatch / It is necessary to make sure that Capacitor is available and enabled in the project in which the BioCatch plugin will be integrated:

> ionic integrations enable capacitor

Una vez habilitado, se requiere inicializar capacitor con la información de la aplicación: / Once enabled, it is required to initialize the capacitor with the application information:

> npx cap init [appName] [appId]

Donde appName es el nombre de la aplicación y appId es el bundleId/packageId del proyecto. / Where appName is the name of your app, and appId is the domain identifier of your the project.

Ahora, es necesario construir el projecto al menos una vez antes de agregar alguna plataforma nativa. / Build the Ionic project at least once before adding any native platforms.

> ionic build

Finalmente agregar las plataformas a implementar: / Finally Add platforms to implement:

> npx cap add ios 

> npx cap add android

Paso 1 / Step 1:

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

Paso 2 / Step 2:

Instalar el plugin de BioCatch con el sieguiente comando: / Install the BioCatch Plugin with the next command:

> npm i biocatch-capacitor-plugin

Paso 3 Configuración Nativa - 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 la configuración del artefacto de Jfrog de la siguiente manera: / Then, find the build.gradle file of the project and inside the allprojects node add the Jfrog artifactor configuration 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.

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 artefacto 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"

Donde biocatch-cocoapods es el alias del artefacto. / Where biocatch-cocoapods is the alias of the artifactor.

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'
]
...

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 y configurarlo con la opción recursive: / Finally, in the section Search Paths, configure the value of the option Framework Search Path as follows, and configure the recursive option:

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 híbrido, en los componentes donde se hará uso de las funclinalidades de BioCatch, es necesario importar el objeto Plugins que contiene las definiciones de los plugins disponibles, la definición del Plugin de BioCatch así como la inicialización del objeto BioCatchCapacitor, esto se logra con las siguientes líneas: (Ejemplo para ionic) / Within the hybrid project, in the components where the BioCatch functions will be used, it is necessary to import the Plugins object that contains the definitions of the available plugins, the definition of the BioCatch Plugin as well as the initialization of the object BioCatchCapacitor, this is achieved with the following lines: (ionic example)

...
import { Plugins } from '@capacitor/core';
import 'biocatch-capacitor-plugin'
const { BioCatchCapacitor } = Plugins;
...

Paso 6 / Step 6:

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:

...
@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 BioCatchCapacitor.start({
      wupUrl: this.wupServerHost,
      customerId: this.customerId,
      customerSessionId: csid
    });

  }

  //To change a context
  testChangeContext(){
    
    await BioCatchCapacitor.changeContext({
      contextName: "Context-X"
    });

  }

}
...

Contacta a tu ingeniero de solución dedicado para obtener la url del servidor y el id de cliente así como para detalles de implementación. / Contact your dedicated solution engineer for the server url and customer id as well as well as implementation details.

Nota / Note:

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

Bonus para ionic / Bonus for ionic

Para hacer más fácil la integración de las funcionalidades de BioCatch, se puede crear un proveedor de ionic con el siguiente comando: / To make the integration of BioCatch functionalities easier, an ionic provider can be created with the following command:

> ionic generate provider BioCatchProvider

El contenido del proveedor puede ser el siguiente: / The content of the provider can be the following:

import { Injectable } from '@angular/core';

import { Plugins } from '@capacitor/core';
import 'biocatch-capacitor-plugin'
const { BioCatchCapacitor } = Plugins;

/*
  Generated class for the BioCatchProvider provider.
*/
@Injectable()
export class BioCatchProvider {

  constructor() {
    console.log('Hello BioCatchProvider Provider');
  }

  async start(
    wupServerHost: string,
    customerId: string,
    customerSessionId: string
  ) {

    await BioCatchCapacitor.start({
      wupUrl: wupServerHost,
      customerId: customerId,
      customerSessionId: customerSessionId
    });

    console.log(`BioCatchProvider - start(${customerSessionId})`)

  }

  async changeContext(contextName: string) {

    await BioCatchCapacitor.changeContext({
      contextName: contextName
    });

    console.log(`BioCatchProvider - changeContext(${contextName})`)

  }

  async updateCustomerSessionId(customerSessionId: string) {

    await BioCatchCapacitor.updateCustomerSessionId({
      customerSessionId: customerSessionId
    });

    console.log(`BioCatchProvider - updateCustomerSessionId(${customerSessionId})`)

  }

  async startNewSession(customerSessionId: string) {

    await BioCatchCapacitor.updateCustomerSessionId({
      customerSessionId: customerSessionId
    });

    console.log(`BioCatchProvider - startNewSession(${customerSessionId})`)

  }

  async pause() {

    await BioCatchCapacitor.pause();

    console.log(`BioCatchProvider - pause()`)

  }

  async resume() {

    await BioCatchCapacitor.resume();

    console.log(`BioCatchProvider - resume()`)

  }

  async stop() {

    await BioCatchCapacitor.stop();

    console.log(`BioCatchProvider - stop()`)

  }

}

Y finalmente el uso sería de la siguiente manera: / And finally the use would be as follows:

...
import { BioCatchProvider } from '../../providers/biocatch/biocatch';
...
@IonicPage()
@Component({
  selector: 'page-x',
  templateUrl: 'x.html',
})
export class XPage {
  constructor(
    ...
    private biocatchProvider: BioCatchProvider,
    ...
  ) {
    this.biocatchProvider.changeContext("Context-X");
  }
...
}

capacitor plugin native iOS Android BioCatch

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago