Introduction

In this tutorial, we'll demonstrate how to integrate the Fingerprint and Face ID biometric authentication into your Appery.io mobile app.

🚧

Important Note!

Note that the option of creating new apps with the Ionic 4 framework was removed and we no longer support the projects that were created with it earlier.
Moreover, you are free to effortlessly migrate your Ionic 4 project(s) to their Ionic version with keeping both apps active.
Please check this page to learn how to do it.

Creating App

1. From the Appery.io dashboard, create a new Ionic 4 app of Ionic 4 Blank type.
2. Click Create new > From plugin; in the Security section, select FaceId and Fingerprint Login plug-in and click Import selected plugins:

You'll see that the FingerprintAuthentification page and two generic services have appeared in the project tree:

Also, you can check the App settings > Cordova plugins tab and see that the FingerprintAllInOne Cordova plug-in is enabled:

📘

Cordova Plug-in Fingerprint All-In-One

The plug-in sources, examples, and documentation can be found on this GitHub page.

4. Go to Project > Routing and set BiometricAuthentification as a default route. Save the changes:

App Testing

Let's test the app. Export the .apk or .ipa file and install it on your device. The plug-in works on both Android 6+ and iOS.

📘

Face ID, supported devices

You can check the iPhone and iPad models that support Face ID here: https://support.apple.com/en-us/HT209183

When you click the Check availability button, the service will check if the Fingerprint or Face ID authentication method is supported by your device. The Biometric login button shows the authentication dialog.

Once the scanned fingerprint or face matches the one registered on your device, the success login status will be returned:

Importing Service to Existing App Page

You may also need to import the BiometricLogin service to the existing app page, for example, Screen1.

1. Let's go to the Screen1 page and click its DATA panel.
2. Here, add BiometricLoginService as a datasource and rename it to biometricLogin:

3. You can delete the Before send mapping because the service doesn't take any request parameters.
4. All we need to do is to add some actions for the Success and Error events. We can show an alert in case of error, and navigate to another page (you can create a new page, Home, for example) in case of successful user authentication:

5. To invoke the service, you need to expand the EVENTS tab and create a new event with Invoke service as the Action and biometricLogin as the Datasource. For example, we can invoke it on the button click:

6. Finally, go to Project > Routing and set Screen1 as a default route.
   The app should work like this:

If the fingerprint (or face) is not recognized, an error warning will be shown:

📘

Want to know more?

You might also like this Appery.io Community video that shows how to create an Ionic 4 application with the functionality of social authentication via Facebook by adding the Facebook Login plug-in: