Can you please guys share the implementation in the angular way?

[ArmandoPerdomo]

Hello, can you please guys share the solution in the angular way?

I try the following

1. Install npm install @digitalpersona/devices
2. Copy these files into my src/app/core/modules folder
3. In my angular.json I add the index.js like this

   "scripts": [
             "src/app/core/modules/WebSdk/index.js"
           ],

4. in my app.component.ts I do this

   
   import {FingerprintReader} from "@digitalpersona/devices";
   ...

private reader: FingerprintReader; constructor() { this.reader = new FingerprintReader(); }

But in my console still getting errors

ERROR in node_modules/@digitalpersona/devices/dist/typings/devices/cards/reader.d.ts:1:23 - error TS2688: Cannot find type definition file for 'websdk'.

1 ///

node_modules/@digitalpersona/devices/dist/typings/devices/fingerprints/reader.d.ts:1:23 - error TS2688: Cannot find type definition file for 'websdk'.

1 /// <reference types="WebSdk" />

node_modules/@digitalpersona/devices/dist/typings/devices/iwa/device.d.ts:1:23 - error TS2688: Cannot find type definition file for 'websdk'.

1 ///

am I missing something?

_Originally posted by @ArmandoPerdomo in https://github.com/hidglobal/digitalpersona-devices/issues/2#issuecomment-735875733_

[ArmandoPerdomo]

I add in the app.module.ts

import './core/modules/WebSdk';

But i'm getting new errors

WARNING in ./src/app/core/modules/WebSdk/index.js
Module not found: Error: Can't resolve 'vertx' in 'D:\Armando\Proyectos\Cupo Express\cupo-expess-totem\src\app\core\modules\WebSdk'

ERROR in ./node_modules/@digitalpersona/devices/dist/es5.bundles/index.umd.js
Module not found: Error: Can't resolve 'WebSdk' in 'D:\Armando\Proyectos\Cupo Express\cupo-expess-totem\node_modules\@digitalpersona\devices\dist\es5.bundles'
Error from chokidar (D:\): Error: EBUSY: resource busy or locked, lstat 'D:\pagefile.sys'

    ERROR in node_modules/@digitalpersona/devices/dist/typings/devices/cards/reader.d.ts:1:23 - error TS2688: Cannot find type definition file for 'websdk'.

    1 /// <reference types="WebSdk" />
                            ~~~~~~
    node_modules/@digitalpersona/devices/dist/typings/devices/fingerprints/reader.d.ts:1:23 - error TS2688: Cannot find type definition file for 'websdk'.

    1 /// <reference types="WebSdk" />
                            ~~~~~~
    node_modules/@digitalpersona/devices/dist/typings/devices/iwa/device.d.ts:1:23 - error TS2688: Cannot find type definition file for 'websdk'.

    1 /// <reference types="WebSdk" />
                            ~~~~~~

[a-bronx]

Probably duplicate of #5.

[ArmandoPerdomo]

I tried all the implementations specified there but I'm still getting these errors

The vertx error was gone

 ERROR in node_modules/@digitalpersona/devices/dist/typings/devices/cards/reader.d.ts:1:23 - error TS2688: Cannot find type definition file for 'websdk'.

    1 /// <reference types="WebSdk" />
                            ~~~~~~
    node_modules/@digitalpersona/devices/dist/typings/devices/fingerprints/reader.d.ts:1:23 - error TS2688: Cannot find type definition file for 'websdk'.

    1 /// <reference types="WebSdk" />
                            ~~~~~~
    node_modules/@digitalpersona/devices/dist/typings/devices/iwa/device.d.ts:1:23 - error TS2688: Cannot find type definition file for 'websdk'.

    1 /// <reference types="WebSdk" />

Maybe is something with the configuration in my ts file? any ideas?

[ArmandoPerdomo]

I try to implement the SDK with the implementation described in the Developer Guide in "the Javascript API"

But I think that is an old specification, maybe It would work to implement enrollment and authentication?

That's the only think that I have to do.

In the specification, you have a method that returns a sample from the user's finger, when you startAcquisition()

