Autenticación con huella dactilar en Ionic 3

Documentación Ionic :https://ionicframework.com/docs/v3/native/fingerprint-aio/


Para implementar la Huella digital en ionic 3, debemos instalar lo siguiente:


Instala los complementos Cordova y Ionic Native:


ionic cordova plugin add cordova-plugin-fingerprint-aio


Algo muy muy importante es revisar el core de la aplicación y versión que se utiliza, eso se revisa en package.json, bajo la etiqueta "@ionic-native/core".

En mi caso se encuentra así: "@ionic-native/core": "4.4.0"

Ahora vamos a instalar el plugin:


npm install --save @ionic-native/fingerprint-aio@4


En mi caso utilizo la versión 3.14.0, así que se instala de la siguiente manera:


npm install --save @ionic-native/fingerprint-aio@3.14.0



Ya tenemos listo los plugins, ahora vamos a importarlo en el app.module:


import {FingerprintAIO } from '@ionic-native/fingerprint-aio';

providers: [

FingerprintAIO,

]










Ahora en la página que vayamos a utilizar para escanear la huella dactilar (yo cree


una página que se llama "huella_modal", pero puedes llamarla como quieras), debemos


importar el plugin y ponerlo en el constructor para utilizarlo:

import { FingerprintAIO } from '@ionic-native/fingerprint-aio';

Lineas más abajo dentro del constructor:

private faio: FingerprintAIO,

Ahora, se debe importar Platform y tambien agregarlo al constructor:

import {Platform} from 'ionic-angular';

Lineas más abajo dentro del constructor:





private platform: Platform,

En caso de que necesiten diferenciar si la plataforma es android o iOS, agregan la siguiente


función dentro de las llaves que siguen al constructor:

constructor(

private platform: Platform,

private faio: FingerprintAIO,

) {

this.platform.ready().then(() => {

console.log("Plataforma lista, enviando a fingerprintAvailable");

this.fingerprintAvailable(); //esta línea porque se usa en la siguiente función

if (this.platform.is('ios')) {

console.log ("soy iOS") ;

} else if (this.platform.is('android')) {

console.log ("soy android") ;

}

});

Justo después que la plataforma se encuentra lista, mandaremos llamar la función:

fingerprintAvailable();


Esta función lo que hace, es verificar si la huella digital o el

face ID se encuentran en nuestro dispositivo

async fingerprintAvailable(){

    console.log("Voy a verificar si tiene huella");

    try{

     await this.platform.ready();

     const available = await this.faio.isAvailable()

     console.log("constatnte aviable",available );

    

     if(available == "finger" || available == "face"){

    

      console.log("Si cuenta con el servicio");

      this.scan(); //vamos a la función escanear

}

     else{

    

      console.log("No cuenta con el servicio");

     }

    }

    catch(e){

console.log(e);

    }

    

}

La siguiente función sirve para escaear la huella o faceId

scan(){

this.faio.show({

clientId: 'Fingerprint-Demo',

clientSecret: 'password', //Only necessary for Android

})

.then((result: any) => {

// Si la huella funciona imprime el console.log, de lo contrario se va al error

console.log("huella funciona huella modal");

}).catch(error => {

});

}