ionic android 证书,Ionic 5/Angular Android和iOS 指纹认证

在本教程中，我们将介绍如何向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文件，并添加：

Fingerprint auth demo

show fingerprint auth dialog

也就是说，现在你可以使用支持指纹认证的真实设备来测试指纹认证：ionic cordova platform add android

ionic cordova run android

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

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

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