Ionic 5/Angular Android和iOS 指纹认证

・5 分钟阅读

在本教程中,我们将介绍如何向Android和iOS的Ionic 5/Angular应用程序添加指纹身份验证,让我们开始吧。

使用Ionic CLI 5和Ionic 5,但是这些步骤也可以应用于Ionic 4项目。

生成一个新的Ionic 5项目

在Linux/MAC系统上打开终端或在Windows上打开命令提示符,然后键入以下命令以生成新的Ionic 5/Angular项目:


ionic start fingerprint-demo blank --type=angular 

安装Cordova和Ionic本地指纹插件

接下来导航inner project目录,并添加用于指纹验证的Cordova插件及它Ionic Native 5包装器:


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

使用文本编辑器打开项目,我们使用Visual Studio Code:

code .

添加指纹功能

现在打开src/app/app.module.ts并导入指纹认证的本地包装并添加它:


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

现在我们可以将它注入到组件中,并开始使用它的API将指纹认证添加到应用程序中。

打开src/pages/home/home.ts,并添加:


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));
 }
 });
}

}

我们首先检查指纹认证是否在设备上可用,如果可以的话,使用一些必需的和可选的选项,比如clientId,clientSecret和disableBackup。

现在添加一个按钮来触发指纹认证对话框,所以打开src/pages/home/home.html文件,并添加:


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

也就是说,现在你可以使用支持指纹认证的真实设备来测试指纹认证:


ionic cordova platform add android 
ionic cordova run android 

在运行应用程序之前,请确保移动设备与USB电缆连接。

我们已经学会了如何在Ionic 5应用中使用指纹插件进行身份验证。

我们已经学会了如何在Ionic 5应用中使用指纹插件进行身份验证。


Lindafan816 profile image