[a-bronx]

Probably the Typescript compiler in your project cannot find the modules\WebSdk\index.d.ts. Try to add the path to typings in tsconfig.json.

The import './core/modules/WebSdk'; should also work, just make sure there is no server-side rendering in the import point, because WebSdk is a browser-only library. You'll get errors is WebSdk somehow gets imported in the NodeJS context.

---

The documentation referred by the link is an older Fingerprint WebApi (fingerprint.sdk.js). It provides fingerprint acquisition only, but does not provide any methods for enrollment or authentication. You'll need to implement your own enrollment/authentication using the raw fingerprint samples, or use a DigitalPersona Web Services.

The @digitalpersona/devices library implements both the Fingerprint WebApi and Cards WebApi functionality, allowing to acquire fingerprints and card credentials. It is pretty similar to the older Fingerprint WebApi, so you can use any of them if all you need is to acquire fingerprint samples.

If you also need enrollment and authentication with DigitalPersona Web Services, you can use @digitalpersona/enrolment and @digitalpersona/authentication, and they have better integration with the @digitalpersona/devices.

[ArmandoPerdomo]

Sorry for my late response,

Great!, thanks for the support

the better solution was this (Angular 9) if anyone needs

1. Install npm install @digitalpersona/devices
2. Copy these files into my src/app/core/modules folder
3. Add modues folder into my typeRoots

   "typeRoots": [
   "node_modules/@types",
   "src/app/core/modules"
   ],

4. Switch my ecma script target in my tsconfig.json to "target": "es6",
5. Add these scripts to my angular.json folder

   "scripts": [
     "src/app/core/modules/WebSdk/index.js"
   ],

6. Commented out the import 'WebSdk' from the file node_modules/@digitalpersona/devices/dist/es6/devices/websdk/channel.js (this is some kinda bug or something?)

7. Then in my app.component.ts I add this and works this.reader.enumerateDevices().then(console.log);

Now I have another problem, I need to do the enrollment and the authentications with the sample users

Which requirements do I need to do this?

In your official documentation you have this method

private onSamplesAcquired = (event: SamplesAcquired) =>
    {
        try {
            const samples = event.samples;
            const api = new FingerprintsAuth( <service endpoint URL> );
            const token = await (
                this.identity ? 
                    api.authenticate(this.identity, samples):
                    api.identify(samples));
            );
            this.notifyOnToken(token);
        }
        catch (error) {
            this.handleError(error);
        }
    }

But what means this? <service endpoint URL> this has to be some integration with your services or something?

My requirement its compare to fingerprints to authenticate the user, that's my general purpose

Thanks

[a-bronx]

<service endpoint URL> this has to be some integration with your services or something?

Answered here

I need to do the enrollment and the authentications with the sample users

This task is out of scope of the @digitalpersona/devices library, as it's only purpose is to collect user credential data like fingerprint samples. To match fingerprints, you need a fingerprint matching engine.

One solution is to use DigitalPersona Authentication Server, which is a Windows service integrated with ActiveDirectory and/or LDS accounts. It includes DigitalPersona Access Management Web Services (DPAM) and corresponding Web APIs (like @digitalpersona/authentication and @digitalpersona/enrollment) to communicate with browsers. This is what provide service endpoint in the sample code you quoted.

Another option is to use any other fingerprint matching engine supporting one of fingerprint template formats, and implement your own biometric authentication web service, backed with your own biometric data store and the matching engine of your choice, and with your own JS client library. In this case you won't be able to use @digitalpersona/authentication and @digitalpersona/enrollment APIs, as they are provided as a part of DPAM suite.

[ArmandoPerdomo]

Thank you for the response,

My solution was to do only the user sample capturing with the @digitalpersona/devices, and for the enrollment and authentication I made my solution in .NET with the SDK, receiving the input and outputting if the verification was successful

[ghost]

Tried @ArmandoPerdomo's solution and I managed to make it work. But after trying

7. Then in my app.component.ts I add this and works this.reader.enumerateDevices().then(console.log);

I got this error from channel.js

ERROR Error: Uncaught (in promise): Error: Communication failure.

