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 thebiometricLoginActive
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);
}
}