Header Ads Widget

Ticker

6/recent/ticker-posts

Ionic 5 / Angular - Autenticación de huellas digitales con Android e iOS

 En este tutorial, vamos a cubrir cómo agregar la autenticación de huellas dactilares a las aplicaciones Ionic 5 / Angular para Android e iOS, así que comencemos.

Vamos a utilizar Ionic CLI 5 e Ionic 5, pero los pasos también se pueden aplicar a proyectos de Ionic 4.

Generando un nuevo proyecto Ionic 5

Abra su terminal en sistemas Linux / MAC o el símbolo del sistema en Windows y escriba lo siguiente para generar un nuevo proyecto Ionic 5 / Angular:

ionic start fingerprint-demo blank --type=angular 

Instalación de los complementos de huellas dactilares nativas Ionic y Cordova

A continuación, navegue dentro del directorio del proyecto y agregue el complemento Cordova para la autenticación de huellas dactilares y su envoltorio Ionic Native 5:

cd fingerprint-demo 
ionic cordova plugin add cordova-plugin-fingerprint-aio --save 
npm install --save @ionic-native/fingerprint-aio

A continuación, agreguemos la lista de proveedores. Continúe, abra su proyecto con un editor de texto. Estamos usando Visual Studio Code:

code .

Agregar la funcionalidad de huellas digitales

Ahora abra src / app / app.module.ts e importe el contenedor nativo para la autenticación de huellas digitales y agréguelo:

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 {}

Ahora podemos inyectarlo en nuestros componentes y comenzar a usar su API para agregar la autenticación de huellas dactilares a nuestras aplicaciones.

Abra src / pages / home / home.ts y agregue:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { FingerprintAIO ,FingerprintOptions} from '@ionic-native/fingerprint-aio';

@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
fingerprintOptions : FingerprintOptions;
constructor(public navCtrl: NavController,private fingerAuth: FingerprintAIO) {

}
public showFingerprintAuthDlg(){
    this.fingerprintOptions = {
        clientId: 'fingerprint-Demo',
        clientSecret: 'password', //Only necessary for Android
        disableBackup:true  //Only for Android(optional)
    }
    this.fingerAuth.isAvailable().then(result =>{
    if(result === "OK")
    {
        this.fingerAuth.show(this.fingerprintOptions)
        .then((result: any) => console.log(result))
        .catch((error: any) => console.log(error));
    }
    });
}

}

Entonces, primero verificamos si la autenticación de huellas dactilares está disponible en nuestro dispositivo, si está bien, llamamos al método show con algunas opciones obligatorias y opcionales como clientId, clientSecret y disableBackup.

Ahora agreguemos un botón para activar el cuadro de diálogo de autenticación de huellas digitales, así que abra el archivo src / pages / home / home.html y agregue:

<ion-header>
<ion-navbar>
    <ion-title>
    Fingerprint auth demo
    </ion-title>
</ion-navbar>
</ion-header>

<ion-content padding>
<button ion-button (click)="showFingerprintAuthDlg()">show fingerprint auth dialog  </button>

</ion-content>

¡Eso es! Ahora puede probar la autenticación de huellas digitales utilizando un dispositivo real que admita la autenticación de huellas digitales:

ionic cordova platform add android 
ionic  cordova run android 

Asegúrese de conectar un dispositivo móvil real con un cable USB antes de ejecutar su aplicación.

Conclusión

Hemos visto cómo usar el complemento Fingerprint para la autenticación en su aplicación Ionic 5.

Publicar un comentario

0 Comentarios