Package Exports

@phemium-costaisa/fingerprint-auth
@phemium-costaisa/fingerprint-auth/bundles/phemium-costaisa-fingerprint-auth.umd.js
@phemium-costaisa/fingerprint-auth/fesm2015/phemium-costaisa-fingerprint-auth.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@phemium-costaisa/fingerprint-auth) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Phemium Fingerprint Auth

Description

Package of component, pipe and service to handle Fingerprint authentication on Angular apps.

Installation

Run npm i -S @phemium-costaisa/fingerprint-auth

Configuration

Add the FingerprintAuthModule.forRoot() to app.module.ts:

import { FingerprintAuthModule } from 'fingerprint-auth';

@NgModule({
  imports: [
    FingerprintAuthModule.forRoot({
      mobile: environment.platform === 'mobile'
    })
  ]
})
export class AppModule {}

Add FingerprintAuthModule.forChild() where the biometricLoginActive needs to be used:

import { FingerprintAuthModule } from 'fingerprint-auth';

@NgModule({
  imports: [
    FingerprintAuthModule.forChild()
  ]
})
export class LoginMobilePageModule {}

Biometric Activator component usage

To use the <app-biometric-activador> just import the BiometricActivator component in the module you need it.

But, if you need to make it as routing page, you must create a Wrapper module for it, like this:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { BiometricActivator } from 'fingerprint-auth';

const routes: Routes = [
  {
    path: '',
    component: BiometricActivator
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
})
export class BiometricActivatorPageRoutingModule {}

FingerprintService usage

Just import the FingerprintService wherever you need it:

import { FingerprintService } from 'fingerprint-auth';

@Component()
export class MyComponent {
  constructor(
    private fingerprintService: FingerprintService
  ) { }
}

The FingerprintService is well documented in-code, but I'll give a few examples:

To login

if (await this.fingerprintService.checkIfNeedsBiometric(email)) {
    this.fingerprintService.showBiometricActivator(email, password, 'dashboard');
}

To configure Biometric:

this.fingerprintService.showBiometricPrompt(user).then(result => {
    this.login(result.user, result.password, true);
});

Profile page switches:

biometricFace = new FormControl(false);
biometricTouch = new FormControl(false);

ngOnInit() {
    this.fingerprintService.isBiometricActive(this.userService.user.email, 'face').then(active => this.biometricFace.setValue(active, { emitEvent: false }));
      this.fingerprintService.isBiometricActive(this.userService.user.email, 'touch').then(active => this.biometricTouch.setValue(active, { emitEvent: false }));
      this.fingerprintService.retrieveDeviceBiometrics().then(biometrics => {
        if (biometrics.face || biometrics.touch) {
          this.showBiometric = true;
        }
      })
    }
    this.biometricFace.valueChanges.subscribe(enable => this.biometricChange('face', enable));
    this.biometricTouch.valueChanges.subscribe(enable => this.biometricChange('touch', enable));
}

async biometricChange(biometricType: keyof BiometricsAvailable, enabled: boolean) {
    if (enabled) {
      await this.fingerprintService.clearBiometricData(this.userService.user.email, biometricType);
    } else {
      await this.fingerprintService.disableBiometricData(this.userService.user.email, biometricType);
    }
}