В этом блоге я поделюсь с вами, как создать функциональность типа блокировки пин-кода для вашего приложения. Это приложение использует Ionic Framework и направлено на защиту вашего приложения путем аутентификации пользователя по отпечатку пальца.

Эта функция в основном сосредоточена на приложениях, которые включают транзакции / цифровые платежи и защищают кредит / дебет пользователя от любого внешнего вреда. Конфиденциальность и безопасность - два основных ключевых момента, о которых мы думаем при загрузке любого приложения.
Каждый хочет, чтобы его приложение оставалось неприкосновенным для неавторизованных пользователей. Помня вышесказанное, я только что создал блокировку контактов и аутентификацию по отпечатку пальца с помощью Ionic Framework.

Требования -

  • Ионный фреймворк 3.0
  • Node.js 6.0+
  • Плагин Fingerprint AIO Cordova

Настройка -

  • Начнем с создания нового ионного проекта
ionic start pinlock blank;
  • Также необходимо установить плагин Fingerprint AIO, чтобы процесс отпечатка пальца работал -
$ ionic cordova plugin add cordova-plugin-fingerprint-aio
$ npm install --save @ionic-native/fingerprint-aio
  • Также определите поставщика плагина в /src/app/app.module.ts в вашем списке поставщиков.
import { FingerprintAIO } from '@ionic-native/fingerprint-aio';
....
providers: [
    FingerprintAIO,
    { provide: ErrorHandler, useClass: IonicErrorHandler }
  ]

  • Выше показан P на заблокированном экране. Я просто использовал ионные кнопки с базовым использованием таблиц стилей каскада.
<ion-row class="row1">
   <ion-col col-md-4>
      <button ion-button outline class="button"        (click)="add('1')">1</button>
  </ion-col>
   <ion-col col-md-4>
     <button ion-button outline class="button (click)="add('2')">2</button>
   </ion-col>
   <ion-col col-md-4> 
      <button ion-button outline class="button" (click)="add('3')">3</button>
   </ion-col>
</ion-row>
.....
// css class
.button{
   border: 50%;
   width: 70px;
   border-radius: 50%;
   height: 70px;
}

Я добавил тег ‹ion-row› и внутри строки добавил 3 столбца ‹ion-col›. И внутри столбца я поместил кнопки и присвоил ему номер, например, 1,2,3… и т. д. Также есть функция щелчка, присвоенная кнопкам с помощью имени добавить ().

  • Следуя приведенному выше шаблону, вы можете создать все оставшиеся кнопки.

В настоящее время почти каждый смартфон оснащен функцией сканирования отпечатков пальцев.
С помощью Плагина Fingerprint AIO Cordova от Ionic Native я добавил эту функцию в приложение. Вы можете не запоминать пин-код и просто использовать палец, чтобы разблокировать приложение, поскольку оно будет автоматически сохранять учетные данные пользователя. Но это будет работать только на устройствах, совместимых со сканированием отпечатков пальцев.
Надеюсь, этот пост может помочь вам во всех отношениях. Для получения помощи получите полный код с GitHub.