Saltar al contenido

Fingerprint Ionic | Todo lo que debes saber aquí

Fingerprint Ionic

¿Pensando en implementar algún sistema de autentificación biométrica dentro de tu aplicación? O, tal vez ya sabes cómo se utiliza el componente Fingerprint Ionic, pero te falta conocer algún detalle para hacerlo funcionar cómo tú quieres ¿verdad?

Seguramente habrás respondido que sí, si no, no estarías aquí, así que déjame decirte que no eres el único, ni serás el último, que pasa por aquí a intentar dar respuesta a dichas preguntas.

Te digo más, hasta los que somos más expertos en la materia hacemos uso de estas publicaciones cuando vamos a utilizar un componente nuevo para nosotros, o alguno que llevamos mucho sin usar en nuestros proyectos.

Por si no me conoces aún, mi nombre es Aitor Sánchez, soy desarrollador de apps desde 2014, y en este artículo aprenderás la mejor forma de implementar un sistema de autentificación biométrica basada en Fingerprint Ionic para tu aplicación.

Pero antes de continuar, este es El Círculo. Es mi newsletter donde te puedo enseñar desarrollo de apps móviles, aso y monetización. Por cierto, si te suscribes te regalo mi ebook Duplica los ingreso de tus apps en 5 minutos. No es broma.

P.D: Darse de alta es gratis y de baja, también.

 

Instalación de Fingerprint

Cómo es costumbre, lo que tenemos que hacer en primer lugar es instalar el plugin y el componente con los siguientes comandos.

 

$ ionic cordova plugin add cordova-plugin-fingerprint-aio
$ npm install --save @ionic-native/[email protected]

La primera linea de consola instalará el plugin necesario para que el FingerPrint AIO se comunique con la parte nativa de nuestro device.

La segunda será el código librería TypeScript para que podamos comunicar nuestro código con el del plugin.

Configuración de Fingerprint Ionic

Ahora tenemos que haver un register del componente a los modules de nuestra app de la siguiente manera:

 

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';
import { FingerprintAIO } from '@ionic-native/fingerprint-aio';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';

@NgModule({
declarations: [
    MyApp,
    HomePage
],
imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
    MyApp,
    HomePage
],
providers: [
    StatusBar,
    SplashScreen,
    FingerprintAIO,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
]})

export class AppModule {}

Si te has fijado bien, hemos incluido FingerPrintAIO en los providers:
...
providers: [
    ...
    FingerprintAIO,
    ...
]
...

 

Si te has fijado bien, hemos incluido FingerPrintAIO en los providers:

...

providers: [    
    ... 
    FingerprintAIO,    
    ...
]

...

 

Con estas líneas de código, junto con el import que hemos realizado en nuestro archivo AppModule. Ya tenemos disponible el servicio ara usarlo donde nosotros queramos.

Visto esto, continuemos.

 

Plataformas soportadas por el Escaner / Scanner

  • Android
  • iOS

Es posible que te estés preguntando por que, por ejemplo, falta Windows Phone. Pues sencillo, porque aún no existía, o no estaba tan desarrollado, el sistema previa muerte de WindowsPhone.

Por otro lado, y lo que no sé, es porque aún no se ha implementado en plataformas nativas Windows. Sí que hay ordenadores que cuentan con autentificación por huella. Pero bueno, eso es otra historia 🙂

 

Veamos un ejemplo / example de uso del reader de huellas

 

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

constructor(private faio: FingerprintAIO) { }

...

this.faio.show({
    clientId: 'Fingerprint-Demo', //Android: Used for encryption. iOS: used for dialogue if no `localizedReason` is given.
    clientSecret: 'o7aoOMYUbyxaD23oFAnJ' //Solo para Android.
    disableBackup:true, //Solo para Android.
    localizedFallbackTitle: 'Use Pin', //Solo para iOS.
    localizedReason: 'Please authenticate' //Solo para iOS.
})
.then((result: any) => console.log(result))
.catch((error: any) => console.log(error));

 

Cómo se puede apreciar en el código, tenemos una función “show” que mostrará el cuadro de diálogo que permitirá al usuario introducir la huella.

Posteriormente controlamos la promesa que nos devolverá el resultado en el then, si está correcta la autentificación o no, y saldrá por el catch en caso de que falle.

 

Funciones de Fingerprint en Ionic

Independientemente de donde herede, los métodos que vamos a ver ahora son los métodos disponibles de la clase. En este caso tenemos solo 2, esto es porque es el sistema nativo del teléfono el que controla todo el tinglado no permitiendo acceder a partes críticas de la autentificación para evitar posibles problemas.

 

IsAvailable()

Nos permite saber si el sistema está disponible para su uso.

Devuelve una promesa que tenemos que controlar con el resultado de si está disponible dentro.

 

show(options)

Cómo hemos visto en el ejemplo, este método nos permite mostrar al usuario el cuadro de diálogo para que meta la huella.

Options -> FingerprintOptions -> Las opciones de configuración de la API fingerprint para la plataforma.

 

Pues ya está, no tiene más funciones. La verdad que la simplicidad que da esto, para los programadores menos experimentados es un gustazo ver algo así 🙂

 

Campos, interfaces y clases necesarias de Fingerprint Ionic

Ahora vamos a ver más cosas necesarias para la utilización del componente que Ionic pone a nuestra disposición.

 

FingerprintOptions

Las opciones con las que se muestra el diálogo con la función “show.”

Parámetro -> Tipo -> Detalles

clientId > string -> Digamos que es la llave del almacén de llaves de sistema. Si no existe, la crea.

clientSecret -> string -> Solo está disponible para Android y es, en caso de que el usuario haya guardado las credenciales, este será lo que se envíe y lo podrás setear en el campo de contraseña o hacer lo que creas correspondiente con ella.

disableBackup -> boolean -> Nos permite desactivar el “usar copia de seguridad”. El opcional y solo para Android.

localizedFallbackTitle -> string -> El título del botón de volver. Es opcional y solo para iOS.

localizedReason -> string -> La descripción que se muestra en el dialogo. Es opcional y solo para iOS.

Estas opciones que hemos dado, FingerPrintOptions, serán las que nos ayuden a hacer un login with fingerprint en Ionic.

 

Fingerprint Ionic Icon

Me he tomado la liberta de tomar una imagen, de la web oficial de Ionic, para que veas aquí cómo puedes poner el icono de Fingerprint en el html de tu app, espero que no les importe 🙂 Ahí va:

Fingerprint Icon Ionic

 

Más tutoriales de Ionic

 

Y para los más ganduletes, cómo siempre, el tutorial en vídeo

 

Pues sin más me despido ya, esto ha sido todo por hoy. La verdad que no hay mucho más que añadir al artículo. Solo pedirte, que si te ha gustado el artículo te pases por este enlace. Se trata del círculo y es una comunidad que quiero montar alrrededor de esta genial disciplina que es la programación. Todos los detalles están dentro, ¿a qué esperas? 🙂

Hasta la próxima y que vaya bien.