How it works...

First, let's take a look at the template home.html:

<ion-content padding>  <h1 padding>Secrets</h1>  <p *ngIf="!isAvailable">This Device doesn't have Fingerprint Sensor</p>  <p *ngIf="isAvailable && quote">{{quote.joke}}</p>  <button id="reveal-button" color="primary" *ngIf="!!isAvailable" ion-button round (click)="authenticate()">Reveal a Secret</button></ion-content>

If the device doesn't have a fingerprint sensor, we display a notice on the screen saying that This Device doesn't have Fingerprint Sensor. Otherwise, we show a Reveal a Secret Button. When the user clicks on it, it opens a Fingerprint Authentication dialog.

In your home.ts, you must import the FingerprintAIO module first, as shown here:

import { FingerprintAIO ...

Get Ionic Cookbook - Third Edition now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.