Biometrische Authentifizierung (Gesicht & Fingerabdruck) - mit Ionic

Alle neuen Geräte haben bereits eine Art von Fingerabdruck-Authentifizierung eingebaut. Mit dieser eingebauten Funktion können wir den Benutzern von mobilen Anwendungen eine einfache und bequeme Möglichkeit bieten, ihre "geheimen" Daten innerhalb der Anwendung zu entsperren.

Vorteile der Fingerabdruck-Authentifizierung

• Schnell, bequem und zuverlässig in der Anwendung.
• Einzigartige Fingerabdrücke stellen sicher, dass Ihre mobile Anwendung nur von Ihnen freigeschaltet wird

Mit cordova-plugin-fingerprint-aio können wir die Authentifizierung per Fingerabdruck/Touch ID zu mobilen Ionic/Angular-Anwendungen hinzufügen. Wir können dieses Plugin auch so verwenden, dass es den Benutzer zwingt, seinen Fingerabdruck zu scannen, wenn er die Anwendung schließt, ohne sich abzumelden, und sie dann wieder aufruft.

Grundlegender Anwendungsablauf

Der grundlegende Ablauf der mobilen Anwendung sieht wie folgt aus:

1. Nehmen wir an, die "CoMakeIT Demo App" hat 2 Seiten (Login- und Dashboard-Seiten)
2. Der Benutzer meldet sich mit seinem Benutzernamen und Kennwort bei der Anwendung an.
3. Nach erfolgreicher Authentifizierung wird der Benutzer auf die Dashboard-Seite weitergeleitet.
4. Der Benutzer verlässt die Anwendung (nicht abgemeldet).
5. Benutzer setzt die Anwendung fort
6. Ein "Fingerabdruck-Zugang" wird über der Anwendung angezeigt.
7. Der "Fingerabdruck-Zugang" wird aufgehoben, wenn der Benutzer erfolgreich per Fingerabdruck/Touch ID verifiziert wurde.
8. Der Benutzer wird auf die Dashboard-Seite weitergeleitet.

Ionic-Projekt erstellen

• Führen Sie in Ihrem Terminal den folgenden Befehl aus

ionic start CoMakeIT sidemenu

• Erstellen Sie die Login- und Dashboard-Seite mit dem folgenden Befehl.

cd .CoMakeITsrcapppages
ionic generate page

• Auf GitHub finden Sie den Quellcode der Login- und Dashboard-Seite.

Plugin-Integration

• Führen Sie in Ihrem Terminal die folgenden Befehle aus, um das Cordova-Plugin für die Fingerabdruck-Authentifizierung und den nativen Ionic-Wrapper hinzuzufügen

.ionic cordova plugin add cordova-plugin-fingerprint-aio
npm install @ionic-native/fingerprint-aio

• Öffnen Sie nun src/app/app.module.ts und importieren Sie den nativen Wrapper für die Fingerabdruckauthentifizierung und fügen Sie ihn zum Array Provider hinzu.

import { NgModule } from '@angular/core';

import { BrowserModule } from '@angular/platform-browser'; import { RouteReuseStrategy } from '@angular/router';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular'; import { SplashScreen } from '@ionic-native/splash-screen/ngx'; import { StatusBar } from '@ionic-native/status-bar/ngx';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { AuthGaurdService } from './services/auth-gaurd.service'; import { AuthenticationService } from './services/authentication.service';
import { IonicStorageModule } from '@ionic/storage'; import { AppUtilService } from './services/app-util.service';
import { FingerprintAIO } from '@ionic-native/fingerprint-aio/ngx'; @NgModule({
declarations: [AppComponent], entryComponents: [],
imports: [ BrowserModule, IonicModule.forRoot(), AppRoutingModule,
IonicStorageModule.forRoot()
],
providers: [ StatusBar, SplashScreen,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }, AuthGaurdService,
AuthenticationService, AppUtilService, FingerprintAIO
],
bootstrap: [AppComponent]
})
export class AppModule {}

• Wir können es in unsere Komponenten einbinden und seine API verwenden, um die Fingerabdruck-Authentifizierung in unserer mobilen Anwendung zu nutzen.

presentFingerPrint() { returnthis.fingerPrintAIO.show({ clientId:'CoMakeIT-Demo-App',
clientSecret:'password', // Only necessary for Android disableBackup:false, // Only for Android(optional) localizedFallbackTitle:'Use Pin', // Only for iOS localizedReason:'Please authenticate'// Only for iOS
});
}
async isFingerprintAvailable() { letresult=false;
constpromise=awaitthis.fingerPrintAIO.isAvailable(); promise.then((response) => {
result=true;
console.log('fingerprint available : ', response);
});
promise.catch((error) => {
result=false;
console.log('fingerprint error : ', error);
});
returnresult;
}

Prüfen Sie zunächst, ob die Authentifizierung per Fingerabdruck auf dem Gerät verfügbar ist. Wenn sie verfügbar ist, rufen Sie die Funktion presentFingerPrint() auf.

loginWithFingerprint() {
if (this.appUtil.isFingerprintAvailable) {
this.appUtil.presentFingerPrint()
.then((result: any) => {
this.router.navigate(['/home/dashboard']);
})
.catch((error: any) => {
console.error('fingerprint : ', 'error');
});
}
}

• Fügen Sie nun eine Schaltfläche hinzu, um das Dialogfeld für die Authentifizierung per Fingerabdruck aufzurufen.

Login with Fingerprint

Fingerabdruck-Authentifizierung testen

• Sie können die Fingerabdruck-Authentifizierung mit einem Android- oder iOS-Gerät testen, das die Fingerabdruck-Authentifizierung unterstützt.
• Führen Sie die folgenden Befehle aus, um die Anwendung auf dem Android-Gerät auszuführen.

ionic cordova platform add android
ionic cordova run android

Bildschirmfotos der Demo-App

• 

• 

• 

• 

Quellcode

Den vollständigen Quellcode finden Sie im Github-Projekt.