Seems like I'm missing something

[a-bronx]

Do you have a DigitalPersona Workstation or DigitalPersona Lite Client installed? See the https://github.com/hidglobal/digitalpersona-devices/issues/5#issuecomment-643812592

[d-mance]

Thank you for the response,

My solution was to do only the user sample capturing with the @digitalpersona/devices, and for the enrollment and authentication I made my solution in .NET with the SDK, receiving the input and outputting if the verification was successful

Your solution works fine but there is a problem if the build of the application is made with jenkins. Jenkins will download a fresh library with the import line not commented.

Is there any suggestion on how to manage that situation?

[Abdullah0991]

Thank you very much @ArmandoPerdomo for the guide <3.

The lib is working fine for me with Angular 11, but I have 2 warnings:

Warning: ./src/modules/WebSdk/index.js Module not found: Error: Can't resolve 'crypto' in 'C:\Users\user\Desktop\testpersona\src\modules\WebSdk'

Warning: ./src/modules/WebSdk/index.js Module not found: Error: Can't resolve 'vertx' in 'C:\Users\user\Desktop\testpersona\src\modules\WebSdk'

How to solve those warnings ?

[a-bronx]

The lib is working fine for me with Angular 11, but I have 2 warnings:

Where and when do you have these warnings? Make sure you load the WebSdk module only into the browser using a regular <script> tag, not via import. For your TS code to compile you need to import only typings to make the compiler happy, so make sure .d..ts file is in your tsc typings path. You may also need to declare an external global object WebSdk in your bundler.

[Abdullah0991]

I am really sorry for the delay...

Where and when do you have these warnings

Just after following @ArmandoPerdomo guide.

This is the service code:

import '../../../assets/modules/WebSdk';

import { Injectable } from '@angular/core';
import { FingerprintReader, SampleFormat } from '@digitalpersona/devices';
import { from, Observable } from 'rxjs';
import { finalize } from 'rxjs/operators';
import { DeviceInfo } from '@digitalpersona/devices/src/devices/fingerprints/device';

@Injectable({
  providedIn: 'root'
})
export class FingerprintPersonaService {
  private reader: FingerprintReader;

  constructor() {
  }

  public initReader(): Observable<void> {
    this.reader = new FingerprintReader(new WebSdk.WebChannelOptions({}));

    this.reader.onDeviceConnected = (event) => {
      console.log('onDeviceConnected', event);
    };
    this.reader.onDeviceDisconnected = (event) => {
      console.log('onDeviceDisconnected', event);
    };
    this.reader.onQualityReported = (event) => {
      console.log('onQualityReported', event);
    };
    this.reader.onSamplesAcquired = (event) => {
      console.log('onSamplesAcquired', event.samples[0]);
    };
    this.reader.onErrorOccurred = (event) => {
      console.log('onReaderError', event);
    };

    return from(this.reader.startAcquisition(SampleFormat.PngImage));
  }

  public destroyReader(): Observable<void> {
    return from(this.reader.stopAcquisition()).pipe(finalize(() => {
      console.log('Reader destroyed');
      delete this.reader;
    }));
  }

  public getReaderInfo(devUid: string): Observable<DeviceInfo | null> {
    return from(this.reader.getDeviceInfo(devUid));
  }
}

[a-bronx]

@Abdullah0991

1. do you have index.d.ts file in your /assets/modules/WebSdk?
2. As I mentioned, make sure the WebSdk/index.js is not bundled with your modules, but instead loaded with <script src="/assets/modules/WebSdk/index.js"> in your index.html. You may need to declare the WebSdk as a "global/external" library in your webpack/rollup/etc config.
3. try to add the import './assets/modules/WebSdk in your top-level index.ts only. Your code does not really need any types from WebSdk, the import is needed only to introduce those global types for @digitalpersona/devices

[Abdullah0991]

do you have index.d.ts file in your /assets/modules/WebSdk?

Yes.

As I mentioned, make sure the WebSdk/index.js is not bundled with your modules, but instead loaded with Githubissues.

Githubissues is a development platform for aggregating issues.